Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/usablica/front-end-frameworks

A collection of best front-end frameworks for faster and easier web development.
https://github.com/usablica/front-end-frameworks

css-framework css-grid responsive-css responsive-grid

Last synced: 26 days ago
JSON representation

A collection of best front-end frameworks for faster and easier web development.

Awesome Lists containing this project

README 

        
Front-end Frameworks v2.6

====================



A collection of best front-end frameworks for faster and easier web development.



You can **Compare** all front-end frameworks here: http://usablica.github.com/front-end-frameworks/compare.html



## 52framework



With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually all browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5.



**Responsive:** No



**Website:** http://52framework.com/



## 960 Grid System



> Simple grid system



The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.



**Responsive:** Yes



**Website:** http://960.gs/



## 99lime HTML KickStart



> Ultra–Lean HTML Building Blocks for Rapid Website Production.



HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project.



**Responsive:** Yes



**Website:** http://www.99lime.com/



## AgnosticUI



[AgnosticUI](https://www.agnosticui.com/) - 



> One stylesheet…all the frameworks! UI components that work in React, Vue 3, and Svelte!



Accessible CSS component primitives that work with React, Vue 3, Svelte, and Angular



**Responsive:** Yes



**Website:** https://www.agnosticui.com/



## Baseline



> Baseline is a framework built around the idea of a “real” baseline grid.



Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.



**Responsive:** No



**Website:** http://www.baselinecss.com/



## Biomatic UI



> A Flexible Atomic-Focused CSS Framework



**Responsive:** Yes



**Website:** https://biomatic-ui.com



## Blueprint



Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.



**Responsive:** No



**Website:** http://www.blueprintcss.org/



## BlueTrip



A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.



**Responsive:** No



**Website:** http://bluetrip.org/



## Bijou



> A beautiful CSS framework under 2kb



A small, yet beautiful CSS framework that weighs in under 2kb.



**Responsive:** Yes



**Website:** http://andhart.github.io/bijou



**Github:** https://github.com/andhart/bijou



## Boilerplate



> noun standardized pieces of text for use as clauses in contracts or as part of a computer program.



As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.



**Responsive:** No



**Website:** http://code.google.com/p/css-boilerplate/



## bootmetro



> metro style web framework



simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8.



**Responsive:** Yes



**Website:** http://aozora.github.io/bootmetro/



**Github:** https://github.com/aozora/bootmetro



## Bootstrap



> Sleek, intuitive, and powerful front-end framework for faster and easier web development.



**Responsive:** Yes



**Website:** http://getbootstrap.com



## Bulma



> Bulma is a free and open source CSS framework based on Flexbox.



**Responsive:** Yes



**Website:** https://bulma.io/



## Cascade Framework



> Powerful OOCSS front-end framework optimised for performance and flexibility.



**Responsive:** Yes



**Website:** http://cascade-framework.com/



## Cascade Framework Light



> An even more lightweight version of Cascade Framework, containing just the bare essentials.



**Responsive:** Yes



**Website:** https://github.com/jslegers/cascadeframeworklight/



## Chota



> A really small CSS framework



**Responsive:** Yes



**Website:** https://jenil.github.io/chota



**Github:** https://github.com/jenil/chota



## Cirrus



> A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Integrate it with any existing design or use it to kick start your next project.



**Responsive:** Yes



**Website:** https://spiderpig86.github.io/Cirrus/



**Github:** https://github.com/Spiderpig86/Cirrus



## Concise



> Lightweight, highly customizable, scalable, Sass-based, OOCSS framework. LESS and Stylus ports also available.



**Responsive:** Yes



**Website:** http://concisecss.com/



## Crumpet



> A Deliciously Simple SASS/SCSS Responsive Framework



Everything is straight forward, all of the code is commented and gives you instructions on how to use Crumpet, so you can spend all your time in the code editor.



**Responsive:** Yes



**Website:** https://github.com/AdamMarsBar/Crumpet



## Easy Framework



> Your new starting point for every front-end projects!



Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.



**Responsive:** No



**Website:** http://easyframework.com/



## Emastic



Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.



**Responsive:** No



**Website:** http://code.google.com/p/emastic/



## FEM CSS Framework



FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.



**Responsive:** No



**Website:** http://www.frontendmatters.com/projects/fem-css-framework/



## Flat UI



> PSD&HTML User Interface Kit



Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.



**Responsive:** Yes



**Website:** http://designmodo.com/flat-free



## Fluid



The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.



**Responsive:** No



**Website:** http://www.designinfluences.com/fluid960gs/



## Foundation



> The most advanced responsive front-end framework in the world.



Foundation is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.



**Responsive:** Yes



**Website:** http://foundation.zurb.com/



## G5 Framework



> (X)HTML5, CSS3, PHP & jQuery Front End Framework.



G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.



**Responsive:** No



**Website:** http://framework.gregbabula.info/



## Gumby



Gumby is a responsive 960 grid CSS framework. The grid lets you lay out pages quickly and easily in a natural, logical way. The framework is packaged with tons of styles and common interface elements to help you quickly put together functional prototypes.



**Responsive:** Yes



**Website:** http://gumbyframework.com



## Helium



Helium is a framework for rapid prototyping and production-ready development. In many ways it's similar to both Twitter Bootstrap and ZURB Foundation - in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with.



**Responsive:** Yes



**Website:** https://github.com/cbrauckmuller/helium



## IceCream



> Simple and light responsive grid system



**Responsive:** Yes



**Website:** http://html5-ninja.com/icecream



## Ingrid



> A fluid CSS layout system.



Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. In general, it is fluid, lightweight and extendable.



**Responsive:** Yes



**Website:** http://piira.se/projects/ingrid/



## Ink



> Ink is a set of tools for quick development of web interfaces.



It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what's important.



**Responsive:** Yes



**Website:** http://ink.sapo.pt/



**Github:** http://github.com/sapo/ink/



## inuit.css



> A powerful, scalable, Sass-based, [BEM](http://bem.info/), OOCSS framework.



inuit.css is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.



**Responsive:** Yes



**Website:** http://inuitcss.com/



**Github:** https://github.com/csswizardry/inuit.css/



## IVORY Framework



> Simple, Flexible, Powerful



Responsive front-end web framework. Makes your front-end development faster and easier. Takes you all theway from 1200PX on down to 320PX.



**Responsive:** Yes



**Github:** [IVORY UI](https://github.com/IVORY-UI/ivory)



## Jeet



> A CSS Grid System for Humans



Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.



**Responsive:** Yes



**Website:** http://jeet.gs/



## Kaliber



> A tiny but powerful CSS framework based on Flexbox.



**Responsive:** Yes



**Website:** https://robbinfellow.github.io/kaliber/



## Kickoff



> A lightweight front-end framework for creating scalable, responsive sites



Kickoff is an actively maintained front-end framework, created by Zander Martineau and Ashley Nolan.



The framework is not meant to be too prescriptive - we don't want to force developers into a certain coding style - and so can be used as a starting point for any type of project.



**Responsive:** Yes



**Website:** http://trykickoff.com



**Github:** https://github.com/trykickoff/kickoff



## Kube



> CSS-framework for professional developers.



Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.



**Responsive:** Yes



**Website:** http://imperavi.com/kube/



## Layers



> Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid.



Layers CSS is aimed for practical use and comes with zero bullshit.



**Responsive:** Yes



**Website:** http://eiskis.net/layers/



**Bitbucket:** https://bitbucket.org/Eiskis/layers-css/src/tip/source/layers/



## Lovely CSS Framework



> The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site.



Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons.



**Responsive:** No



**Website:** http://code.google.com/p/lovely-css/



## Malo



> Malo is ultra small css library for building web sites.



Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.



**Responsive:** No



**Website:** http://code.google.com/p/malo/



## Material Design Lite



> An implementation of Material Design components in vanilla CSS, JS, and HTML



Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.



**Responsive:** Yes



**Website:** http://www.getmdl.io



**Github:** https://github.com/google/material-design-lite



## Materialize CSS



> Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology.

  Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.



**Responsive:** Yes



**Website:** http://materializecss.com



**Github:** https://github.com/Dogfalo/materialize



## Milligram



> Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.



**Responsive:** Yes



**Website:** http://milligram.github.io



## mini.css



> A minimal, responsive, style-agnostic CSS framework!



mini.css tries to provide as much functionality as possible in under 7KB gzipped, while mainting a mobile-friendly approach and allowing you to customize it any way you want.



**Responsive:** Yes



**Website:** https://chalarangelo.github.io/mini.css/



## minigrid



> Minimal 2kb zero dependency cascading grid layout



**Responsive:** Yes



**Github:** https://github.com/henriquea/minigrid



## Picnic CSS



> Lightweight and beautiful library



A beautiful CSS library to kickstart your projects.



**Responsive:** Yes



**Website:** https://picnicss.com



**Github:** https://github.com/franciscop/picnic



## Polymer



> A library for creating Web Components based on Material Design



Polymer is a library for creating Web Components, which are a set of W3C standards and upcoming browser APIs for defining your own custom HTML elements. With the help of polyfills and sugar, it can create these custom elements and bring Web Component support to browsers that don’t play nice with the standard just yet.



**Responsive:** Yes



**Website:** https://www.polymer-project.org



**Github:** https://github.com/Polymer/polymer



## PureCSS



> A set of small, responsive CSS modules that you can use in every web project, built by the YUI team at Yahoo!.



PureCSS is a collection of responsive 'drop-ins' built with - you guessed it! - pure CSS! The PureCSS website also has a skin builder on their website, so you're restricted by default colors no more.



**Responsive:** Yes



**Website:** http://purecss.io/



## ResponsiveBP



> Responsive A powerful, accessible, developer friendly framework for building responsive websites



**Responsive:** Yes



**Website:** http://responsivebp.com/



**Github:** https://github.com/responsivebp/responsive/



## Responsive Grid System



> Spectacularly Easy Responsive Design



It's a quick, easy & flexible way to create a responsive web site.



**Responsive:** Yes



**Website:** http://www.responsivegridsystem.com/



## Responsive GS



> Simple CSS framework for fast, intuitive development of responsive websites.



Built using the 'Mobile First' approach, 'clearfix' for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed.



**Responsive:** Yes



**Website:** http://responsive.gs/



## Ribs



> The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.



Ribs is a modernised, maintained and feature rich fork of the original Skeleton framework.



**Responsive:** Yes



**Website:** https://github.com/nickpack/Ribs



## RÖCSSTI



RÖCSSTI is a CSS micro-framework which includes accessibility notions, typo settings, IE fixes, reusable classes, ect. It is the little brother of [KNACSS](http://www.knacss.com/). It also has LESS and Sass versions.



**Responsive:** Yes



**Website:** http://rocssti.nicolas-hoffmann.net/ & https://github.com/nico3333fr/ROCSSTI



## Semantic UI



> UI is the vocabulary of the web.



Semantic is a UI component framework based around useful principles from natural language.



Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.



**Responsive:** Yes



**Website:** http://semantic-ui.com/



**Github:**  https://github.com/Semantic-Org/Semantic-UI



## Sierra



 > The smallest and lightest scss library



 Sierra is a micro SCSS library to help you build websites in a matter of seconds, without all the arbitrary selectors.



 **Responsive:** Yes



 **Website:** http://sierra-library.github.io/



## Skeleton



> A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.



Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.



**Responsive:** Yes



**Website:** http://www.getskeleton.com/



## Spectre.css



> Lightweight, Responsive and Modern



A lightweight, responsive and modern CSS framework for faster and extensible development.



**Responsive** Yes



**Website** http://picturepan2.github.io/spectre/?utm_source=next.36kr.com



**Github:** https://github.com/picturepan2/spectre.git



## StackLayout



> A flexible width, component based CSS layout system



StackLayout makes it incredibly easy to use semantic class names for particular areas of your site, such as the main navigation or a thumbnail gallery, or for the entire site as part of your deployment process.



**Responsive:** Yes



**Github:** https://github.com/camslice/StackLayout



## Susy



> Your markup. Your design. Our math.



The web is a responsive place, from your lithe & lively development process to your end-user's super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.



**Responsive:** Yes



**Website:** http://susy.oddbird.net/



**Github:** https://github.com/ericam/susy/



## Taiga Boilerplate



 > Taiga, a head start for UI engineers



Taiga Boilerplate is a small HTML/SASS framework for starting a new web project. It is mobile-first with a semantic SASS grid and based on the principles of SMACSS and BEM.



**Responsive:** Yes



**Website:** http://taigaboilerplate.com



**Github:** https://github.com/studiowolf/taiga-boilerplate



## Tailwind CSS



 > A Utility-First CSS Framework for Rapid UI Development



**Responsive:** Yes



**Website:** https://tailwindcss.com



**Github:** https://github.com/tailwindcss/tailwindcss



## TentCSS



 > A CSS survival kit. 



**Responsive:** Yes



**Website:** https://css.sitetent.com



**Github:** https://github.com/sitetent/tentcss



## The Golden Grid



The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.



**Responsive:** No



**Website:** http://code.google.com/p/the-golden-grid/



## UIkit



A lightweight and modular front-end framework for developing fast and powerful web interfaces.



**Responsive:** Yes



**Website:** http://www.getuikit.com



**Github:** https://github.com/uikit



## Unsemantic



Unsemantic is a fluid grid system that is the successor to the [960 Grid System](http://960.gs/). It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.



**Responsive:** Yes



**Website:** http://unsemantic.com/



## Vanilla Framework



> Vanilla is a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.



**Responsive:** Yes



**Website:** https://vanillaframework.io



**Github:** https://github.com/vanilla-framework/vanilla-framework



## Wing



> A beautiful CSS framework designed for minimalists.



Everything you need to create a basic project is included, all in a 2kb file (minified + gzipped). On top of that, almost everything is styled automatically, without the need for learning specific classes. This allows for an intuitive experience developing with Wing, as it's designed to be a boilerplate stylesheet for any project.



**Responsive:** Yes



**Website:** https://kbrsh.github.io/wing



## Workless



> A clean & classy HTML5, CSS3 framework



Standardizes CSS, improves usability and interaction, sets base typography to help vertical rhythm and readability and adds helper classes to style elements easily.



**Responsive:** Yes



**Website:** http://workless.ikreativ.com/



## xCSS



> Object-Oriented CSS Framework



xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.



**Responsive:** No



**Website:** http://xcss.antpaw.org/



## YACSS



> A fully responsive utility and component based CSS framework.



With Yet another CSS framework you can simply use our beautiful predefined styles or you can design your own with the utility class approach. 



**Responsive:** Yes



**Website:** https://github.com/FlorianWoelki/YACSS/



**Github:** https://github.com/FlorianWoelki/YACSS/



## YAML



> “Yet Another Multicolumn Layout” (YAML)



YAML is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.



**Responsive:** Yes



**Website:** http://www.yaml.de/



## YUI CSS



> Simple CSS for the web



The foundational YUI CSS is an extremely lightweight layer of responsive CSS for your projects. It offers a customizable responsive grid , along with styling for forms, tables, menus, popovers, notifications, images and more. Plays nice with YUI's JavaScript Framework.



**Responsive:** Yes



**Website:** http://yuilibrary.com/



## Flexbox Grid



> Lightweight, Responsive and Modern



A grid system based on the flex display property.



**Responsive:** Yes



**Website:** http://flexboxgrid.com/



**Github:** https://github.com/kristoferjoseph/flexboxgrid



## Base CSS framework



> A Rock Solid, Responsive CSS Framework



Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.



**Responsive:** Yes



**Website:** http://getbase.org/



**Github:** https://github.com/getbase/base



## Basscss



> Low-Level CSS Toolkit



Low-Level CSS Toolkit. Lightning Fast Modular CSS with No Side Effects



**Responsive:** Yes



**Website:** https://basscss.com/



**Github:** https://github.com/basscss/basscss