CSS framework

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

Two notable and widely used examples are Bootstrap and Foundation.

CSS frameworks offer different modules and tools:

Bigger frameworks use a CSS interpreter like Less or Sass.

List of notable CSS frameworks

Grid systems
Name Latest release (date) License Grid Units Features No. of columns
Atomic CSS / Atomizer Atomizer 3.7.0 (Mar 31, 2020)[1] BSD License Any Any Dynamic 'Atomic CSS' Library Any
Blueprint 1.0.1 (May 14, 2011)[2] MIT License Typography, forms, print, plugins for buttons, tabs, and sprites.
Bootstrap 4.4.1 (November 28, 2019)[3] MIT License
(Apache License prior to 3.1.0)		 fixed, fluid, responsive px, % Layout, typography, forms, buttons, navigation, media queries, .sass files, JavaScript libraries. Any, default 12[4]
Bulma 0.8.2 (April 11, 2020)[5] MIT License Flexbox based, Fully responsive, grid px, % Layout, typography, forms, buttons, navigation, .sass files, Easy-to-learn syntax, No JavaScript. Any, default 12[6]
Undernet 7.0.0 (December 29, 2019)[7] MIT License Flexbox based, responsive px, %, em Layout, typography, forms, buttons, .scss files, scoped cascading (optional), JavaScript libraries, CDN-ready. Any, default 12[8]
Cascade Framework 1.6 (December 16, 2014) [9] MIT fixed, elastic, fluid, responsive px, % Grid, layout, typography, forms, buttons, and media queries. (more included) Any
Foundation 6.6.3 (April 8, 2020) [10] MIT License fluid px, % Responsive layout, source ordering, typography, forms, buttons, navigation, media queries, and JavaScript libraries. Any, default 12[11]
YAML 4.1.2 (July 28, 2013)[12] CC-BY 2.0 fixed, elastic, fluid px, em, % Layout, grids, columns, forms, buttons, progressive linearization for responsive layouts, float handling, navigation, typography, accessibility, and add-ons. (accessible tabs, RTL-support, and microformats) Any
YUI CSS grids 3.18.1 (October 22, 2014)[13] BSD-3 fixed and fluid
Siimple CSS 3.3.1 (April 30, 2019)[14] MIT fixed, fluid, responsive px Typography (blockquote, code, headings, links, paragraph, small text), helpers (colors, display, float, sizing, spacing, text helpers), elements (buttons, rule, spinner, tag, tip), components (alert, breadcrumb, card, list, menu, table, tabs), layout (box, navbar, content, jumbotron, footer), form (fields, input, switch, checkbox, radio, select, textarea), grid and experiments (modal, progress bar and steps). Any, default 12
Yogurt 1.0.8-solidcore (July 22, 2020)[15] MIT flexbox, responsive, fixed, fluid Any (Yogurt Documentation) Accessibility, Backgrounds, Borders, Fluids, Effects, Filters, Patterns, Flexbox, Interactivity, Layouts, Sizing, Spacing, SVG, Tables, Transforms, Transitions, Typography, (no javascript), (low-level styling manipulation without writing CSS) Any
gollark: And has `echo` in it.
gollark: You can tell, as it is not indented.
gollark: This is a builtin.
gollark: Well, as they say.
gollark: Oh, it does work, my test cases were just bad.

See also
  • Comparison of layout engines (Cascading Style Sheets)

References
  1. "Releases · acss-io/atomizer · GitHub". GitHub. Retrieved April 23, 2020.
  2. "Releases · joshuaclayton/blueprint-css · GitHub". GitHub. Retrieved 23 April 2020. This repository has been archived by the owner. It is now read-only.
  3. "Releases · twbs/bootstrap · GitHub". GitHub. Retrieved April 23, 2020.
  4. Bootstrap documentation - Customizing the grid
  5. "Releases · jgthms/bulma · GitHub". GitHub. Retrieved April 22, 2020.
  6. Bulma documentation - Tiles
  7. "Releases · geotrev/undernet · GitHub". GitHub. Retrieved 23 April 2020.
  8. Undernet documentation - Flex Grid
  9. Cascade Framework (16 December 2014). "Cascade Framework 1.6 has been released. --- http://www.cascade-framework.com/ #css #html #frontend #frameworkpic.twitter.com/9Hmfgbt47X". @cascadecss. Retrieved 24 April 2020.
  10. "Releases · foundation/foundation-sites · GitHub". GitHub. Retrieved 24 April 2020.
  11. Foundation documentation - The Grid
  12. "Releases · yamlcss/yaml · GitHub". GitHub. Retrieved 24 April 2020.
  13. "Releases · yui/yui3 · GitHub". GitHub. Retrieved 24 April 2020.
  14. "Release v3.3.1 · siimple/siimple · GitHub". GitHub. Retrieved 24 April 2020.
  15. "Release v1.0.8-solidcore · yogurt-foundation/yogurt-css · GitHub". GitHub. Retrieved 22 July 2020.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.