CSS framework

Last updated

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.

Contents

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

NameLatest releaseLicense Grid UnitsFeaturesNo. of columns
versiondate
Blueprint 1.0.1May 14, 2011 [1] MIT LicenseTypography, forms, print, plugins for buttons, tabs, and sprites.
Bootstrap 5.3.3February 20, 2024 [2] [3] [4] MIT License
(Apache License prior to 3.1.0)
fixed, fluid, responsivepx, %Layout, typography, forms, buttons, navigation, media queries, .sass files, JavaScript libraries, RTL layout.Any,
default 12 [5]
Foundation 6.7.5July 13, 2022 [6] MIT Licensefluidpx, %Responsive layout, source ordering, typography, forms, buttons, navigation, media queries, and JavaScript libraries.Any,
default 12 [7]
YAML 4.1.2July 28, 2013 [8] CC-BY 2.0fixed, elastic, fluidpx, 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.1October 22, 2014 [9] BSD-3fixed and fluid
Tailwind 3.4.3March 27, 2024 [10] [11] MIT Licensefixed, fluid, responsiveAny

See also

References

  1. "Releases · joshuaclayton/blueprint-css · GitHub". GitHub. Retrieved 23 April 2020. This repository has been archived by the owner. It is now read-only.
  2. "Releases · twbs/bootstrap · GitHub". GitHub. Archived from the original on 2014-06-01. Retrieved November 15, 2021.
  3. Déramond, Julien (2024-02-20). "Bootstrap 5.3.3". blog.getbootstrap.com. Retrieved 2024-04-11.
  4. "bootstrap". npm. 2024-02-20. Retrieved 2024-04-11.
  5. Bootstrap documentation - Customizing the grid
  6. "Releases · foundation/foundation-sites · GitHub". GitHub. Retrieved 24 April 2020.
  7. Foundation documentation - The Grid
  8. "Releases · yamlcss/yaml · GitHub". GitHub. Retrieved 24 April 2020.
  9. "Releases · yui/yui3 · GitHub". GitHub. Retrieved 24 April 2020.
  10. "Releases · tailwindlabs/tailwindcss". GitHub. Retrieved 2024-04-11.
  11. "tailwindcss". npm. 2024-03-27. Retrieved 2024-04-11.