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.
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.
Figure 1: Less Framework
The LESS has four types of layouts, they are:
Grid with 10 columns at 992 px. Made for desktops, notebooks and tablets with landscape orientation and also all older browsers.
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.
Figure 3: Layout for tablets in Less
It has 3 columns at 320 px, longer recommended for iPhones, iPod touch and the vast majority of smartphones Market (Android, Symbian, etc).
Figure 4: Layout of Mobile Less
Wide Mobile Layout
It has 5 columns at 480 px, suitable for smartphones in landscape orientation.
Figure 5: Wide Mobile Layout of Less
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.
Figure 7: Operation of the PhoneGap framework
The Sencha Touch allows you to develop applications using the language HTML5 mobiles, quickly and easily you create your own mobile application.
Figure 8: Sencha Touch Framework
Examples of sites using Sencha Touch:
Below I will list some examples of websites using sencha touch.
- Kitchen Sink - http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
- The Watch List - http://www.watchlistapp.com/
- Jog With Friends - http://blooming-day-7830.herokuapp.com/
- Touch Tweets - http://dev.sencha.com/deploy/touch/examples/production/touchtweets/index.html
- Kiva - http://dev.sencha.com/deploy/touch/examples/production/kiva/index.html
- GeoCongress - http://dev.sencha.com/deploy/touch/examples/production/geocongress/index.html
- O’Reilly - http://dev.sencha.com/deploy/touch/examples/production/oreilly/index.html
- TouchStyle - http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
- You can see the complete lista at the Sencha Touch Official website: http://dev.sencha.com/deploy/touch/examples/production/
Twitter Bootstrap is a framework designed to facilitate the development of web, it has several features like, responsive layouts, grid system, etc.
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.
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.
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:
- Google - http://www.projectrebrief.com/
- Microsoft - http://www.microsoft.com/Surface/en-US
- NASA - http://data.nasa.gov/
- Nike - http://www.nike.com/us/en_us/lp/skateboarding/
- Barack Obama Oficial - http://www.barackobama.com/
- Mercedes-Benz - http://a-class.mercedes-benz.com/com/en/
- And more…
It is also used by large companies like Google, Microsoft, Twitter, and others.
Figure 11: Modernizr
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.
I hope you enjoyed until the next article.