HTML/CSS tools
class: center, middle .title[ Front-end training # HTML/CSS tools, practices and frameworks ] --- #Emmet .columns[.col-50[ Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: This line in editor: ``` css ul.emmet>li*3>a ``` converts to: ``` html <ul class="emmet"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> ``` ].col-50[  .center[ [http://emmet.io/](http://emmet.io/) ] ]] --- # Modernizr .columns[.col-50[ Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. - It tests for over 40 next-generation features, all in a matter of milliseconds - It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties - It adds classes to the html element that explain precisely what features are and are not natively supported - It provides a script loader so you can pull in polyfills to backfill functionality in old browsers ].col-50[  .center[ [http://modernizr.com/](http://modernizr.com/) ] ]] --- # Modernizr In javascript: ``` javascript if (Modernizr.webgl){ loadAllWebGLScripts(); } else { var msg = 'Your browser doesn’t support webgl'; document.getElementById( '#notice' ).innerHTML = msg; } ``` In HTML: ``` html <html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg"> ``` --- # HTML5 Boilerplate .columns[.col-50[ The web’s most popular front-end template. HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package. - Analytics, icons, and more - Normalize.css and helpers - jQuery and Modernizr - High performance ].col-50[  .center[ [http://html5boilerplate.com/](http://html5boilerplate.com/) ] ]] --- # HTML5 Boilerplate .center[  ] --- #Grid 960 960.gs provides a set of columns, written in CSS, that facilitate the laying out of web pages. Download the files, add them to your website and it’s ready to go. No special plug-ins or new technology are needed, and you can use it in conjunction with other CSS files. .columns[.col-50[ ``` html <div class="container_12"> <div class="grid_7 prefix_1"> <div class="grid_2 alpha"> ... </div> <div class="grid_3"> ... </div> <div class="grid_2 omega"> ... </div> </div> <div class="grid_3 suffix_1"> ... </div> </div> ``` ].col-50[  .center[ [http://960.gs/](http://960.gs/) ] ]] --- # How to manage css on complex websites? - [Dozens of pages](https://www.behance.net/gallery/38120385/Field-Mobile-wireframe-kit) - [Repeatable UI elements](https://www.behance.net/gallery/14010225/PrasastiEnom-PSD-Dashboard-Webapp-Template) - [Big dashboards](https://dribbble.com/shots/1754800-Analytics-Dashboard-Design/attachments/285075) - [Complex UI with a lot of nested elements](https://dribbble.com/shots/2556394-Email-App) --- # SMACSS .columns[.col-50[ A flexible guide to developing sites small and large. Is more style guide than rigid framework. At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns. There are five types of categories: - Base - Layout - Module - State - Theme ].col-50[  .center[ [http://smacss.com/](http://smacss.com/) ] ]] --- layout: true # SMACSS --- .columns[.col-60[ Base rules are the defaults. They are almost exclusively single element selectors, attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Layout rules divide the page into sections. Layouts hold one or more modules together. Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on. State rules are ways to describe how our modules or layouts will look when in a particular state. Theme rules are similar to state rules in that they describe how modules or layouts might look. ].col-40[  ]] --- ##Base ``` css body { background-color: #fff; color: #222; } p, ul, li { padding: 0; } a, a:hover { color: blue; } input[type=text] { font-family: Georgia; background-color: #fff; color: #000; } ``` --- ##Layout .columns[.col-40[ ``` css #content { width: 640px; float: left; } #sidebar { width: 320px; float: right; } #header { width: 100%; padding: 10px; overflow: hidden; } ``` ].col-60[  ]] --- ##Modules .columns[.col-40[ ``` css .pagination { border-top: 1px solid #ccc; margin-top: 1em; } .pagination > ul { list-style-type: none; } .pagination > ul > li { display: block; float: left; } ``` ].col-60[  ]] --- ##States .columns[.col-40[ ``` css .pagination > li.active{ background-color: blue; color: white; } .accordion .collapsed { display: none; } .something .is-selected { font-weight: bold; } ``` ].col-60[  ]] --- ##Naming conventions .columns[.col-40[ ###Base h1, h2, a, p ###Layout .l-* _(.l-header, .l-sidebar)_ ###Module .< name > _(.button, .news-item)_ ###Sub-module .< name >-< type > _(.button-secondary, .news-item-primary)_ ###State .is-* _(.is-active, .is-disabled, .is-open)_ ].col-60[ ```html <aside class="l-sidebar"> <section class="news-list"> <article class="news-item-primary"> <h1>The main article of the year</h1> <a href="#" class="button">Go to article</a> </article> <article class="news-item"> <h1>Something happened</h1> <a href="#" class="button">Go to article</a> <a href="#" class="button button-secondary">Hide this article</a> </article> <article class="news-item"> <h1>You can't hide me!</h1> <a href="#" class="button">Go to article</a> <a href="#" class="button button-secondary is-disabled">Hide this article</a> </article> </section> </aside> ``` ]] --- ##Project structure (using SCSS) .img-wrap-90[  ] --- layout: false #BEM BEM stands for “Block”, “Element”, “Modifier”. It is a front-end methodology: a new way of thinking when developing Web interfaces. ###BLOCK A block is an independent entity, a “building block” of an application. A block can be either simple or compound (containing other blocks). ###ELEMENT An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block that they belong to. ``` css .site-header { ... } /* block */ .site-header__logo { ... } /* element */ .site-header__logo—xmas { ... } /* modifier */ .site-header__navigation { ... } /* element */ ``` [http://bem.info/](http://bem.info/) --- #BEM .columns[.col-60[  ].col-40[  ]] --- #Practice time! [SMACSS practice](practice/index.html) --- #LESS, SASS (SCSS) Less and SASS are a CSS pre-processors, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. .columns[.col-50[  .center[ [http://lesscss.org/](http://lesscss.org/) ] ].col-50[  .center[ [http://sass-lang.com/](http://sass-lang.com/) ] ]] --- layout:true #SCSS features --- ## variables and nestings .columns[.col-60[ ``` scss /* Variables */ $base: #000; $navLinkColor: $base; /* Navigation */ .footer-nav { ul { margin: 0; padding: 0; li { display: inline-block; a { border-color: $base; color: $navLinkColor; &:hover { color: lighten($navLinkColor, 20%); } } } } } ``` ].col-40[ ``` css .footer-nav ul { margin: 0; padding: 0; } .footer-nav ul li { display: inline-block; } .footer-nav ul li a { border-color: #000; color: #000; } .footer-nav ul li a:hover { color: #333; } ``` ]] --- ## import and operators .columns[.col-60[ _reset.scss: ``` scss html, body, p, h1, h2, h3 { margin: 0; padding: 0; } ``` style.scss: ``` scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; } .userpic { float: left; width: 600px / 960px * 100%; } ``` ].col-40[ style.css: ``` css html, body, p, h1, h2, h3 { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; } .userpic { float: left; width: 62.5%; } ``` ]] --- ## mixins and inheritance .columns.small[.col-50[ ``` scss @mixin box-shadow($shadow) { -webkit-box-shadow: $shadow; box-shadow: $shadow; } .box { @include box-shadow(0 5px 10px 0 #000); color: white; } .message { border: 1px solid #ccc; padding: 10px; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } ``` ].col-50[ ``` css .box { -webkit-box-shadow: 0 5px 10px 0 #000; box-shadow: 0 5px 10px 0 #000; color: white; } .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ``` ]] --- layout: false #SASS + Compass .columns[.col-50[ Compass makes working with Sass even easier. - Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes. - Provides basic mixins for common typography patterns. - Provides basic mixins for common styling patterns. ].col-50[  .center[ [http://compass-style.org/](http://compass-style.org/) ] ]] --- #Jade, Haml Haml and Jade are based on one primary principle: markup should be beautiful. It accelerates and simplifies template creation. .columns[.col-50[  .center[ [http://haml.info/](http://haml.info/ "http://haml.info/") ] ].col-50[  .center[ [http://jade-lang.com/](http://jade-lang.com/) ] ]] --- #Jade Example .columns[.col-50[ ``` jade doctype html html(lang="en") head title= pageTitle body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple templating language. ``` ].col-50[ ``` html <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>You are amazing</p> <p>Jade is a terse and simple templating language.</p> </div> </body> </html> ``` ]] --- #Compilers GUI apps - [CodeKit](http://incident57.com/codekit/) (Paid) _Mac_ - [Compass.app](http://compass.handlino.com/) (Paid, Open Source) _Mac, Win, Linux_ - [Ghostlab](http://www.vanamco.com/ghostlab/) (Paid) _Mac, Win_ - [Hammer](http://hammerformac.com/) (Paid) _Mac_ - [Koala](http://koala-app.com/) (Open Source) _Mac, Win, Linux_ - [LiveReload](http://livereload.com/) (Paid, Open Source) _Mac, Win_ - [Prepros](https://prepros.io/) (Paid) _Mac, Win, Linux_ - [Scout](http://mhs.github.io/scout-app/) (Open Source) _Mac, Win_ --- #Bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. .center[ .img-wrap-70[] [http://getbootstrap.com/](http://getbootstrap.com/) ] --- #Other popular css frameworks .columns[.col-30[ <br/><br/> ].col-70[ **Foundation**. _The most advanced responsive front-end framework in the world._ [http://foundation.zurb.com/](http://foundation.zurb.com/) ]] .columns[.col-30[ <br/><br/> ].col-70[ **Primer**. _The CSS toolkit and guidelines that power GitHub._ [http://primercss.io/](http://primercss.io/) ]] .columns[.col-30[ <br/><br/> ].col-70[ **Materialize**. _A modern responsive front-end framework based on Material Design_ [http://materializecss.com/](http://materializecss.com/) ]] --- # Task Runners .columns[.col-30[  [http://gruntjs.com/](http://gruntjs.com/) ].col-30[  [http://gulpjs.com/](http://gulpjs.com/) ].col-30[  [http://webpack.github.io/](http://webpack.github.io/) ]] --- #Grunt project example  --- # Related resources - SMACSS book [https://smacss.com/book/](https://smacss.com/book/) - Bootstrap. Getting started [http://getbootstrap.com/getting-started/](http://getbootstrap.com/getting-started/) - Grunt for People Who Think Things Like Grunt are Weird and Hard [https://24ways.org/2013/grunt-is-not-weird-and-hard/](https://24ways.org/2013/grunt-is-not-weird-and-hard/)
