Frameworks de CSS

Resumen

Qué es un framework. La rejilla. Frameworks de CSS. 960.gs. Twitter Bootstrap.

Contenido

Primero debes ver el vídeo Frameworks de CSS: 960.gs en el que se explica el diseño basado en retícula (grid), el look & feel de una página web, la composición o layout, la proporción áurea, la regla de los tercios, y el framework 960.gs.

Después debes ver el vídeo Frameworks CSS: Bootstrap en el que se explica que es un framework CSS (herramientas y pautas), los frameworks más famosos (BluePrint, 960 Grid System, YUI) y se pone un ejemplo de botones y de uso de la rejilla con Twitter Bootstrap.

Recursos

Lecturas

Imprescindible
  1. 960 Grid System: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.
  2. Framework: La palabra inglesa "framework" (marco de trabajo) define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.
  3. Grid (page layout): A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
  4. Twitter Bootstrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.
Complementario
  1. Blueprint: Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
  2. Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down To Mobile, Fast to Start, Style Agnostic.
  3. YUI: YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.