The best Front-End Frameworks You Should Use for Your Designs


Posted on November 15th, by Learning in Resources. 1 Comment

As you can see, here at Learning-HTML we like to give you the best tools to learn and start making your own websites through HTML and CSS. So why don’t make websites with a already made CSS Framework? This will save you a lot of time and effort!

CSS Frameworks, as I say above, will save you a lot of time because will help you rapidly develop websites eliminating the need to write basic CSS styles yourself, also all this CSS Frameworks I provide come with a responsive layout helping you to quickly develop mobile-specific websites.

All of these CSS Frameworks are choose by us and we think are the best for creating new websites. Let’s take a look!

Bootstrap v.2.0 from Twitter

Bootstrap

The hugely popular Bootstrap, now in its second version, is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions that uses some of the latest techniques that gives you stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a lightweight (only 6k with gzip) framework.

Bootstrap doesn’t include responsive features by default. You can turn on the responsive CSS by including the proper meta tag and the additional stylesheet within the <head> of your document:

[html]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
[/html]

Foundation 3

foundation

With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.

The latest version (3) of Foundation has been built with Sass allowing you to quickly develop Foundation itself – and gives you new tools to quickly customize and build on top of Foundation. The developers have added new elements, new options, and tons of streamlining to make this the fastest way to prototype responsively.

Yes, as their taglines states, Foundation is quite possibly the most advanced responsive front-end framework in the world.

320 and Up

320up

320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. It starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.

Skeleton

Skeleton is a small collection of CSS & JS files that has a lightweight 960 grid as its base that seemlessly scales down to downsized browser windows, tablets, mobile phones (in both landscape and portrait).

The 1140px CSS Grid System

The 1140px CSS Grid has been designed to fit perfectly with a 1280px screen, becoming fluid for smaller screens, beyond a certain point it uses media queries to serve up a mobile version.
The actual grid consists of twelve columns, evenly divided by either two, three, four or six. It works with all major browsers, with the exception of IE6, which does not support max-width (it will span the full width of the browser).

Responsive Grid System





  • Afshin Mehrabani

    Useful, thanks. Also I just created a list of best front-end frameworks on Github: https://github.com/usablica/front-end-frameworks