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 release (date)License Grid UnitsFeaturesNo. of columns
Blueprint 1.0.1 (May 14, 2011) [1] MIT LicenseTypography, forms, print, plugins for buttons, tabs, and sprites.
Bootstrap 5.3.3 (February 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.5 (July 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.2 (July 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.1 (October 22, 2014) [9] BSD-3fixed and fluid
Tailwind 3.4.3 (March 27, 2024) [10] [11] MIT Licensefixed, fluid, responsiveAny

See also

Related Research Articles

Cassowary is an incremental constraint solving toolkit that efficiently solves systems of linear equalities and inequalities. Constraints may be either requirements or preferences. Client code specifies the constraints to be maintained, and the solver updates the constrained variables to have values that satisfy the constraints.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Blueprint is a CSS framework designed to reduce development time and ensure Cross-browser compatibility when working with Cascading Style Sheets (CSS). It also serves as a foundation for many tools designed to make CSS development easier and more accessible to beginners.

<span class="mw-page-title-main">Sass (style sheet language)</span> Stylesheet language

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

<span class="mw-page-title-main">Vaadin</span>

Vaadin is an open-source web application development platform for Java. Vaadin includes a set of Web Components, a Java web framework, and a set of tools that enable developers to implement modern web graphical user interfaces (GUI) using the Java programming language only, TypeScript only, or a combination of both.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Node.js</span> JavaScript runtime environment

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Pretty Diff is a language-aware data comparison utility implemented in TypeScript. The online utility is capable of source code prettification, minification, and comparison of two pieces of input text. It operates by removing code comments from supported languages and then performs a pretty-print operation prior to executing the diff algorithm. An abbreviated list of unit tests is provided. The documentation claims the JavaScript pretty-print operation conforms to the requirements of JSLint.

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

Yeoman is an open source client-side scaffolding tool for web applications. Yeoman runs as a command-line interface written for Node.js and combines several functions into one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.

<span class="mw-page-title-main">Ionic (mobile app framework)</span> Open-source framework to develop hybrid mobile apps

Ionic is an open-source UI toolkit for building cross-platform mobile, web, and desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. It provides a set of pre-designed UI components and tools for building high-quality, interactive applications. Ionic was originally built as a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components using StencilJS, allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

<span class="mw-page-title-main">PostCSS</span> Software development tool that uses JavaScript-based plugins to automate routine CSS operations

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

<span class="mw-page-title-main">CSS grid layout</span>

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard although it has been adopted by the recent versions of all current major browsers.

Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

<span class="mw-page-title-main">Deno (software)</span> Secure JavaScript and TypeScript runtime

Deno is a runtime for JavaScript, TypeScript, and WebAssembly that is based on the V8 JavaScript engine and the Rust programming language. Deno was co-created by Ryan Dahl, who also created Node.js.

<span class="mw-page-title-main">Bootstrap Studio</span> Proprietary web design and development application

Bootstrap Studio is a proprietary web design and development application. It offers a large number of components for building responsive pages including headers, footers, galleries and slideshows along with basic elements, such as spans and divs.

Carbon Design System is a free and open-source design system and library created by IBM, which implements the IBM Design Language, and licensed under Apache License 2.0. Its public development initially started on June 10, 2015. Their components have multiple implementations, which includes a vanilla JS and CSS implementation and React, while the community maintains the frameworks developed in Svelte, Vue.js, and Web Components. The official typeface to be used according to the guidelines is the IBM Plex typeface, with alternative typefaces for CJK scripts are Noto Sans CJK SC, Noto Sans CJK TC, and Noto Sans JP.

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

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.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.