跳到主要内容

2019年10个最佳CSS框架

The best CSS frameworks
(形象信用:未来)

+$Looking for the best CSS framework? This guide is here to help. In this feature, we're going to help you get familiar with some of the most interesting and powerful CSS frameworks available. Some of these are well-known, while others are newer tools that are just starting to pick up steam. Either way, you’ll benefit greatly from getting to know these useful tools.

+$We'll kick things off with some well-known names. With any of these CSS frameworks you’ll be fully equipped to build clean, maintainable projects with minimal time investment. However, sometimes you need something a little more specific. For that reason, towards the end of the list you'll find some libraries and frameworks that have very specific use cases.

+$For more CSS inspiration, take a look at our roundup of top+$CSS animations and how to code them

generate CSS

+$Click the image to find out more and book your ticket

+$(Image credit: Getty/Future)
  • +$Generate CSS (26 Sept) is a London conference dedicated to all things CSS –立即预订机票+$! Use The Code+$WEBDESIGNER2+$for 10% Off Tickets

+$01. Bootstrap

best CSS frameworks: Bootstrap

+$(Image Credit: Bootstrap)

+$Let’s start with the most popular framework in the world. While Bootstrap is certainly not exclusively a CSS framework, its most popular features are the CSS-based ones. These include a powerful grid system, badges, buttons, card components, navbars and much more. There are also a whole load of+$free Bootstrap Themes探索。

+$If you’re not familiar with how a framework like Bootstrap works, a few code examples will help, so you can see how easy it is to build maintainable interfaces by editing nothing but HTML.

+$Bootstrap’s grid system is a great place to start. The Bootstrap grid has been a valuable commodity since the framework’s first public release in 2011. And no wonder – it’s ridiculously easy to use. Once you’ve included Bootstrap’s CSS, creating a responsive flexbox-based grid that works in all browsers is as simple as this:

+$
Column 1
Column 2
Column 3

+$As mentioned, Bootstrap also boasts a comprehensive collection of UI components. Some of those that have been difficult to style in the past are just plug-and-play with a framework like Bootstrap. These include a breadcrumb navigation component, a card component and a pagination component. Here’s the HTML to implement pagination:

+$

+$All of these components can be built without writing a single line of CSS. In many cases, you’ll likely theme the components to suit the project’s branding. Whatever the case, the mobile-friendly structure will already be in place, making it incredibly easy to reach a finished product in record time.引导+$also includes advanced features for responsive layouts, utility components and it’s built on Sass, so it’s super-flexible and customisable.

+$02. Foundation

best CSS frameworks: Foundation

+$(Image Credit: Foundation)

+$The Foundation framework, like Bootstrap, has become immensely popular and is known as a more sophisticated framework with some advanced but easy-to-implement CSS components. Foundation is built on Sass so, like Bootstrap, it’s customisable. In addition to that, it also boasts some powerful responsive features that mean making mobile-friendly designs is super-easy.

+$The responsive table component is one of our favourites:

+$

+$Also, the vertical timeline is a layout feature you don’t see in many frameworks. This component uses the+$.timeline+$class for the container, which then holds multiple+$.timeline-item+$elements with an icon and content for each item:

+$
Icon

Example text for timeline item.

+$That’s just a small sampling of the many components that make基础+$one of the best CSS frameworks available today.

+$03. UIkit

best CSS frameworks: UIkit

+$(Image Credit: UIkit)

+$UIkit is another popular frontend framework and maybe a little under-appreciated in terms of CSS features. In addition to many features similar to those found in other popular frameworks, there are a few useful specialised components.

+$First of all, if you’re still not very comfortable with flexbox, you can do complex flexbox-based layouts with UIkit using plain HTML. It might seem strange at first to use flexbox syntax in your HTML classes but this saves you from having to know all the quirks about flex wrapping, columns/rows, flex grow and so forth. Here’s an example:

+$
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

+$UIkit includes dozens of components that offer attractive styles out-of-the-box. Many of the features are specialised utility classes, including the following:

  • +$.uk-align-left+$.uk-align-right+$.uk-align-center+$for aligning or floating elements
  • +$.uk-column-1-2+$up To+$.uk-column-1-6+$for multi-column, magazine-style text layouts
  • +$.uk-radio+$.uk-checkbox+$and similar for attractive form inputs
  • +$Various margin and padding utility classes (+$.uk-margin-top+$.uk-padding-small+$etc.)
  • +$Various utility classes to relatively position an element inside a container (+$.uk-position-top+$.uk-position-left+$etc.)

UIKit的+$is worth a try if you want a fresh, well-maintained CSS framework with a slew of component options. It’s available in Less and Sass and even includes a stylesheet to cater for right-to-left languages.

+$04. Semantic UI

best CSS frameworks: Semantic UI

+$(Image credit: Semantic UI)

+$Semantic UI has a lot of feature overlaps with other popular frameworks but the way it works (implied by the name) is based on the semantic nature of the class names that are used to build components. In other words, the class names are human friendly.

+$Take a look, for example, at how you would build a four-column grid:

+$

+$Notice the way the class names communicate exactly what’s built. The CSS doesn’t necessarily have a unique set of styles for each of the classes listed but instead the classes work together. Thus, much like language where words make sense in context, the class names work together to build cohesive, mobile-friendly components.

+$Here’s another example, which builds a simple data table:

+$

+$This is a great demonstration of how语义UI+$uses class names to describe the component being built. If you’re more accustomed to traditional frameworks like Bootstrap or Foundation, the learning curve on this one might be steeper. But once you get the hang of it, it’s pretty powerful and enjoyable to use.

+$05. Bulma

best CSS frameworks: Bulma

+$(Image Credit: Bulma)

+$Bulma is another popular CSS framework and its primary feature is the fact that its components are largely dependent on flexbox, making it a truly modern framework. You can think of Bulma is being somewhat like a hybrid of Bootstrap and Semantic UI but without any of the complexity. It uses some of the same principles as Semantic UI with its class names, includes many of the popular components, yet manages to keep things simple – for example, form elements have little to no styles to maintain a cross-browser look.

+$The following example demonstrates how a Bulma component can be built and is easy to maintain:

+$

Example Heading

Example text goes here

Some example paragraph text here.

+$Notice The Containing

+$element is given the hero and+$is-dark+$classes. This indicates you want a hero banner that uses the default dark theme (one of seven theme colours included with Bulma, all of which can be changed via Sass variables).

+$Also, Notice The+$is-*+$classes on the container and primary heading. The+$is-fluid+$class enables the container to be fluid on any size screen, centred with margins and with no最大宽度+$. Without this value, the最大宽度+$of the container changes depending on the size of the viewport. The+$is-size-2+$class defines the size of the heading, with sizes ranging from 1 to 7.

如你看到的,+$Bulma+$makes it incredibly easy to build mobile-friendly interfaces via readable class names.

+$06. Tailwind

best CSS frameworks: Tailwind

+$(Image Credit: Tailwind)

+$Many modern CSS frameworks are taking advantage of a recent trend in building user interfaces: the use of single-purpose utility classes also known as Atomic CSS (see the accompanying box). Tailwind is one such framework. The idea behind Tailwind is that instead of starting out with pre-styled cookie-cutter components, you build everything from the ground up using utility classes.

+$The learning curve is definitely higher on this one, especially if Atomic CSS is new to you. But with Tailwind, specificity issues and other override problems common in large stylesheets are avoided.

+$As an example, Tailwind doesn’t include any kind of ‘button’ component. But you can build your own button using something like the following:

+$

+$From there, if you decide what you've created is a valid component for reuse, you can do that by means of Tailwind's component extraction feature. So a component like the button shown in the previous code block can be included like this:

+$ 

+$As you can see, the learning curve for+$Tailwind+$is pretty high. Not only do you have to get accustomed to the utility-first styles but it’s also recommended to use component extraction, done using Tailwind’s+$@apply+$directive – which is just one way to do extraction; see its文件更多。

+$07. Picnic CSS

best CSS frameworks: Picnic CSS

+$(Image credit: Picnic CSS)

+$If you don’t like the idea of including presentational classes in your markup, which is common in most, if not all, of the popular frameworks, then Picnic CSS might be the framework for you. Picnic is in many ways the opposite of Tailwind in that it’s not only less complex but very opinionated.

+$For example, some HTML elements are pre-styled with no need to add class names. These include