Web applications and multimedia technologies

Lecture № 6

Responsive HTML5 CSS Grid

Prof. N.K. Trubochkina Department of computer engineering, HSE 2015

Lecture 06. Responsive HTML5 CSS Grid The theoretical material

http://www.w3.org/TR/2015/WD- -grid-1-20150917/#propdef-grid- auto-columns

Lecture 06. Responsive HTML5 CSS Grid Review and analysis of grid systems

cssgrid.net 12 column, easy to use, responsive grid system by Andy Taylor. cssgrid.net responsive.gs 12, 16, 24 column options, great templating capability. Responsive grid system by Denis Leblanc from Studio Snapsize. responsive.gs 960.gs Master of all grid systems i think. All you expect from a grid system is in your download bundle. By Nathan Smith. 960.gs gridpak.com Another different approach to responsive grid systems. Controllable breakpoints, highly customizable and easy-to-use generator. Created by Erskine Design. gridpak.com responsivegridsystem.com A percentage-driven grid system. All uses percentage values to work with any width. Created by Graham Miller. responsivegridsystem.com zurb playground Zurb's on the fly CSS grid generator. So easy to use interface. (I also used zurb's textchange event in my bundle creating form) zurb grid generator getskeleton.com Skeleton is more than a grid system. A collection of CSS files which includes typography, buttons, form elements, ... and a good grid system. Created by Dave Gamache. getskeleton.com twitter bootstrap A complete collection of design & development needs. Something big. Bootstrap has a 12 columns responsive grid system by default. Developed bt Twitter. twitter bootstrap

Lecture 06. Responsive HTML5 CSS Grid http://responsive.gs/

Lecture 06. Responsive HTML5 CSS Grid Lecture 06. Responsive HTML5 CSS Grid 960 Grid System (960.gs)

Lecture 06. Responsive HTML5 CSS Grid Lecture 06. Responsive HTML5 CSS Grid Lecture 06. Responsive HTML5 CSS Grid .examples li { (properties of .grid_4) }

  • …
  • …
  • …

Lecture 06. Responsive HTML5 CSS Grid Consider the Html-code

960 Grid System