When people think of Web development, they usually think of HTML or JavaScript. They often ignore CSS, which according to Wikipedia is not only one of the most important parts of the Web, but also one of the most forgotten, even though it is one of the three technologies that underlie the World Wide Web.

Today I’m going to share 9 popular and powerful open source front-end frameworks to help you easily build beautiful web fronds.

Bootstrap is undoubtedly the most popular CSS framework. It is the original Web front-end framework developed by Twitter. Bootstrap also provides many examples to help you get started.

Using Bootstrap, you can combine different components and layouts together to create interesting page designs. It also provides a lot of detailed documentation. There are currently over 1,100 contributors and over 19,000 submissions on Github. (Github address: github.com/twbs/bootst…

PatternFly is RedHat’s open source CSS framework, and unlike Bootstrap, which is designed for people who want to create beautiful websites, PatternFly focuses primarily on enterprise application developers, Provides components such as bar charts, charts, navigation, and so on, which RedHat actually uses to create 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.

PatternFly has a total of over 1,050 submissions and 44 contributors on GitHub. (Github address: github.com/patternfly/…

3, MaterialComponentsfortheweb MaterialComponentsfortheweb (MDCWeb), is a new Google specifically designed for Web front end frame. MDCWeb helps developers execute MaterialDesign, and components are developed by Google’s core team of engineers and UX designers. These components establish a solid development workflow for building beautiful and powerful Web projects.

MDCWeb has more than 5,700 submissions and 349 contributors on Github. (Github address: github.com/material-co…

Pure Bootstrap, Patternfly, and MDCWeb are very powerful CSS frameworks, but they can be tedious and complex. If you want a lightweight CSS framework, try pure.css, which itself is closer to CSS programming, but can help you build a nice web page. Pure is a lightweight CSS framework with minimal footprint. Developed by Yahoo, it is open source under the BSD license.

Pure has 565 + submissions and 59 contributors on Github. (Github address: github.com/pure-css/pu…

Foundation claims to be the most advanced responsive front-end framework in the world. It provides advanced features and tutorials for building professional websites. Many companies, organizations use this framework, and it has a large amount of documentation available.

Foundation has nearly 17,000 submissions and 1,000 contributors on Github. (Github address: github.com/foundation/…

Bulma is an open source framework based on Flexbox, available under the MIT license. Bulma is a very lightweight framework because it requires only one CSS file. Bulma has concise documentation that makes it easy to choose the topic you want. It also has a number of Web components that you can use in your design.

Bulma has more than 1,400 submissions and 300 contributors on Github. (Github address: github.com/jgthms/bulm…

If there is any framework more lightweight than Pure, it is Skeleton. The Skeleton library is only about 400 lines long, and the framework only provides some basic CSS framework components. Still, Skeleton provides detailed documentation to help you get started quickly.

Skeleton has 167 submissions and 22 contributors on Github, but it’s not the most active project; its last update was in 2014. (Github address: github.com/dhg/Skeleto…

Materialize is a modern responsive front-end framework based on the MaterialDesign style that solves the most of the heavy lifting, combining your custom components and providing you with default styles. The Materialize documentation page is very comprehensive and easy to follow. Component pages include buttons, cards, navigation, and more.

Materialize has more than 3800 submissions and 250 contributors on Github. (Github address: github.com/Dogfalo/mat…

Bootflat is an open source CSS framework derived from Twitter’s Bootstrap. Compared to Bootstrap, Bootflat is simpler and lighter. Bootflat’s documentation seems almost IKEA inspired, mostly images without much text.

Bootflat is open source under the MIT license and has 159 submissions and 8 contributors on Github. (Github address: github.com/bootflat/bo…

Front-end programmer learning materials for free