Amazium

Responsive CSS Framework Lists for Web Developers

CSS Framework And Responsive Lists นี้น่าจะเป็นประโยชน์สำหรับการทำความรู้จักกับเครื่องมือสำหรับออกแบบหน้าเว็บไซต์ให้สวยงาม ง่ายดาย รวดเร็ว แถมยังมีความ responsive อีก บางอันอาจจะไม่ Full เท่ากับของ Bootstrap หรือ Foundation เค้า แต่ว่าแต่ละตัวที่นำมา list ไว้ก็มักจะมีความแตกต่างหรือเป็นเอกลักษณ์ของตัวเองไม่น้อยครับ

CSS Framework And Responsive Lists

บทความนี้อาจจะเห็นการ update กันอยู่บ่อยๆนะครับเป็นเพราะว่า หากผมเห็นตัวไหนน่าสนใจ มาใหม่แล้วยังไม่มีรายชื่ออยู่ในนี้ก็อาจจะหยิบมา update กันต่อเนื่องนะครับจะได้เป็น list ที่ใหม่อยู่เสมอ จะไม่ได้เรียงตามความนิยม หรือความสดใหม่แต่อย่างใดนะครับ แต่จะเป็นการเรียงตามตัวอักษรทั่วๆไปเลย

34grid

34Grid

34Grid

34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)

If you’re already familiar with grid systems and responsive web design just create&download a bundle and see what is inside. Else you may start with resizing your browser window.

52Framework

52

52

HTML5 CSS3 Framework

960 Grid System

960GridSystem

960GridSystem

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.

AgileCSS

AgileCSS

AgileCSS

Agile CSS is a modern web framework specifically designed for building extensible and flexible Web UI for applications

Amazium

Amazium

Amazium

The clean & simple responsive framework..!

BASE

BASE

BASE

A Rock Solid, Responsive HTML/CSS Framework
Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.

Blackbaud Sky UX

Blackbaud

Blackbaud

Create a Seamless User Interface
A user experience framework for building web applications that leverage Blackbaud’s Sky UX patterns. SKY UX provides an HTML, CSS, and JavaScript framework to implement Blackbaud’s design patterns, along with the guidance to handle visual design and interaction patterns

Bootstrap

bootstrap

bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Bulma

bulma

bulma

Bulma Modern CSS Framework based on Flexbox responsive, mobile first and have everything for create website

Blue Print

Blueprint

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.

Cascade

Cassade

Cassade

Although the overall look and feel are most definitely inspired by Twitter Bootstrap, Cascade framework is not just another Bootstrap clone. Where Twitter Bootstrap puts its focus on delivering shiny user elements that can be dropped into any project and takes control of your project’s overall look-and-feel, Cascade Framework is intended to do the opposite. By splitting your CSS into separate files based on features rather than selectors as well as by implementing atomic design, Cascade Framework puts you in control!

Cardinal

cardinal css

cardinal css

Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.

The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which are often UI toolkits, not frameworks), leaving the design and creativity up to you.

Concise

Concise

Concise

Concise CSS is a framework written in SASS carefully crafted by Keenan Payne and James Kolce, it provides all the basics without the bloat

Compass

compass

compass

Compass is an open-source CSS Authoring Framework. Experience cleaner markup without presentational classes.

Elastic

elasticcss

elasticcss

A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily

Essence

Essence

Essence

Essence is a CSS framework that implements the guidelines from Google Material Design Specification using Facebook’s react.js library. Use it to easily build super-fast and great looking web & mobile interfaces.

Furatto

Furatto

Furatto

Furatto is a lightweight & friendly front-end framework got get the job done, created and maintained by Abraham Kuri from Icalia Labs.

Foundation

Foundation

Foundation

Responsive design gets a whole lot faster
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!

G5

G5

G5

Web boilerplate stack (HTML5, CSS3, jQuery, and PHP). G5Framework provides some rock-solid code and functionality for you to start with, however it leaves all the remaining development and styling up to the developer.

GIRDER

Girder

Girder

A minimalistic grid targeted at modern web apps with a lean and nimble UI. It uses Sass silent classes (placeholders) to structure content in HTML and keeps your Markup free of excess presentational classes like “unit_1of4”, “small-2”, “grid4”.

Gridism.

gridism

gridism

Simple, Responsive, Easy

Each .grid element is a horizontal row which can contain .unit elements of various widths. Width combinations are illustrated below.
Units get stacked on screens 568px or smaller. Grids in a .wrap have maximum widths of 978px, or 1140px with the addition of .wider.
All units have even inner and outer gutters. You can turn gutters off with .no-gutters. There are also a few other commonly needed classes.

Icecream

IceCream

IceCream

Simple and light responsive grid system Sometimes you just need a grid system, everything else is excess, with the iceCream syntax this can be done easily and faster.

INK

INK

INK

An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping.

Ivory Framework

IVORY Framework

IVORY Framework

Simple, Flexible, Powerful responsive front-end web framework makes your front end development   faster and easier. takes you all the way from 1200px on down to 320px.

Kathamo

Kathamo

Kathamo

Kathamo is a Minimalist CSS Framework for Rapid & Mobile-Friendly Development. Kathamo has a few easy ways to quickly get started, each one appealing to a different skill level and use case.

KUBE

Kube

Kube

Kube CSS Framework Innovative and extremely flexible grid offers clear and simple rules, visual balance and solid structure for any web page, desktop or mobile.

LAYERS CSS

Layers CSS

Layers CSS

Layers CSS is a CSS framework aimed for practical use cases. It comes with a small footprint and zero bullshit

Leaf

leaf

leaf

A CSS framework based on Google’s material design The idea is pretty simple. Just copy everything as good as possible from Google’s material design and make CSS/JS out of it. The goal is to move everything from there to the web, easy to use and maintain.

Less-framework

less

less

CSS grid system for designing adaptive websites

LumX

lumx

lumx

The first responsive front-end framework based on AngularJS & Google Material Design specifications.

Materialize

materialize

materialize

A modern responsive front-end framework based on Material Design Speeds up development and User Experience Focused

Miligram

Milligram

Milligram

A minimalist CSS framework

MUELLER

mueller

mueller

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Mui

MUI

MUI

MUI is a lightweight CSS framework that follows Google’s Material Design guidelines MUI is heavily influenced by Bootstrap, Polymer, and Ink as well as some of the popular Material Design frameworks (Materialize, Material-Bootstrap, Material UI). To encourage developers to hack on MUI, the source code for MUI is open-source under an MIT license.

Picnicss

Picnic CSS

Picnic CSS

Lightweight css for native html elements Made for the hackers and 5kb

PocketGrid

PocketGrid

PocketGrid

Flexible, Unlimited number of breakpoints, Compatible with Media Queries and mobile device detection, Very light: < 1 kb!, No need for jQuery or LESS/SASS

Profound Grid

Profound Grid

Profound Grid

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.

Pure

Pure

Pure

A set of small, responsive CSS modules that you can use in every web project.

Grid System

Responsive Grid System

Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Gridiculous

Gridiculous

Gridiculous

Gridiculous was created after I tried out a bunch of different responsive grids and realized that none of them offered all of the features I required. First and foremost, I wanted to make sure that the grid would work from a large desktop monitor through to a tablet and all the way down to a mobile phone. That’s why Gridiculous starts off at 1200px and works itself down to 320px. I also wanted the ability to not be locked into always having to start with 1200px, so I created some stops along the way. You can set your site to max out at 960px, 640px, 320px or even stretch it out to full width. You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size. Check out Gridiculous to see how easily you can create a fully responsive grid layout for your next website.

ResponsiveCat

ResponsiveCat

ResponsiveCat

CSS Micro framework.

SCHEMA UI

SCHEMA UI

SCHEMA UI

A modular, front end framework to easily and quickly help you jump start your process in building complex interfaces for the web right out the box.

Sculpt

Sculpt

Sculpt

Sculpt has been written to cater for devices with small screen sizes first, with more complexity being added through media queries as screen real-estate increases. You don’t have to be one of our customers, and don’t need to provide us with attribution for you to use it. This is the same framework we use on our own website, and we are giving it to you for free.

Semantic UI

Semantic

Semantic

User Interface is the language of the web

Simple Grid

Simple Grid

Simple Grid

Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Siimple

siimple

siimple

Siimple is a minimal and responsive CSS framework for flat and clean designs, created initially for my projects. I don’t want to compete with Bootstrap, because it is insuperable.

Skeleton

Skeleton

Skeleton

You should use Skeleton if you’re embarking on a smaller project or just don’t feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).

Space Base

spaceBase

spaceBase

SPACEBASE IS A SASS-BASED RESPONSIVE CSS FRAMEWORK.
Many CSS frameworks are meant to be included and left alone. But spaceBase is a boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project. Consider it the launch pad for your adventures into cyberspace.

Spectre

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

Spectre

Spectre

Susy

Susy

Susy

YOUR MARKUP, YOUR DESIGN, YOUR OPINIONS | OUR MATH.
In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?

Typeplate

Typeplate

Typeplate

Frameworks make decisions for you about how to organize, structure and design a site. Pattern libraries don’t separate styling and markup, making them tough to use in a truly modular fashion. We weren’t satisfied, so we made a thing that doesn’t do that.

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass or CSS library of your choosing primarily concerned with the appropriate technical implementation of design patterns—not how they look.

Turret

Turret

Turret

Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

UI KIT

uikit

uikit

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

unsemantic

unsemantic

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.
For instance, if you want a 50% wide column, simply use class=”grid-50″. There are grid classes for multiples of five: 5, 10, 15 … 95, 100. There are also grid classes for dividing a page into thirds: grid-33 and grid-66.

WEE

wee

wee

Blueprint for modern web development a lightweight front-end framework for logically building complex, responsive web projects.

YAML

YAML

YAML

A modular CSS framework for truly flexible, accessible and responsive websites
YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together. focussed on device independent screen design and provides bullet-proof modules for flexible layouts. This is a perfect starting point and the key to truly responsive design.