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:
- reset style sheet
- grid especially for responsive web design
- web typography
- set of icons in sprites or icon fonts
- styling for tooltips, buttons, elements of forms
- parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
- equalizer to create equal height content
- often used CSS helper classes (left, hide)
List of notable CSS frameworks
Grid systems
| Name | Latest release (date) | License | Grid | Units | Media Queries | 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.7-solidcore (June 20, 2020)[15] | MIT | flexbox, responsive, fixed, fluid | em, px | 320px (primitive), 640px (small), 768px (medium), 1024px (large), 1280px (extra large), 1920px (2k), 2560px (3k), 3840px (4k), 5120px (5k), 5760px (6k), 7000px (7k), 7680px (8k) | accessibility, backgrounds, borders, effects, filters, flexbox, interactivity, layouts, sizing, spacing, SVG, tables, transforms, transitions, typography, (no javascript), (low-level styling manipulation without writing CSS) | Any |
See also
- Comparison of layout engines (Cascading Style Sheets)
References
- "Releases · acss-io/atomizer · GitHub". GitHub. Retrieved April 23, 2020.
- "Releases · joshuaclayton/blueprint-css · GitHub". GitHub. Retrieved 23 April 2020.
This repository has been archived by the owner. It is now read-only.
- "Releases · twbs/bootstrap · GitHub". GitHub. Retrieved April 23, 2020.
- Bootstrap documentation - Customizing the grid
- "Releases · jgthms/bulma · GitHub". GitHub. Retrieved April 22, 2020.
- Bulma documentation - Tiles
- "Releases · geotrev/undernet · GitHub". GitHub. Retrieved 23 April 2020.
- Undernet documentation - Flex Grid
- 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.
- "Releases · foundation/foundation-sites · GitHub". GitHub. Retrieved 24 April 2020.
- Foundation documentation - The Grid
- "Releases · yamlcss/yaml · GitHub". GitHub. Retrieved 24 April 2020.
- "Releases · yui/yui3 · GitHub". GitHub. Retrieved 24 April 2020.
- "Release v3.3.1 · siimple/siimple · GitHub". GitHub. Retrieved 24 April 2020.
- "Release v1.0.7-solidcore · yogurt-foundation/yogurt-css · GitHub". GitHub. Retrieved 20 June 2020.
External links
- CSS Front-end Frameworks with comparison
- Awesome CSS Frameworks, an up-to-date collection of CSS frameworks categorized and ordered by popularity
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.