Frameworks, guides and several tools to help you improve your writing CSS.

Table content

Frameworks🎨

CSS framework gives web developers a basic structure, which includes grid, interactive UI patterns, web typography, tooltips, buttons, form elements, icons. This structure helps web developers to start quickly and efficiently when they are designing a website or web applications.

  • awsm.css - Simple CSS library for semantic HTML markup.
  • Bonsai - A complete Utility First CSS Framework for less than 50kb.
  • Bootstrap - The most popular HTML, CSS, and JS framework.
  • Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
  • Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
  • Charts.css - CSS data visualization framework.
  • Chota - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.
  • Cirrus - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
  • eFrolic - CSS framework which without using JavaScript is interactive and animated.
  • Foundation - advanced responsive front-end framework.
  • Gralig - A modest, grayish CSS library.
  • Halfmoon - A responsive front-end framework with a built-in dark mode.
  • Hasser CSS - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
  • inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
  • material-components-web - Modular and customizable Material Design UI components for the web.
  • Materialize - A modern responsive front-end framework based on Material Design.
  • Milligram - A minimalist CSS framework.
  • Numl - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.
  • Pure.css - A set of small, responsive CSS modules that you can use in every web project.
  • Semantic UI - Powerful framework that uses human-friendly HTML.
  • Shorthand Framework - Feature rich CSS framework for the new decade.
  • Spectre.css - A lightweight, responsive and modern CSS framework.
  • Strawberry - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.
  • Tachyons - Functional CSS for humans.
  • Tacit - CSS framework for dummies with zero skills in graphic design.
  • tailwindcss - A utility-first CSS framework for rapid UI development.
  • UIkit - A lightweight and modular front-end framework.
  • unsemantic - Fluid grid for mobile, tablet, and desktop.
  • Wing - A Minimal, Lightweight, Responsive framework.

⇧ back to top

Tools🔧

  • Codepen - The best place to build, test, and discover front-end code.
  • Pleese Play - All the annoying CSS stuff we don’t want to do in 1 tool.
  • CCSmatic - The ultimate CSS tools for web designers.

⇧ back to top

Preprocessors⚙️

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

  • LESS - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
  • PostCSS - Transforming CSS with JS plugins.
  • Sass - Mature, stable, and powerful professional-grade CSS extension language.
  • STYLIS - Light-weight CSS preprocessor.
  • Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.

⇧ back to top

Reset and Normalize

  • Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
  • Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
  • MiniReset.css - A tiny modern CSS reset.
  • sanitize.css - A set of CSS rules that style with today’s best practices out-of-the-box.
  • unstyle.css - Specialised stylesheet for removing user agent styles, style the web with your baseline.
  • reset.css - CSS Tools: Reset CSS.

⇧ back to top

Design Inspiration

  • Behance - is a social media platform owned by Adobe “to showcase and discover creative work”
  • Dribbble - is a self-promotion and social networking platform for digital designers and creatives.
  • Land-book - design gallery with the best and most carefully collected websites. We help creatives find inspiration & motivation to do rad stuff.
  • awwwards - are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.

⇧ back to top

Illustrations

  • Pexels - The best free stock photos & videos shared by talented creators.
  • unDraw - Open-source illustrations for any idea you can imagine and create.
  • DrawKit - Hand-drawn vector illustration and icon resources, perfect for your next project.
  • freepik - Graphic resources for everyone.
  • pixabay - Stunning free images & royalty free stock.
  • icons8 - Free vector illustrations to class up your project.

⇧ back to top

Placeholder

  • Placedog - Hand-picked, stunning photographs of our favourite pets: dogs! Free to use with your websites/projects.
  • Placekitten - A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.
  • Placeholder - is a free image placeholder service for web designers, serving billions and billions of images each year.
  • Picsum - The Lorem Ipsum for photos.

Games🕹️

  • Grid Garden - A game where you write CSS code to grow your carrot garden. 🥕
  • Flexbox Froggy - A game where you help Froggy and friends by writing CSS code. 🐸
  • Flexbox Defense - Tower Defense with a twist: all towers must be positioned with CSS Flexbox.
  • CSS Dinner - It’s a fun game to learn and practice CSS selectors.

⇧ back to top

Icons

  • Font Awesome - Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.
  • Ikonate - Ikonate are fully customisable & accessible*, well-optimised vector icons.
  • LineIcons - Handcrafted Line Icons for Modern User Interfaces of Web, Android, iOS, and Desktop App Projects.
  • TheNounProject - Icons and Photos For Everything.
  • MaterialDesignIcons - Beautifully crafted symbols for common actions and items.
  • FlatIcon - The best UI icons for your projects.
  • IconFinder - is the world’s largest marketplace for vector and raster icons in SVG and PNG formats.
  • FeatherIcons - is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
  • Favicon Generator - Favicons are also known as favorite icons, URL icons, or website icon. They are very small icons (usually 16×16 or 32×32) and appear next to your website URL in browser tabs and bookmarks, making it easy for your visitors to identify your website in their open tabs.
  • StreamLineIcons - The world’s largest icon pack.
  • LinearIcons - is the highest quality set of line icons, matching with minimalist UI designs in iOS.
  • Unicons - Web’s new favorite icon library.
  • NucleoApp - Nucleo is a beautiful library of 30635 icons, and a powerful application to collect, customize and export all your icons.
  • CoreUI Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats.
  • Line-Awesome - Swap Font Awesome for modern line icons in one line of code.

⇧ back to top