Grid Layout Grid/4928861?Ref=Cssgrid • CSS Grid Is a Valid HTML5, Responsive CSS Grid from 1 to 8 Columns

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- css-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) } <ul class="examples"> <li>…</li> <li>…</li> <li>…</li> </ul> Lecture 06. Responsive HTML5 CSS Grid Consider the Html-code <h1><a href="http://960.gs/"> <div class="clear"> 960 Grid System </a> </h1>   </div> <div class="container_12"> <div class="grid_9"> <p>700px</p> </div> <h2>12 Column Grid</h2> <div class="grid_3"> <div class="grid_12"> <p>220px</p> </div> <p>940px</p> <div class="grid_12"> </div> <p>940px</p> </div>  </div>  Lecture 06. Responsive HTML5 CSS Grid <!DOCTYPE html "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http- equiv="content-type" content="text/html; charset=utf-8" /> <title>My Blog - My Name</title> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <div id="aside" class="grid_3"> <link rel="stylesheet" type="text/css" <h3>Navigation</h3> <ul> <li><a media="all" href="css/960.css" /> </head> href="#">Home</a></li> <li><a <body> href="#">About Me</a></li> <li><a href="#">Articles</a></li> <li><a <div class="container_12"> href="#">Contact</a></li> </ul> <div id="header" class="grid_12"> <h3>More Articles:</h3> <ul> <li><a <h2>My Blog</h2> <p>Description of my href="#">Article 1</a></li> <li><a href="#">Article 2</a></li> <li><a blog</p> </div> href="#">Article 3</a></li> <li><a  href="#">Article 4 </a></li> </ul> </div> <div class="clear"> </div> <div id="footer" class="grid_12"> <p> <div id="maincontent" class="grid_9"> <h1>Title Footer information like email and of the blog post</h1> <p><strong>Published on licensing for site </p> </div> </div>  </body> </html> <p> …….</p> <p>…</p> <p>... </p> </div> Lecture 06. Responsive HTML5 CSS Grid http://code.tutsplus.com/tutorials/mastering-the-960- grid-system--net-13794 Lecture 06. Responsive HTML5 CSS Grid http://line25.com/tutorials/create-a-responsive- web-design-with-media-queries (responsive) Lecture 06. Responsive HTML5 CSS Grid 34 RESPONSIVE GRID SYSTEM HTTP://34GRID.COM/ • 34Grid is a Responsive Grid System based on "equally distributed columns" layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions) • If you're already familiar with grid systems and responsive web design just create&download a bundle and see what is inside. Else you may start with resizing your browser window. Lecture 06. Responsive HTML5 CSS Grid HTML Part   <div class="container"> <section class="row">  <div class="col_4">col_4</div> <section class="row"> <div class="col_1">col_1</div> <div class="col_4">col_4</div> </section> <div class="col_4">col_4</div>  <section class="row"> <div class="col_4">col_4</div> <div class="col_2">col_2</div> </section> <div class="col_2">col_2</div> </section>  ...  </div> <section class="row"> <div class="col_3">col_3</div>  <div class="col_3">col_3</div> <div class="col_3">col_3</div> </section> Lecture 06. Responsive HTML5 CSS Grid Video Content <div class="col_[*]"> <p class="video-holder"> <iframe width=640 height=480 src=http://www.youtube.com/embed/WUz- WqUw4Ic frameborder=0 allowfullscreen> </iframe> </p> </div>  Lecture 06. Responsive HTML5 CSS Grid CONSIDER THE TECHNOLOGY OF 2015 Lecture 06. Responsive HTML5 CSS Grid CSS Grid Layout http://codecanyon.net/item/responsive-html5-cssgrid/4928861?ref=CSSGrid • CSS Grid is a valid HTML5, responsive CSS Grid from 1 to 8 columns. It works on iPhone, iPad, Google Android and Windows 8. It also features a Mobile Toggle Menu, as well as 3 header options. • Take a look at the demo: http://codecanyon.net/item/responsive-html5- css-grid/full_screen_preview/4928861 Lecture 06. Responsive HTML5 CSS Grid Main Features • 1 to 8 columns • With or without column padding • Easy HTML Setup • Fixed or Percentage Columns (or mix them) • Mobile Toggle Menu uses CSS3 and Javascript • 3 header options, sticky, fixed, static. • Use stack class to automatically stack columns • Use CSS3 animate class to animate the transition between columns Lecture 06. Responsive HTML5 CSS Grid Other Features • Detailed Instructions http://www.cssgrid.co/css-grid/instructions/ • Retina screen support • Works on: PC, iPad, iPhone, HTC, Nokia, Samsung, Sony, LG, Blackerry • PSD files included for 1024, 768, 480, 320 Lecture 06. Responsive HTML5 CSS Grid Tested and compatible with: • iOS 5, 6, 7, 8+ • Android 2.5+ • Safari 5+ • Chrome 27.0+ • IE 9, 10, 11 • Windows 8 (IE 10) Lecture 06. Responsive HTML5 CSS Grid Updates • v 1.6 (12 February 2015) • * Re-built the navigation so it fits inside header • * Cleaned up 3 Nav CSS files and added menus at top. • * Updated mobile toggle menu slide transition • * Added return false; to js/toggle.js to stop page jumping to top • * New function added: .sticky This makes the nav stick to top after scrolling page Amended CSS files: css/nav-top.css css/nav-left.css css/nav-right.css js/toggle.js HTML Pages: * Removed clear div on nav after end of ul Lecture 06. Responsive HTML5 CSS Grid In the template default.css This controls colors and fonts. fixed-1024.css This is loaded if the screen size is equal to 1024 and higher. fixed-768.css This is loaded if the screen size is between 768 and 1023. fixed-480.css This is loaded if the screen size is between 480 and 767. fixed-320.css This is loaded if the screen size is between 0 and 479. The following contains p (percentage) and then the column names, such as .one, .two etc. percent.css This is the CSS for the percentage CSS. If you would like to use the stack class for stacking columns on mobile, then you need to add these files too: stack2.css This is loaded if the screen size is between 480 and 767. stack1.css This is loaded if the screen size is between 0 and 479. stack1-2.css This is loaded if the screen size is between 0 and 767 and is used for stacking to 1 column only. Lecture 06. Responsive HTML5 CSS Grid  <div class="f1 animate stack1"> 1 <div class="one"> column 1 layout </div> </div>  Lecture 06. Responsive HTML5 CSS Grid  <div class="f2 animate stack1"> <div class="one"> 1 2 </div> columns <div class="two"> 2 layout </div> </div>  Lecture 06. Responsive HTML5 CSS Grid 3 columns layout    <div class="f3 animate <div class="f3 animate <div class="f3 animate stack1"> stack1"> stack1"> <div class="one"> <div class="one"> <div class="one-two"> 1 1 1 - 2 </div> </div> </div> <div class="two"> <div class="two-three"> <div class="three"> 2 2 - 3 3 </div> </div> </div> <div class="three"> </div> </div> 3  --> </div>  Lecture 06. Responsive HTML5 CSS Grid 4 columns layout Lecture 06. Responsive HTML5 CSS Grid 4 columns html-code    </div> </div>  Lecture 06.

Grid Layout Grid/4928861?Ref=Cssgrid • CSS Grid Is a Valid HTML5, Responsive CSS Grid from 1 to 8 Columns

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support