CSS Resources
CSS Frameworks
CSS/UI frameworks to help build great looking websites and applications
| Website | Description |
|---|---|
Low level, utility-first framework | |
Popular UI framework with tons of components that use both CSS and JS | |
A modern responsive front-end framework based on Material Design | |
Light framework based on Material Design. No JS dependency | |
Modern CSS framework with no JS | |
Extremely light framework for basic UI elements | |
Fully configurable utility generator and CSS framework built entirely in Sass | |
Empowers designers and developers by creating a shared vocabulary for UI | |
A community fork of Semantic-UI | |
Mobile first framework with clean markup | |
A set of small, responsive CSS modules | |
Lightweight and modular front-end framework | |
Lightweight, grid-layout engine for Sass | |
Minimalist CSS framework | |
Simple, extensible CSS framework written in Sass | |
Lightweight, modern CSS framework | |
Lightweight and beautiful library | |
A beautiful CSS framework designed for minimalists | |
A micro (~3kb) CSS framework | |
A lightweight layout library for building great responsive mobile first UIs that work everywhere | |
A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library | |
A design system for building faithful recreations of old UIs | |
NES-style CSS Framework | |
Lightweight, forward-thinking CSS library built with future CSS syntax | |
A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done | |
Open source modular CSS toolkit providing great structure for building websites quickly | |
Turret CSS is a styles framework for development of responsive websites. | |
A strong, independent CSS Framework. | |
Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css | |
XP.css is an extension of 98.css. A CSS library for building interfaces that look like old UIs. | |
Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. | |
A pure CSS tooltip library for your lovely websites. | |
Pure CSS Image Hover Effect Library | |
A minimal, responsive, style-agnostic CSS framework | |
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. | |
Material Design with Bootstrap | |
A modern CSS framework for developing powerful web interfaces faster and easier | |
A responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages. | |
Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript. | |
A web component for drawing patterns with CSS | |
Make your website look like a LaTeX document | |
Front-end printing solution | |
Next generation compiler for Tailwind CSS | |
A component and utility centric SCSS framework designed for rapid prototyping. | |
Modern framework to print the web correctly. | |
World's smallest responsive fire css framework (395 bytes). | |
Arwes is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. | |
Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients. | |
Primitive CSS Framework for dummies, without classes. | |
A modern and minimal CSS framework for terminal lovers. | |
A minimal classless css framework / theme. | |
PS1 style CSS Framework, inspired by NES.css. | |
Marx is the classless CSS reset to be used in any projects (namely small ones). | |
Style your webpage like Edward Tufte’s handouts. | |
Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. | |
Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS. |
CSS Methodologies
CSS methodologies to help write modular, reusable and scalable code
| Website | Description |
|---|---|
OOCSS concepts help us write components that are flexible, modular and interchangeable. | |
Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. | |
Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. | |
SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. |
CSS Animations
CSS animations to build awesome animations for websites and applications
| Website | Description |
|---|---|
Just-add-water CSS animations | |
Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations | |
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects | |
Animations has been one of the most impressive animation libraries available | |
Round, flat, designer-friendly pseudo-3D engine for canvas & SVG | |
CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page | |
Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website | |
AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure | |
CSS Animations On Demand | |
Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need | |
Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications | |
These animations, like rotations and pulses, that are specifically designed to run and repeat forever | |
Animations for the strong of heart, and weak of mind | |
A Sass library for creating flexible CSS transitions and animations | |
A graphical user interface for generating custom CSS keyframe animations | |
CSS Transitions and Transformations for Beginners | |
A useful tool to animate stroke and fill properties in SVG images with plain CSS code | |
AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS | |
CSS loading animations with minimal effort! | |
Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger. |
Last updated