When most people think of Web development, they usually think of HTML or JavaScript, but they often forget one technology that has a profound impact on the ability to access the web: CSS. CSS is the most important part of any web page, and according to Wikipedia, it can even be called one of the three fundamental technologies of the World Wide Web, but it’s also one of the most forgotten parts.

This article explores nine popular, powerful, and open source frameworks that make it easy to build a sophisticated web front end for your CSS development.

1, the Bootstrap

Bootstrap is undoubtedly the most popular CSS framework, and it is one of the earliest front-end frameworks for the Web. Developed by Twitter, Bootstrap is practical, functional, and extensible.

Bootstrap also provides plenty of examples to help you get started.

With Bootstrap, you can connect different components and layouts to create an interesting page design, and it also provides a lot of detailed documentation.

Bootstrap already has over 19,000 submissions and 1,100 contributors in its Github repository. With an MIT license, you can join them and make your own contributions. (Like all frameworks in this article).

2, PatternFly

PatternFly is RedHat’s open source CSS framework (licensed by MIT). PatternFly takes a different approach than Bootstrap: Bootstrap is designed for those interested in creating good-looking websites, while PatternFly focuses primarily on enterprise application developers and provides components such as bar charts, charts and navigation for creating powerful, metrics-driven dashboards. In fact, RedHat uses this CSS framework for product design, such as OpenShift.

In addition to static HTML, PatternFly also supports the ReactJS framework, a popular JavaScript framework developed by Facebook.

PatternFly has many advanced components for enterprise applications, such as bar charts, charts, patterns and layouts, and more.

PatternFly’s GitHub page lists more than 1,050 submissions and 44 contributors. PatternFly is getting a lot of attention and you are more than welcome to help with the project.

3. Material Components for the Web

With the very successful Android platform, Google has set its own standard design criteria based on the concept of MaterialDesign. The MaterialDesign standard tends to be present in all Google products, and it is also open source and available to the general public under license from MIT.

MaterialDesign has a number of components, referred to as “interactive building blocks for creating user interfaces”. These buttons, cards, backgrounds, etc. can create any kind of user interface on a website or mobile application.

Maintenance personnel provide detailed documentation for different platforms.

There are also step-by-step tutorials with exercises for achieving different goals.

The MaterialComponents GitHub page contains repositories for different platforms, including The MaterialComponents (MDCWeb) for Web site development. MDCWeb has more than 5,700 submissions and 349 contributors.

4, Pure

Bootstrap,Patternfly, and MDCWeb are all very powerful CSS frameworks, but they also have the disadvantage of being a bit complicated. If you want a lightweight CSS framework that is closer to coding CSS itself, but also helps you build elegant web pages, try pure.css. Pure is a lightweight CSS framework with minimal footprint. It is developed by Yahoo, BSD licensed and open source.

Despite its small size, Pure provides many of the necessary components to build a polished web page.

Today, Pure has 565 submissions and 59 contributors on Github.

5, Foundation

Foundation claims to be the most advanced responsive front-end framework in the world, providing advanced functionality and tutorials for building a professional web site.

Foundation has a wealth of documents available and is already used by many businesses, organizations, and even politicians.

On Github, the Foundation’s page has nearly 17,000 submissions and 1,000 contributors. Foundation, like the other frameworks in this article, has an MIT executive license.

6, Bulma

Bulma is an open source framework based on Flexbox and is licensed by MIT. Bluma is a very lightweight framework that requires only a CSS file.

Bulma has well-organized documentation and makes it easy to choose your favorite topics to explore. At the same time, Bulma has many Web components that you can choose from and use in your design.

On Github, the Bulma page has more than 1,400 submissions and 300 contributors.

7, Skeleton

If Pure is too much of a chore for you, the more lightweight Skeleton is a good choice. Skeleton’s database is only 400 lines long, and the framework provides just a few basic components to get you started on your CSS framework journey.

Although Skeleton is very simple, it provides extensive documentation to help you get started immediately.

Skeleton has 167 submissions and 22 contributors on Github. However, it’s not the most active project, the last update was in 2014, so it requires more maintenance before it can be used. It’s licensed by MIT, which means you can do whatever you want with it.

8 Materialize.

Materialize is a responsive front-end framework based on GoogleMaterial Design that contains other topics and components developed by Materialize’s contributors.

The Materialize documentation is comprehensive and easy to learn, with component pages including buttons, cards, navigation, and more.

Materialize, which is open source under MIT certification, has more than 3,800 submissions on its Github page and 250 contributors.

9 Bootflat.

Bootflat is an open source CSS framework derived from Twitter’s Bootstrap. Compared to Bootstrap, Bootflat is simpler and has lighter framework components.

Bootflat’s documentation almost seems inspired by IKEA — it shows images of each component rather than words.

Bootflat has an executive license from MIT, and its text on the Github page has 159 submissions and eight contributors,

Write in the last

There are many ways to choose a CSS open source framework, depending on what you want — rich functionality and simplicity. As with all technical decisions, there is no single right answer for everyone, only the relatively right choice for a given time and project.

Try using them for a while and see which ones you really need for future projects. You’re welcome to share your feedback with me in the comments section, and I’ll see you next time!

At the end

This issue is to share here, I am xiaobian South wind blowing, focus on sharing interesting, novel, practical open source projects and developer tools, learning resources! I hope to learn and communicate with you together. Welcome to follow my official account ** [Github navigation station] **.

Phase to recommend

3000 + people accessing an HTML file, how much broadband is enough to support

The programmer connects the private life necessary background frame, need not repeat to build the wheel, net friend: too easy to use!

Still working on the project from start to finish? Use these six SpringBoot projects well, get twice the result with half the effort!

Fierce, this programmer code completion tool, let your programming efficiency fly!

Middle-aged netizens can finally understand young people’s AWSL

Cool! This open source Android projection software will let you work and play both!