# CSS Resources ### CSS Frameworks > CSS/UI frameworks to help build great looking websites and applications | Website | Description | | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Tailwind CSS](https://tailwindcss.com/) | Low level, utility-first framework | | [Bootstrap](https://getbootstrap.com/) | Popular UI framework with tons of components that use both CSS and JS | | [Materialize](https://materializecss.com/) | A modern responsive front-end framework based on Material Design | | [Material Design Lite](https://getmdl.io/) | Light framework based on Material Design. No JS dependency | | [Bulma](https://bulma.io/) | Modern CSS framework with no JS | | [Skeleton](http://getskeleton.com/) | Extremely light framework for basic UI elements | | [Uniform CSS](https://uniformcss.com/) | Fully configurable utility generator and CSS framework built entirely in Sass | | [Semantic UI](https://semantic-ui.com/) | Empowers designers and developers by creating a shared vocabulary for UI | | [Fomantic UI](https://fomantic-ui.com/) | A community fork of Semantic-UI | | [Foundation](https://get.foundation/) | Mobile first framework with clean markup | | [Pure CSS](https://purecss.io/) | A set of small, responsive CSS modules | | [UIKit](https://getuikit.com/) | Lightweight and modular front-end framework | | [Susy](https://www.oddbird.net/susy/) | Lightweight, grid-layout engine for Sass | | [Milligram.io](https://milligram.io/) | Minimalist CSS framework | | [Vanilla Framework](https://vanillaframework.io/) | Simple, extensible CSS framework written in Sass | | [Spectre CSS](https://picturepan2.github.io/spectre/) | Lightweight, modern CSS framework | | [Picnic CSS](https://picnicss.com/) | Lightweight and beautiful library | | [Wing](https://kbrsh.github.io/wing/) | A beautiful CSS framework designed for minimalists | | [Chota](https://jenil.github.io/chota/) | A micro (\~3kb) CSS framework | | [Blueprint CSS](https://blueprintcss.dev/) | A lightweight layout library for building great responsive mobile first UIs that work everywhere | | [W3.CSS](https://www.w3schools.com/w3css/) | 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 | | [98.css](https://jdan.github.io/98.css/) | A design system for building faithful recreations of old UIs | | [NES CSS](https://nostalgic-css.github.io/NES.css/) | NES-style CSS Framework | | [Shoelace.css](https://www.shoelace.style/) | Lightweight, forward-thinking CSS library built with future CSS syntax | | [MVP.css](https://andybrewer.github.io/mvp/) | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done | | [Blaze.css](http://blazecss.com/) | Open source modular CSS toolkit providing great structure for building websites quickly | | [Turret CSS](https://turretcss.com/) | Turret CSS is a styles framework for development of responsive websites. | | [Cutestrap](https://www.cutestrap.com/) | A strong, independent CSS Framework. | | [Shorthand](https://shorthandcss.com/) | Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css | | [XP.css](https://botoxparty.github.io/XP.css/) | XP.css is an extension of 98.css. A CSS library for building interfaces that look like old UIs. | | [Framework7](https://framework7.io/) | Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. | | [Hint.css](https://kushagra.dev/lab/hint/) | A pure CSS tooltip library for your lovely websites. | | [imagehover.io](http://imagehover.io/) | Pure CSS Image Hover Effect Library | | [mini.css](https://minicss.org/) | A minimal, responsive, style-agnostic CSS framework | | [Tachyons](https://tachyons.io/) | Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. | | [Material Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/) | Material Design with Bootstrap | | [Ivory](https://github.com/IVORY-UI/ivory) | A modern CSS framework for developing powerful web interfaces faster and easier | | [Halfmoon UI](https://www.gethalfmoon.com/) | A responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages. | | [Metro 4](https://metroui.org.ua/index.html) | Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript. | | [css-doodle](https://css-doodle.com/) | A web component for drawing patterns with CSS | | [latex.css](https://latex.now.sh/) | Make your website look like a LaTeX document | | [Paper CSS](https://github.com/cognitom/paper-css) | Front-end printing solution | | [Windi CSS](https://windicss.org/) | Next generation compiler for Tailwind CSS | | [Cirrus CSS](https://cirrus-ui.netlify.app/) | A component and utility centric SCSS framework designed for rapid prototyping. | | [Gutenberg](https://github.com/BafS/Gutenberg) | Modern framework to print the web correctly.  | | [lit](https://github.com/ajusa/lit) | World's smallest responsive fire css framework (395 bytes).  | | [Arwes](https://github.com/arwes/arwes) | Arwes is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects.  | | [Bojler](https://bojler.slicejack.com/) | Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.  | | [Tacit](https://github.com/yegor256/tacit) | Primitive CSS Framework for dummies, without classes.  | | [Terminal CSS](https://terminalcss.xyz/) | A modern and minimal CSS framework for terminal lovers.  | | [Sakura](https://oxal.org/projects/sakura/) | A minimal classless css framework / theme.  | | [PSone](https://github.com/micah5/PSone.css) | PS1 style CSS Framework, inspired by NES.css.  | | [Marx](https://github.com/mblode/marx) | Marx is the classless CSS reset to be used in any projects (namely small ones).  | | [Tufte](https://github.com/edwardtufte/tufte-css) | Style your webpage like Edward Tufte’s handouts.  | | [Axentix](https://useaxentix.com/) | Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. | | [Raster Simple Grid System](https://rsms.me/raster/) | 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](http://oocss.org/) | OOCSS concepts help us write components that are flexible, modular and interchangeable. | | [Atomic CSS](https://acss.io/) | Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. | | [BEM](http://getbem.com/) | Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. | | [SMACSS](http://smacss.com/) | 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 | | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [Animate.css](https://animate.style/) | Just-add-water CSS animations | | [Bounce.js](http://bouncejs.com/) | Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations | | [Anime.js](https://animejs.com/) | 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 | | [Magic Animations](https://www.minimamente.com/project/magic/) | Animations has been one of the most impressive animation libraries available | | [Zdog](https://zzz.dog/) | Round, flat, designer-friendly pseudo-3D engine for canvas & SVG | | [CSShake](http://elrumordelaluz.github.io/csshake/) | CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page | | [Hover.css](http://ianlunn.github.io/Hover/) | Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website | | [AniJS](http://anijs.github.io/) | AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure | | [Animista](http://animista.net/) | CSS Animations On Demand | | [Tachyons-animate](https://github.com/anater/tachyons-animate) | 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](https://www.sequencejs.com/) | Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications | | [Infinite](https://tilomitra.github.io/infinite/) | These animations, like rotations and pulses, that are specifically designed to run and repeat forever | | [OBNOXIOUS.CSS](http://tholman.com/obnoxious/) | Animations for the strong of heart, and weak of mind | | [MOTION UI](https://zurb.com/playground/motion-ui) | A Sass library for creating flexible CSS transitions and animations | | [Keyframes.app](https://keyframes.app/) | A graphical user interface for generating custom CSS keyframe animations | | [thoughtbot](https://thoughtbot.com/blog/transitions-and-transforms) | CSS Transitions and Transformations for Beginners | | [SVG Artista](https://svgartista.net/) | A useful tool to animate stroke and fill properties in SVG images with plain CSS code | | [AnimXYZ](https://animxyz.com/) | AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS | | [Whirl](https://github.com/jh3y/whirl) | CSS loading animations with minimal effort! | | [Hamburgers](https://jonsuh.com/hamburgers/) | 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. |