Skip to content

Instantly share code, notes, and snippets.

@MWins
Created January 24, 2017 06:10
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save MWins/250000f187bdbdd7e2757d50be8507d5 to your computer and use it in GitHub Desktop.
Save MWins/250000f187bdbdd7e2757d50be8507d5 to your computer and use it in GitHub Desktop.
Front End Frameworks - Active

Front-end Frameworks v2.6

1:07 AM 1/24/2017

A collection of active front-end frameworks for web development.

You can Compare all front-end frameworks here: http://usablica.github.com/front-end-frameworks/compare.html All credit goes to usablica for the original list. I have removed frameworks which have gone inactive. In some cases the framework still is available but has not received updates in years.

IceCream

Simple and light responsive grid system

Responsive: Yes

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

52framework

With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al 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/

Concise

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

Responsive: Yes

Website: http://concisecss.com/

Bootstrap

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

Responsive: Yes

Website: http://getbootstrap.com/

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/

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/

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/

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/

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/

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/

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/index.html

Github: https://github.com/tmwagency/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/

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

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/

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. 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 empowers designers and developers by creating a language for sharing UI.

Pure is ridiculously tiny. The entire set of modules clocks in at 4.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

Responsive: Yes

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

Github: https://github.com/jlukic/Semantic-UI

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

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/

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/

Unsemantic

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. 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/

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/

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/

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/

inuit.css

A powerful, scalable, Sass-based, BEM, 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/inuitcss/inuitcss

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

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

@codeleson
Copy link

CodeLeson

Online Web Tutorials

CodeLeson is a Programming and Web Development blog. Here you will see different Web technologies tutorials free. And you can see live demos of tutorials and download the source code. You can learn from video tutorials.

Responsive: Yes

Website: http://www.codeleson.com

Github: https://github.com/codeleson

@SteaceP
Copy link

SteaceP commented Mar 5, 2020

Semantic UI is no longer developed (for the moment) Fomantic UI is a fork of Semantic UI that continue development until they fork back to Semantic UI.
Yeah, that's a lot of Semantic :P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment