MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Top 6 Front-End Frameworks

In this article we learn about some of the main frameworks for front-end development.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Hello guys, in this article we will talk about some of the major HTML and CSS frameworks in the world. Frameworks are very important for agility and easier way to develop your projects, but we must be very careful when using frameworks, you must have a great knowledge of the native language, in the case of this article, HTML and CSS, before even thinking to use any framework.

Let us now see some of the coolest frameworks.

LESS Framework

The LESS Framework is a grid system developed for layouts that are designed to fit in any mobile device or not, regardless of the screen size of the device, be it a smartphone or a desktop computer with a large screen. It contains four layouts and three sets of typography.

Less Framework

Figure 1: Less Framework

The LESS has four types of layouts, they are:

Default Layout

Grid with 10 columns at 992 px. Made for desktops, notebooks and tablets with landscape orientation and also all older browsers.

Default Layout Less

Figure 2: Default Layout Less

Layout for Tablets

It features a grid system of 8 columns at 768 px, being more suitable for iPad's and other tablets.

Layout for tablets in Less

Figure 3: Layout for tablets in Less

Mobile Layout

It has 3 columns at 320 px, longer recommended for iPhones, iPod touch and the vast majority of smartphones Market (Android, Symbian, etc).

Layout of Mobile Less

Figure 4: Layout of Mobile Less

Wide Mobile Layout

It has 5 columns at 480 px, suitable for smartphones in landscape orientation.

Wide Mobile Layout of Less

Figure 5: Wide Mobile Layout of Less

PhoneGap

Home PhoneGap
Figure 6: Home PhoneGap

The PhoneGap is a free and open source framework that allows applications to be created for mobile platform without having to use native code language like Objective C for iOS and Java for Android.

In PhoneGap you develop your application using only HTML, CSS and Javascript, which then the framework compiles for the platform you want, as shown in Figure 7.

Operation of the PhoneGap framework

Figure 7: Operation of the PhoneGap framework

Sencha Touch

The Sencha Touch allows you to develop applications using the language HTML5 mobiles, quickly and easily you create your own mobile application.

Sencha Touch Framework

Figure 8: Sencha Touch Framework

Examples of sites using Sencha Touch:

Below I will list some examples of websites using sencha touch.

Twitter Bootstrap

Twitter Bootstrap is a framework designed to facilitate the development of web, it has several features like, responsive layouts, grid system, etc.

 Twitter Bootstrap

Figure 9: Twitter Bootstrap

This framework was so popular that many companies decided to create their own frameworks based on Twitter Bootstrap, as Globo.com with Globo Bootstrap (http://globocom.github.com/bootstrap/).

Here in this link (http://twitter.github.com/bootstrap/getting-started.html # examples) you can see some working examples of this wonderful framework.

HTML5 Boilerplate

This I would say is the most famous of all framework, helping developers to create web applications or websites quickly, robust and adaptable, ie responsive.

HTML5 Boilerplate

Figure 10: HTML5 Boilerplate

One of those responsible for it to be the development framework front-end’s most famous is the vast majority of giant companies in the world uses, such as:

Modernizr

The Modernizr is a JavaScript library that detects features of HTML5 and CSS3 in users' browsers.

It is also used by large companies like Google, Microsoft, Twitter, and others.

Modernizr

Figure 11: Modernizr

Conclusion

These are, in my opinion, the most important frameworks for front-end development available in the world until the date of this article was written.

They help a lot in development, but do not forget to study the native language which is the html, css and javascript, just so you can be a successful developer.

I hope you enjoyed until the next article.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login