15-437 Client Side Frameworks

Client Side Frameworks Thierry Sans

We are going to talk about today Responsive Design Twitter
Bootstrap Dynamic CSS Less Dynamic Javascript Modules Require.js

[tip] start a development server without Django $ cd my_web_directory!
$ python -m SimpleHTTPServer

Twitter Bootstrap    Responsive Design Framework

Responsive Design ➡ when the web application UI automatically adapts
to the display of the device • phone • phablet • tablet • computer • tv

Twitter Bootstrap CSS and Javascript Framework ๏ Writing CSS is
hard ๏ Writing CSS for different devices is even harder ✓ A reactive framework has pre-deﬁned UI elements that are reactive by design (menu, tables, buttons, dialog and so on) http://getbootstrap.com/

Dimensions App Testing Responsive Designs ➡ Test and visualize how
the web application is rendered on a different device http://www.dimensionsapp.com/

Grid System in Bootstrap <div class="row">! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>!
<div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>! </div>! <div class="row">! <div class="col-md-8">.col-md-8</div>! <div class="col-md-4">.col-md-4</div>! </div>! <div class="row">! <div class="col-md-4">.col-md-4</div>! <div class="col-md-4">.col-md-4</div>! <div class="col-md-4">.col-md-4</div>! </div>! <div class="row">! <div class="col-md-6">.col-md-6</div>! <div class="col-md-6">.col-md-6</div>! </div>! example from http://getbootstrap.com/css/#grid

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id=“my-nav-bar">! <div class="container">! <div class="navbar-header">!
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">! …! </button>! <a class="navbar-brand" href="#">15-437 Spring'13</a>! </div>! <div class="navbar-collapse collapse">! <ul class="nav navbar-nav">! <li><a href="#description">Description</a></li>! ... ! <li class="dropdown">! <a href="#" class="dropdown-toggle" data-toggle=“dropdown"> ... <b class="caret"></b></a>! <ul class="dropdown-menu">! <li><a href="https://piazza.com/qatar.cmu/fall2013/15437/home">Piazza</a></li>! ... ! </ul>! </li>! </ul>! <ul class="nav navbar-nav navbar-right">! <li><a href="http://qatar.cmu.edu"><img src=“...” alt=“...” id="cmuq_logo"></a></li>! </ul>! </div>! </div>! </div> Navigation Bar in Bootstrap Home Menu items Dropdown menu Logo

Contextual Navigation in Bootstrap Bootsrap Scroll Spy • Highlight the
menu item currently viewed • Updated when scrolling <body data-spy="scroll" data-target="#my-nav-bar">! ! <div class="navbar navbar-default navbar-fixed-top"  role="navigation" id="my-nav-bar">! ...

… and many other Bootstrap features • Carousel • Modals
• Breadcrumbs • Progress Bars

Other responsive frameworks • Foundation • Skeleton • HTML5 Boilerplate
• Gumby … and many others

Pros and Cons Rapid Development but sites tend to look
the same (customization requires to do CSS) Responsive Design but design elements are embedded in the HTML (violation of the separation principle)

Less    Dynamic CSS Framework

Less Dynamic CSS ✓ Create CSS building block and reuse
them ➡ Add programming features to CSS http://lesscss.org/

Using Less and Bootstrap together Requires to use the source
code of bootstrap (Less deﬁnitions) $ git clone https://github.com/twbs/bootstrap.git  Feedback: ✓ Works well for simple things (such as grid and buttons) ๏ More complex components needs some Javascript tweaking  (such as navigation bars)

Other dynamic CSS frameworks • Sass • Stylus

Require.js  Dynamic Javascript Module Framework

Require.js  Dynamic module loader ✓ Load the javascript code that
you need and when you need it ✓ Work with large scale Javascript code ➡ Structure the javascript code as modules and   avoid naming conﬂict between code from different modules http://requirejs.org/

Deﬁne an AMD module define(['jquery'], function($){! "use strict";! ! var
helper = function(){! console.log("welcome to module 1");! };! ! var say_hello = function(e){! helper();! e.html("hello from module 1!");! };! ! return{! hello: say_hello! };! ! }); use external modules export speciﬁc functions

Use AMD modules var init = function(){! requirejs.config({! baseUrl: "",!
paths: { ! ‘jquery': 'lib/jquery/jquery-1.10.2.min',! 'mod': 'js/modules'! },! shim: {! 'mod/module1' : ['jquery'],! 'mod/module2' : ['jquery']! }! });! ! require(['jquery','mod/module1','mod/module2'], function($,mod1,mod2) { ! mod2.hello($("#result"));! });! };! deﬁne module dependencies use modules paths to modules require.js conﬁguration

15-437 Client Side Frameworks

15-437 Client Side Frameworks

ThierrySans

More Decks by ThierrySans

Other Decks in Education

Featured

Transcript

Client Side Frameworks Thierry Sans

We are going to talk about today Responsive Design Twitter

[tip] start a development server without Django $ cd my_web_directory!

Twitter Bootstrap    Responsive Design Framework

Responsive Design ➡ when the web application UI automatically adapts

Twitter Bootstrap CSS and Javascript Framework ๏ Writing CSS is

Dimensions App Testing Responsive Designs ➡ Test and visualize how

Grid System in Bootstrap <div class="row">! <div class="col-md-1">.col-md-1</div>! <div class="col-md-1">.col-md-1</div>!

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id=“my-nav-bar">! <div class="container">! <div class="navbar-header">!

Contextual Navigation in Bootstrap Bootsrap Scroll Spy • Highlight the

… and many other Bootstrap features • Carousel • Modals

Other responsive frameworks • Foundation • Skeleton • HTML5 Boilerplate

Pros and Cons Rapid Development but sites tend to look

Less    Dynamic CSS Framework

Less Dynamic CSS ✓ Create CSS building block and reuse

Using Less and Bootstrap together Requires to use the source

Other dynamic CSS frameworks • Sass • Stylus

Require.js  Dynamic Javascript Module Framework

Require.js  Dynamic module loader ✓ Load the javascript code that

Deﬁne an AMD module define(['jquery'], function($){! "use strict";! ! var

Use AMD modules var init = function(){! requirejs.config({! baseUrl: "",!