Zero to Hero. CSS Frameworks. Zero to Hero. - Boris Fritscher 1 / 26. Bootstrap (

Size: px

Start display at page:

Download "Zero to Hero. CSS Frameworks. Zero to Hero. - Boris Fritscher 1 / 26. Bootstrap ("

Brett Cannon
5 years ago
Views:

643-1-1 Projet de technologies WEB de présentation Zero to Hero Part 1: From blank page to deployed website Tools and git CSS Frameworks don't reinvent the wheel use best practices get reusable

com/) One framework, every device CSS Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

1 Projet de technologies WEB de présentation Zero to Hero Part 1: From blank page to deployed website Tools and git CSS Frameworks don't reinvent the wheel use best practices get reusable components design oriented Bootstrap ( One framework, every device CSS Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Components Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Javascript Bring Bootstrap's components to life with over a dozen custom jquery plugins. Easily include them all, or one by one. Or native javascript if using Boostrap.native. Note: Alternatives: Bootstrap, Foundation, Material Design libraries, UIKit,... zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 1 / 26

2 Grid system <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href=" rel="stylesheet" type="text/css" /> <title>jumbotron Template for Bootstrap</title> </head> <body> <h1>classic Bootstrap</h1> <div class="container-fluid"> <div class="row"> <div class="col-4">col-4 <div class="col-4">col-4 <div class="col-4">col-4 <div class="row"> <div class="offset-2 col-8">offset-2 col-8 <div class="row"> <div class="col-md-4">col-md-4 <div class="col-md-4">col-md-4 <div class="col-md-4">col-md-4 - Boris Fritscher 2 / 26

3 <div class="col-md-4">col-md-4 <h1>new Auto Layout</h1> <div class="container-fluid"> <div class="row"> <div class="col">col <div class="col">col <div class="row"> <div class="col">col <div class="col">col <div class="col">col <div class="col">col <div class="col">col <div class="row"> <div class="col">col <div class="col">col <div class="col-md-8">col-md-8 <div class="col">col <div class="row"> <div class="col">col <div class="col">col <div class="col-md-auto">col-md-auto <div class="col">col </body> </html> ( <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>jumbotron Template for Bootstrap</title>  <link rel="stylesheet" href=" integrity="sha384-wskhasgfghywdcbwn70/dfybj47jz9qbsmid/irn3ewghxqfzcsftd1lzcfmhktb" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" datatarget="#navbarsexampledefault" aria-controls="navbarsexampledefault" ariaexpanded="false" aria-label="toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsexampledefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">link</a> - Boris Fritscher 3 / 26

4 </li> <li class="nav-item"> <a class="nav-link disabled" href="#">disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href=" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">action</a> <a class="dropdown-item" href="#">another action</a> <a class="dropdown-item" href="#">something else here</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="search" arialabel="search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">search</button> </form> </nav> <main role="main">  <div class="jumbotron"> <div class="container"> <h1 class="display-3">hello, world!</h1> <p>this is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">learn more» </a></p> <div class="container">  <div class="row"> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-secondary" href="#" role="button">view details» </a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-secondary" href="#" role="button">view details» </a></p> <div class="col-md-4"> <h2>heading</h2> <p>donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-secondary" href="#" role="button">view details» </a></p> <hr>  zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 4 / 26

</main> <footer class="container"> <p> Company 2017-2018</p> </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.

3/umd/popper.min.js" integrity="sha384-zmp7rvo3miykv+2+9j3uj46jbk0wlauadn689acwoqbbjisnjak/l8wvcwpipm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.

5 </main> <footer class="container"> <p> Company </p> </footer> <script src=" integrity="sha384- q8i/x+965dzo0rt7abk41jstqiaqvgrvzpbzo5smxkp4yfrvh+8abtte1pi6jizo" crossorigin="anonymous"></script> <script src=" integrity="sha384-zmp7rvo3miykv+2+9j3uj46jbk0wlauadn689acwoqbbjisnjak/l8wvcwpipm49" crossorigin="anonymous"></script> <script src=" integrity="sha384-smhykdladwkxon1emn1qk/hfnucbvrzyymz4qppea6sjb/ptj0euyqp0mk8ck+5t" crossorigin="anonymous"></script> </body> </html> Design Why Writing Web Design On Paper Will Help Easier and more accessible (draw everywhere) Chaos can be helpful (break the rules) It saves time & energy (more iterations) Easier to make notes and alterations on paper Focus on the big picture, not getting lost in details Boris Fritscher 5 / 26

http://designbeep.com/2012/05/17/33-great-examples-of-web-design-sketches/ Typography Ty pog ra phy mat ters be cause it helps con serve reader at ten tion.

6 Typography Ty pog ra phy mat ters be cause it helps con serve reader at ten tion. Good ty pog ra phy can help your reader de vote less at ten tion to the me chan ics of read ing and more at ten tion to your mes sage Which is more readable? - Boris Fritscher 6 / 26

A high way sign has a spe cial pur pose: it s meant to be read quickly, from long dis tances, at odd an gles, and un der vari able light ing and weather con di tions. http://practicaltypography.

7 A high way sign has a spe cial pur pose: it s meant to be read quickly, from long dis tances, at odd an gles, and un der vari able light ing and weather con di tions. Same font different balance Underlining Absolutely not Un der lin ing is an other dreary type writer habit. Type writ ers had no bold or italic styling. So the only way to em pha size text was to back up the car riage and type un der scores be neath the text. It was a workaround for short com ings in type writer technology. Nei ther your word proces sor nor your web browser suf fers from these short com ings. If you feel the urge to un der line, use bold or italic in stead. In spe cial sit u a tions, like head ings, you can also con sider us ing ALL CAPS, SMALL CAPS, or a change in point size. ( What is typography? zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 7 / 26

8 Design Principles Visual Perception And The Principles Of Gestalt The Key Ideas Behind Gestalt Theory The whole is other than the sum of the parts. Kurt Koffka Similarity Elements that share similar characteristics are perceived as more related than elements that don t share those characteristics.![] (/mnt/c/users/bfrit/documents/github/web-slides/slides/images/gestalt-similarity-2.png) Common regions / Enclosure Elements are perceived as part of a group if they are located within the same closed region. zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 8 / 26

![] (/mnt/c/users/bfrit/documents/github/web-slides/slides/images/gestalt-enclosure-2.png)![] (/mnt/c/users/bfrit/documents/github/web-slides/slides/images/gestalt-enclosure-3.

9 ![] (/mnt/c/users/bfrit/documents/github/web-slides/slides/images/gestalt-enclosure-2.png)![] (/mnt/c/users/bfrit/documents/github/web-slides/slides/images/gestalt-enclosure-3.png) Proximity Objects that are closer together are perceived as more related than objects that are further apart.![] (/mnt/c/users/bfrit/documents/github/web-slides/slides/images/gestalt-proximity-2.png) Closure When seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern. Continuation Elements arranged on a line or curve are perceived as more related than elements not on zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 9 / 26

10 Elements arranged on a line or curve are perceived as more related than elements not on the line or curve. Connection Elements that are visually connected are perceived as more related than elements with no connection.![](/mnt/c/users/bfrit/documents/github/webslides/slides/images/gestalt-connection-2.png) Concepts applied to web composition zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 10 / 26

11 Beyond Frameworks, Design Guidelines Google: Material Design ( Microsoft: Fluent Design System ( Tooling Editors Exists in all form: from notepad.exe to full IDE: WebStorm ( - Boris Fritscher 11 / 26

In between: Notepad++ (https://notepad-plus-plus.org/), Visual Studio Code (https://code.visualstudio.

io/), Eclipse Che (http://www.eclipse.org/che/) Browser integrated (F12): Chrome DevTools (https://developer.

12 In between: Notepad++ ( Visual Studio Code ( Atom ( Online editors: StackBlitz ( Cloud9 ( Eclipse Che ( Browser integrated (F12): Chrome DevTools ( - Boris Fritscher 12 / 26

output, that is used as input to another program CSS preprocessor: Less, Sass, Stylus,.

13 Preprocessors A preprocessor is a program that processes its input data to produce output, that is used as input to another program CSS preprocessor: Less, Sass, Stylus,... JS preprocessor: CoffeeScript, TypeScript, ECMAScript 2015 (ES6) (Traceur and Babel),... HTML preprocessor: Jade, Haml, Handlebars,... Script loader: Require, Webpack,... Test framework: Jasmine, Mocha, Qunit,... zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 13 / 26

14 Node.js & npm Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. It allows to run JavaScript outside of the browser npm is a package manager for JavaScript bundled with Node.js and can run some tasks. WebPack Webpack is an open-source JavaScript module bundler. Webpack takes modules with dependencies and generates static assets representing those modules. zero_to_hero_tools_and_git.md@4fe9fa9 - Boris Fritscher 14 / 26

Zero to Hero. CSS Frameworks

Zero to Hero. CSS Frameworks 643-1-1 Projet de technologies WEB de présentation Zero to Hero Part 1: From blank page to deployed website Tools and git CSS Frameworks don't reinvent the wheel use best practices get reusable components