Which front-end framework did you choose?

Bootstrap alternatives: an overview of the best front-end frameworks

In mid-2013, Yahoo published Pure.CSS, a basic structure for the development of web frontends, which is rightly considered a good bootstrap alternative, but can also be used in combination with the Twitter framework. Pure is based on the Scalable and Modular Architecture for CSS, SMACSS for short, which ensures that recurring elements such as tables, buttons or forms are separated from the basic design (font, layout, etc.) and can have their own conventions. By doing Yahoo framework therefore each module has a standard class name with the prefix “pure-” for the regular layout as well as additional class names for specific rules that apply to sub-modules. You can bind a form in which everything is below one another in Pure.CSS e.g. B. by specifying the standard class name "pure-form" and the sub-class name "pure-form-stacked".

The front-end framework, which can be downloaded in a responsive and a non-responsive version, contains the following six modules, which in compressed, zipped form together contain just one Size of around 4 KB (unpacked 16 KB) have:

  • base (base-min.css): Framework basis including rules
  • Grids (grids-responsive-min.css): flexible, responsive grid system
  • Forms (forms-min.css / forms-nr-min.css): Forms
  • Buttons (buttons-min.css): various buttons
  • Tables (tables-min.css): tables
  • Menus (menus-min.css / menus-nr-min.css): Menus

Like the components of Bootstrap and many other CSS frameworks, all modules are based on the open source stylesheet Normalize.css, which optimizes the standard styles of HTML elements through cross browser styles replaced. Compared to the front-end framework from Twitter, the Yahoo counterpart does not contain any JavaScript applications, even if you can of course integrate them on your own. Pure.CSS is less of a ready-made front end that only has to be adapted to your own needs, than rather a Starting point for your project and thus associated with much greater freedom.

Yahoo hosts the framework on its own free content delivery network (Yahoo CDN) so that you can integrate it with a simple reference in the area of ​​your project. You can of course also download Pure.CSS and host it yourself. The current link to the CDN and the download files can be found on the official website purecss.io.