Les Frameworks CSS

Introduction

• Ne pas réinventer la roue
• Harmonisation des développements ( norme )
• Système de grille prédéfini
• Plusieurs solutions : Bootstrap, Foundation, Knacss, Röcssti, Inuitcss.

Twitter Bootstrap 3

CSS

• Mobile First ( min-width )
• Container: .container or .container-fluid
• Grid:
  • Line: .row
  • Case: col-{BP}-{NB}
  • BP: xs, sm, md, lg
  • NB: 1 à 12
  • Postion: col-{BP}-offset-{NB}, col-{BP}-push-{NB} , col-{BP}-pull-{NB}
• Responsive utilities: .hidden-{BP}, .visible-{BP}-{DISPLAY} ( Tips: BP peut valoir "print" )
• Action: default,primary, success,info,warning,danger,link
• Button: .btn
  • type: .btn-{ACTION}
  • display: .btn-block
  • size: .btn-{BP}
• Image: img-responsive,img-rounded,img-circle,img-thumbnail
• Forms:
  • elements: .form-group,.form-control
  • direction: .form-horizontal,form-inline
  • states: .has-success,has-warning,has-error
  • sizing: .input-{BP}
• Helpers: text-{ACTION}, bg-{ACTION},pull-left ,pull-right, center-block,clearfix
• Table

Components

• Glyphicons: <span class="glyphicon glyphicon-star-empty"></span>
• Nav , Navbar
• Alert: .alert .alert-{ACTION}
• Badges
• Progress bar
• Panel
• Well
• ...

Bootstrap 4

• Dropped IE8 and iOS 6 support.
• Added official support for Android v5.0 Lollipop’s Browser and WebView.
• Switched from Less to SCSS for our source CSS files.
• Switched from px to rem as our primary CSS unit.
• Global font-size increased from 14px to 16px.
• Added a new grid tier for ~480px and below.
• Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
• Dropped the Glyphicons icon font
• Refactored nearly all components to use more unnested classes instead of children selectors.
• simpler navbar, real progress bar

Aller plus loin

• FontAwesome
• Template : Boilerplate
• préprocesseur: SASS, Jade
• postprocesseur PostCSS : autoprefixer, postcss-sorting, cssnano, font-magician,short

Exercices

• créer une ligne de 4 cases de 3 colonnes contenant les numéros de 1 à 4
• Inverser les numéros de 1 à 4 en modifiant uniquement les classes
• créer une ligne de 12 cases. La taille des cases change de 4 à 1 en agrandissant la page.
• Intégrer une charte graphique : large , medium , small, extra-small
• Récrire l'intégration en jade
• Modifier le SASS de bootstrap et générer sa propre version
• Récrire l'intégration en bootstrap 4
• Récrire l'intégration sans Bootstrap ( en SASS + JADE + postCSS )