Search Here

Custom Search

Tuesday, February 18, 2014

What is twitter bootstrap?

A front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.

A brief history

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Inconsistencies among the individual applications made it difficult to scale and maintain them. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek. By the end of Hackweek, we had reached a stable version that engineers could use across the company.
With the help and feedback of many engineers, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns. This release represents our first public 1.0 release and the open sourcing of many months of hard work.

Why use Bootstrap

At its core, Bootstrap is just CSS, but it’s built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions. Additionally, since Bootstrap is purely CSS when compiled via Less, we gain two important benefits:
First, Bootstrap remains very easy to implement; just drop it in your code and go. Compiling Less can be accomplished via Javascript, an unofficial Mac application, or via Node.js (read more about this at http://lesscss.org).
Second, once complied, Bootstrap contains nothing but CSS, meaning there are no superfluous images, Flash, or Javascript. All that remains is simple and powerful CSS for your web development needs.

What’s inside

When you take a closer look at Bootstrap, you will notice we have separated the development files into seven distinct files:
  • reset.less A CSS reset originally made by Eric Meyer and modified for our use to remove unnecessary elements
  • preboot.less Color variables and mixins for things like gradients, transparencies, and transitions to simplify vendox-prefixed CSS blocks to one line of code each
  • scaffolding.less Basic and global styles for generating a grid system, structural layout, and page templates
  • type.less Headings, body text, lists, code, and more for a versatile and durable typography system
  • patterns.less Repeatable interface elements like navigation, modals, popovers, and tooltips to take you beyond the default scaffolding styles
  • forms.less Durable styles for various input types, form layouts, and control states.
  • tables.less Styles for tabular data in a number of varied displays
Since we opted to break our CSS into more manageable chunks for easy organization and iterations, compiling these files with Less means you end up with just one CSS file to include.

Why it works

Bootstrap works by providing a clean and uniform solution to the most common, everyday interface tasks developers come across. At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites. This is because while it is very extensive, it’s flexible enough to work for many unique design needs.
Today, you can use Bootstrap to throw together quick prototypes or guide the execution of more sophisticated designs and larger engineering efforts. In other words, Bootstrap is a very simple way to promote quick, clean and highly usable applications.

Source : https://blog.twitter.com/2011/bootstrap-twitter

What is responsive web design?


What is responsive web design?

A responsive website changes its appearance and layout based on the size of the screen the website is displayed on. Responsive sites can be designed to make the text on the page larger and easier to read on smaller screens. They can also be configured to make the buttons on the phone's screen easier to press. More sophisticated ways of using responsive design on a mobile device include: formatting the website to hide or present entirely different information, radically changing the graphics and colors, or even reducing the site to emphasize just its most important piece.

Use twitter bootstrap css

http://getbootstrap.com/

What is AngularJS ?

AngularJS is a Javascript MVC framework from Google.

Why AngularJS ?
---------------------
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.


Here is some great examples
----------------------------------------

http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

http://angularjs.org/