• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Choosing a WooCommerce Theme? Here’s What Most Store Owners Get Wrong

      May 9, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

18 Best CSS Frameworks for Accelerated Development

15
  • by Gavin
  • In CSS · DEVELOPMENT
  • — 17 Jun, 2013

According to Wikipedia, CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. In this article we have gathered ready-to-use frameworks which will enable you to reduce your task flow and code LESS. We hope you will find the list handy and useful for your development needs. If you know any other CSS frameworks which are handy and useful, give your opinion in comment box, we would love to hear from you. Enjoy !

1. Pure : CSS Framework

Pure-css-framework
Pure is a fresh one that is created by Yahoo!. It uses Normalize.CSS and doesn’t use any JavaScript but only HTML-CSS. The framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation. Markup used is very simple and the whole framework is pretty lightweight(5.7KB minified and gzipped).

Source

2. Fitgrd : Responsive Grid System

fitgrid
Fitgrd is not a framework. It’s a solid foundation to build up your own responsive website. It is designed for rapid prototyping, but also runs well in production environments. This grid system is perfect for advanced web designers who don’t want to have their pages look like “bootstraped”. Everything but the grid is up to you and gives you the ability to save a lot of dispensable code.

Source

3. Fries

fries
Fries is a solid HTML-CSS-JS framework for creating Android-like UIs both for real-world usage and prototyping. The framework has all the major components like forms, action bars, lists, buttons, spinners or tabs. It is also optimized for PhoneGap and can be easily converted to a native app.

Source

4. Markup Framework

markup-framework
Markup Framework, a fresh one, is a collection of layouts, widgets, typographic styles and other UI components which can be used as a base for any web project. It is mostly HTML-CSS with very few JavaScript and focuses on providing the base/skeleton rather than the look/design. The framework includes multiple style choices for typography, forms and UI widgets. Also, there are many ready-to-use layouts (with mobile-first approach), a flexible grid and CSS reset.

Source

4. Maxmertkit

Maxmertkit
Maxmertkit is a fresh one that looks/feels a bit like Bootstrap but has different things to offer. It uses SASS for the CSS part and includes styles for all major stuff like grid, typography, forms, tables, buttons and lists. There are various widgets like buttons, tabs, grouped elements, badges, dropdowns, tooltips, menus and more. And, some handy JavaScript components exist for notifications, carousel, buttons, modals, etc.

Source

5. Metro UI CSS

metrouicss
Metro UI CSS is a set of styles for creating such interfaces. It is a self-contained solution but can also be used side-by-side with any other frameworks. There are styles for the popular tiles, images, notices, forms, buttons and typography. The framework is also a “work in progress” and is mentioned to be enriched with more layout options + features.

Source

6. Zoey : For Creating Mobile Apps

Zoey
It is a HTML5-CSS3-powered framework for creating mobile apps, built on top of Zepto.js and weights only 6kb (gzipped). Zoey has the UI components like navigation, lists, buttons, control groups, forms and grids. The framework is compatible with iOS + Android and comes with an app skeleton that covers all the features.

Source

7. Microjs : Tiny JS Framework

microjs
Microjs is a website which is a directory of such tiny (less than 5kb) JavaScript libraries and frameworks. From a list of options, you can select the feature you need like: a base framework, CSS animation, data manipulation, etc. and it’ll present you the resources that can meet your requirements. Although getting used to new frameworks may seem like a “loss of time”, it’ll probably pay back in load times (specially for the mobile).

Source

8. Lime JS

limejs
It is a HTML5 game framework for building games that’ll feel native and work fast in modern touchscreens and desktop browsers. LimeJS is created with Closure Library built by Google and comes with functions/classes to control the timeline, events, shapes and animations. Also, the framework has full support of sprite sheets (you can collect all images inside a single file).

Source

9. 52 Framework

52 framework
52framework is a CSS framework which provides an easy way to build websites using HTML5 & CSS3 while still supporting all modern browsers (including ie6). It uses HTML5 tags like header, nav, section, article, footer or new input field types like url, email, etc. The framework also has a HTML5 compatible reset stylesheet.

Source

10. Baseline

baseline
Baseline is a CSS framework, built with typographic standards in mind, that aims to simplify developing a website with a pleasing grid and good typography. With the help of reset.css & base.css files, Baseline clears the default behavior of your browser & builds a basic typographic layout to start with.

Source

11. Less : HTML Powered CSS Framework

lessframework4
Less Framework is a lightweight CSS framework that enables you to build flexible multi-column website layouts. It contains an eight-column grid optimized for a line-height of 24px & a set of typography presets based on the golden ratio which is parallel to the grid’s vertical rhythm.

Source

12. Gumby 2 : Responsive CSS Framework

gumby2
Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution, it is quite similar to Twitter Bootstrap, it comes with a web UI Kit of good looking buttons, forms, navigation + tabs and a tiny JavaScript file that brings these components to life.

Source

13. Formee : CSS Form Framework

formee
Formee is a CSS framework that helps you to easily create cross-browser web forms. It works with the technique provided by Fluid 960 Grid System to compose the form’s layout, allowing total flexibility to put it in any website or web system. –

Source

14. Golden Grid System

golden-grid-css-framwork
Golden grid a web grid system that is totally focused on grid-based designs (not a complete CSS framework). Golden Grid uses float:left approach for building grids rather than positions. It is a 6/12 column grid system with a 970px main width.

Source

15. Twitter Bootstrap : CSS Toolkit by Twitter

Bootstrap
Twitter Bootstrap is a toolkit created by Twitter for kickstarting CSS when developing websites. It is built with Less and consists of base CSS + HTML for typography, forms, buttons, tables, grids, navigation, and some more. The grid provided is 940px wide 16-column and, for the layouts, there are solutions for both fixed + fluid ones. Twitter Bootstrap’s HTML elements have a plain-yet-elegant style where form inputs get a nice box-shadow on focus or table rows being highlighted. The kit also includes other stuff like popovers, alerts, tabs and pagination which all use semantic XHTML.

Source

16. 960 GS

960gs
A CSS framework that is better known for helping you to organize your work flow as far as your website development is concerned is none other than the 960GS framework. Most importantly, the 960GS framework is known for offering you two diverse packages of twelve as well as sixteen columns that can either be used on its own or in accordance with one another. Secondly, the 960GS framework also makes available an overlay tool.

Source &nbsp

17. BluePrint

blueprint
Blueprint refers to a CSS framework that plays an essential role in helping you develop a good deal of typographic grids. Moreover, with the help of this particular framework you can cut down a lot of time that is otherwise required for CSS development.

Source

18. YAML

yaml
YAML is a CSS framework that is popularly known as Yet Another Multicolumn Layout. The best part about this particular CSS framework is that it is perfectly compatible with almost all the browsers that are operative in today’s date. Apart from this, the developer of YAML Dirk Jesse has come up with this framework keeping into mind the web standards. In addition, this CSS framework comes complete with a YAML Builder.

Source
Share

Tags: best css frameworkscss frameworkstop css frameworksWeb-Development

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story 25 High Quality New Fonts for Designers
  • Next story Fontastic : Create Your Own Customized Icon Fonts

You may also like...

  • 30 Best JavaScript Tools – 2014
  • Best jQuery Libraries for Handling Touch Events
  • Fresh Tools for Developers October 2015
  • How Mobile Tech and Software like Rio Can Revolutionise the Healthcare Sector

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • CSS
    • 18 Best CSS Frameworks for Accelerated Development
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM