Professional web designing is really a tough and time consuming job. Along with the hard work and clever tricks, it requires a perfect combination of HTML and CSS frameworks. There is no doubt that they have revolutionized the way of web designing process. The efficient framework not only saves your time and effort but they also provide various unique functionalities to improve and enhance the overall performance of your design. Thousands of tools are available out there, but we’ve selected few reliable and useful sources that will definitely help you to make your design more efficient and attractive.
Table of Contents
36. YAML
YAML is a CSS framework for developing flexible and responsive websites. It provides various building blocks like navigation, forms, grid, typography module and more. All elements are well prepared in HTML5/CSS3 and tested on major web browser.
35. Columnal
Columnal is the CSS grid system that makes responsive prototyping a little easier. It includes built-in debugging CSS, sub-column layout options, vertical spacing classes, PDF of grid system for sketching and wireframing templates.
34. Cardinal
Cardinal is small mobile first CSS framework for developing responsive web applications. It omits many aesthetic designs, complicated CSS and focuses on performance, accessibility and readability.
33. Skel
Skel is a lightweight framework for creating responsive sites and web apps. It features automatic normalization, grid system, breakpoint manager and a ton of configurability to make Skel do whatever you want.
32. Responsive
Responsive is a lightweight grid system that includes 12, 14 & 16 columns, optional gutters, clearfix and box sizing polyfill. You just need to add predefined classes to build your grid structure.
31. Simple Grid
Simple grid is designed for developers who need a barebones grid. It adapts to any size of layout but perfect for 1140 px. The lightweight 12 column structure easily divides into 2, 3, 4 and 6 giving you numerous possibilities.
30. Ink
Ink (built by Zurb) helps you craft HTML emails that can be read anywhere on any device. Its 12 column grid blends flexibility and stability so your subscribers can view your emails perfectly.
29. Profound Grid
It’s a responsive grid system for fixed and fluid layout, built on SCSS. Profound grid gives you flexibility and full control so you can change/add/remove column & gutter width as needed. It works without any “grid_x” class (unless you want to include them) and uses negative margins to calculate columns.
28. Sencha
Sencha Touch is an HTML5 framework with over 50 inbuilt components, MVC system and templates (for every mobile device) for creating powerful web apps. It features smooth scrolling, fluid animation, adaptive layouts, infinite carousel, deep linking and much more.
27. Framework7
It’s a full featured HTML framework which is perfect for building iOS hybrid apps or web apps that looks and feels like native iOS apps. It includes plenty of UI components and features like native scrolling, split view, high performance animation, caching, pre-loading etc.
26. Clank
Clank is used for prototyping native tablet/phone applications. It uses Sass and compass ensures a maintainable codebase. You can use generators to create webpages quickly and use vector files to automatically create icon fonts.
25. Bijou
Bijou is a beautiful CSS framework under 2Kb. It is equipped with numerous elements including typography, tables, grids, buttons and alerts.
24. Montagejs
Montagejs is an HTML5 framework for creating single page applications, maintained by Montage Studio. It allows you to build modular architecture of project and helps developers and designers to work collaboratively.
23. Layer CSS
Layer is a lightweight framework that comes with a small footprint. It features normalization & sensible defaults, fluid grid, lists, tables, forms and other tools. No color, no border, no rounded corners, no px definition, just a simple design.
22. Base
Base is fast, lightweight and responsive framework for building web apps for all devices & browsers. It helps you write clean, organized and well-structured CSS code that you can easily maintain over time.
21. Susy
Susy framework is perfect for developing responsive websites with powerful media query controls. It is more flexible than any one framework and comes with asymmetric layouts, background grid, gutter positions and span mixin feature.
20. Almost Flat UI
Almost Flat UI is based on foundation framework and includes various elements like navigation, buttons, forms, typography and CSS components for creating beautiful webpages quickly.
Also Read: 30+ Helpful Cheat Sheets for Programmers and Developers
19. Zebra
The Zebra approach sits on HTML5 canvas elements which are used for creating rich UI web-apps. Its UI engine offers pixel by pixel rendering, flexible event manipulation, font metric calculation, data model description, layered UI architecture and much more. It also supports inertial scrolling, touch and virtual keyboard input.
18. HTML5 Boilerplate
HTML5 boilerplate helps you build fast, robust and adaptable websites and web-apps. It includes optimized Google analytics snippet, touch device icons, CSS resets, print styles, docs covering various tips and tricks.
17. Ivory
Ivory is simple, flexible and powerful responsive framework that makes your front-end development faster and easier. It supports grid system, typography and various UI components and you can build design anywhere between 1200px and 320px.
16. Responsee
Responsee is lightweight and initiative CSS framework for developing fast responsive design. You can create mobile website using dedicated basic elements and components, and then begin building versions for larger display. It features grid system, tables, icon sets, image carousel, custom forms and a few built-in templates.
15. Cascade
Cascade is a feature rich CSS framework, inspired by twitter Bootstrap. You can build high performance websites in less time for new as well as older browsers. It features semantic + non semantic grid layouts, table designs, navigation elements, base templates and more.
14. Ratchet
Ratchet is used for creating mobile apps with simple HTML, CSS and JS components. It was originally used by Twitter as their internal tool for building mobile app prototype. It is packed with font icon sets and pre-designed UI themes for both iOS and Android.
13. Skeleton
Skeleton is simple, light (400 LOC) and responsive boilerplate, built with mobile in mind. You don’t need to compile or install anything to get started. Skeleton is packed with grid system, typography, buttons, forms, lists, tables, media queries and other small utilities.
12. GroundworkCSS
GroundworkCSS is a responsive framework for creating scalable and accessible web applications. It is built with Sass and features grid system, responsive text, rapid prototyping, form elements, tabs, message boxes, icons and animations.
11. Foundation
Foundation (by Zurb) is an advanced front-end framework for creating responsive web pages. Everything is semantic and highly customizable. Also, there is an inbuilt command line tool to speed up your coding process.
10. Kube
Kube is a flexible web framework that helps you spend less time on regular tasks and focus more on creating amazing products. It includes numerous CSS components such as grid, typography, blocks, tables, forms, buttons, notifications, search, icons and mixins, which works on all modern browsers.
9. Ionic
Ionic is an HTML5 framework for developing hybrid mobile apps. It offers HTML, CSS, JS components, gestures and other useful tools for building highly interactive apps. Use iconic if you are concerned with app performance.
Read: 40 Useful JavaScript Frameworks for Developers
8. HTML Kickstart
Kickstart provides HTML5, CSS, JS building block for rapid web development. It includes buttons, menus, lists, tables, tooltips, typography, glyphs, breadcrumbs, tabs, grids, images, sliders, forms and much more.
7. Concise
Concise is a lightweight CSS framework (supports Vanilla CSS & SASS) perfect for all devices. It includes great base styling and many add-ons that are highly extensible.
6. Pure
Pure is a set of small and responsive CSS modules, crafted with mobile devices in mind. By using forms, grids, tables, menus and tools, you can build beautiful layouts for all devices. Furthermore, Pure has minimal and flat design which can be customized by adding few lines of CSS.
5. Metro UI
It’s a metro Bootstrap CSS library that contains a set of styles to create websites with interface similar to Windows 8. It includes title, navigation, visualization, date/time, grid system, 300+ built-in icons and information elements.
Read: 25+ Flat UI Design and Kits for Developers
4. UIkit
UIkit is a lightweight and modular front-end framework for creating fast and powerful web interfaces. It includes a set of HTML, CSS and JS components which are easy to customize and extendable.
3. Semantic UI
Semantic UI (open source library) provides complete design freedom. You can change the whole look and feel of every single element with just a handful of lines. It is packed with over 3000 CSS variable and 500 UI definition. Developers are soon going to add different themes and layout, so you don’t have to start from the scratch.
2. Gumby
Gumby is a simple, flexible and responsive CSS framework powered by Saas. It features multiple types of grids with column variation, beautiful UI kit, fancy tiles, multiple breakpoints to shuffle layout, responsive images, and various toggles & switches.
1. Bootstrap
Recommended: 24 Useful Bootstrap UI Editors for Developers
No need to introduce this framework. Still, if you are not living on earth; Bootstrap is most popular (number one project on Github) HTML, CSS and JS framework for developing modern, responsive websites. It consist of various HTML elements, advanced grid system, dozens of reusable components and jQuery plugins. It is made for all developers, all devices and all project sizes.
I am amazed to find so many css framework. I only know and uses Bootstrap. Thanks Varun bro for notifying me about so many frameworks available on Web. I will also try some from the list except Bootstrap.
i like foundation very much
Hello, the number 9 its wrong. The correct name of this framework is Ionic (not iconic)
Thanks for pointing out the mistake Bruno.