# Styles ### Les bases pour styler vos applications ![FOCUS](./images/logo-focus.png)
# Sommaire * Rappel sur les bases du css * Quelques infos sur SASS * Get Material Design Lite * Quelques bonnes pratiques pour styler vos projets

Balises sémantiques

                    

Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing <b>elit</b>. Vestibulum at molestie risus. Etiam nec est congue, <em>accumsan</em> sapien quis, viverra justo. Class <u>aptent</u> taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam in malesuada felis. Sed <i>laoreet</i> velit velit, eget dictum nibh suscipit vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at molestie risus. Etiam nec est congue, accumsan sapien quis, viverra justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam in malesuada felis. Sed laoreet velit velit, eget dictum nibh suscipit vel.

Importez vos styles

  • au sein des pages HTML
  • dans des feuilles de style
  • de manière conditionnelle

Au sein des pages

  • Import de feuille de style
  • Embebed style error_outline
  • Inline style error_outline
                        
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application de démo</title>
    <link rel="icon" type="image/png" href="focus.png" />
    <link rel="stylesheet" href="./styles/mes-styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <style>
        body {
            padding:0;
            margin:0;
        }
    </style>
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="screen-ie7.css" /><![endif]-->
</head>
<body style="border:1px solid red;">
    // le contenu de la page
</body>
</html>
                        
                    

Au sein des feuilles de style

                        
@import url('/Content/header.css');

footer {
    background-color:green;
}
                        
                    

Styles conditionnels

// Conditional-CSS syntax examples
[if IE] - Used if the browser is IE
[if ! Opera] - Used if the browser is not Opera
[if IE 5] - Used if browser is IE 5
[if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc)
[if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6
                            
                                
[if IE].container {
	height: 100%;
	width: 100%;
	text-align: center;
	line-height: 2em;

	[if gte IE 7]background: url('ie7.png') no-repeat center center;
	[if lte IE 6]background: url('ie.jpg') no-repeat center center;
}
                                
                            
http://www.conditional-css.com/usage

Sélecteur CSS

                        

Les carottes sont cuites.

Les carottes sont cuites.
                        
p .carotte {
    color: orange;
    text-decoration: underline;
    font-style: italic;
}
                        
                    

Les carottes sont cuites.

Les carottes sont cuites.

Elémentaires

Pattern Meaning CSS level
warning * Any element 2
E An element of type E 1
E.warning An E element whose class attribute is "warning" 1
E#myId An E element with ID equal to "myId" 1
                        

Paragraphe

Paragraphe bleu

                        
p {
    color: green;
}
p#bleu {
    color: blue;
}
                        
                    

Combinaisons

Pattern Meaning CSS level
E F An F element descendant of an E element 1
E > F An F element child of an E element 2
E + F An F element immediately preceded by an E element 2
E ~ F An F element preceded by an E element 3
                        
Hey !

Les carottes sont cuites

                        
div > span {
    color: red;
}
                        
                    

Sur attributs

Pattern Meaning CSS level
E[foo] an E element with a "foo" attribute 2
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" 2
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" 2
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" 3
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" 3
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" 2
                        
table tbody tr td[align="center"] {
    text-align:center;
}
                        
                    

Pseudo-classes (1/3)

Expressions permettant classifier les éléments sur des caractéristiques qui ne peuvent pas être déduites du DOM
Pattern Meaning CSS level
E:root an E element, root of the document 3
E:nth-child(n) an E element, the n-th child of its parent 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one 3
E:nth-of-type(n) an E element, the n-th sibling of its type 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one 3

Pseudo-classes (2/3)

Pattern Meaning CSS level
E:first-child an E element, first child of its parent 2
E:last-child an E element, last child of its parent 3
E:first-of-type an E element, first sibling of its type 3
E:last-of-type an E element, last sibling of its type 3
E:only-child an E element, only child of its parent 3
E:only-of-type an E element, only sibling of its type 3
E:empty an E element that has no children (including text nodes) 3

Pseudo-classes (3/3)

Pattern Meaning CSS level
E:link an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) 1
E:visited an E element during certain user actions 1
E:active an E element during certain user actions 1 and 2
E:hover an E element during certain user actions 1 and 2
E:focus an E element during certain user actions 1 and 2
E:target an E element being the target of the referring URI 3
E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) 2
E:enabled a user interface element E which is enabled or disabled 3
E:disabled a user interface element E which is enabled or disabled 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) 3
E:not(s) an E element that does not match simple selector s 3

Pseudo-éléments

Pseudo-éléments : expressions offrant l’accès à de l’information, du contenu, qui n’est pas directement accessible via le DOM
Pattern Meaning CSS level
E::first-line the first formatted line of an E element 1
E::first-letter the first formatted letter of an E element 1
E::before generated content before an E element 2
E::after generated content after an E element 2

Priorité des sélecteurs

Précédence

A égal à 1 si l'attribut "style" est défini, 0 sinon
B nombre d'ID utilisés dans le sélecteur
C nombre de classes et de pseudo-classes dans le sélecteur
D nombre de nom d'éléments et pseudo-éléments dans le sélecteur
Sélecteur A B C D
* {} 0 0 0 0
li {} 0 0 0 1
li:first-line {} 0 0 0 2
ul li {} 0 0 0 2
ul ol+li {} 0 0 0 3
h1 + *[rel="up"] {} 0 0 1 1
ul ol li.red {} 0 0 1 3
li.red.level {} 0 0 2 1
#x34y {} 0 1 0 0
style="color:red" {} 1 0 0 0

Priorité

En cas de conflit dans les styles :
  1. !important
  2. Priorité / Précédence
  3. Ordre textuel
# Priorité Les feuilles de style sont interprétées dans l'ordre suivant : 1. Feuille de style du navigateur 2. Feuille de style de l’utilisateur 3. Feuille de style du site internet
# Ordre d'évaluation 1. Feuille de style du navigateur 2. Feuille de style de l’utilisateur 3. Feuille de style du site internet 4. `!important` du site internet 5. `!important` de l’utilisateur
# Box model ![Box model](./images/box-model.png)
# Focus sur des notions importantes du CSS

position dans le flux

Définir le positionnement d'un élément par rapport :
  • aux limites de la zone d'affichage
  • aux limites de son conteneur
  • au flux HTML
                        
E {
    position: static | relative | absolute | fixed;
}
                        
                    

{position: static}

C'est la valeur par défaut affectée à chaque éléments du flux HTML.
L’élément est affiché selon l’ordre du flux et de conteneur.
http://codepen.io/anon/pen/PPyXeG

{position: relative}

Affiche l’élément par rapport à son conteneur parent.
L’élément est affiché selon l’ordre du flux et de conteneur.
http://codepen.io/Tommass/pen/PPyVEQ

{position: absolute}

L'élement est retiré du flux.
Il se positionne :
  • Au niveau du conteneur parent ayant une position relative ou absolute
  • A defaut, par rapport au conteneur principal : le navigateur
Exemple d'utilisation :
  • footer
  • template de pages avec colonnes
http://codepen.io/Tommass/pen/QjZopW

{position: fixed}

  • Le contenu est retiré du flux
  • Il se positionne toujours par rapport à la partie visible du navigateur
  • Sa position est fixe à l'écran, le scroll n’agit pas sur l’élément qui reste toujours au même endroit
Exemple d'utilisation
  • Header fixe (comme sur facebook, twitter, focus, ...)
  • Footer fixe
http://codepen.io/Tommass/pen/GpYeZX

Floating




  • Empile les éléments de droite à gauche ou de gauche à droite
  • Permet aux éléments proches de venir s’empiler autour
  • Ne prend pas de place dans son conteneur parent
  • Influence le contenu
  • http://codepen.io/Tommass/pen/EVdJdr
    warning
    • N’est pas considéré par le conteneur
    • Est considéré par ses frangins...
    http://codepen.io/Tommass/pen/XmxQQO



  • Peut-être utilisé pour le template d'une page

  • http://codepen.io/Tommass/pen/ZbqZNq

    error_outline  Nouvelle propriété display:flex introduite par CSS3.
    error_outline  Plutôt utiliser position:absolute.

    CSS3 Flexbox

    Nouvelle propriété CSS 3 !
                            
    E {
        display:flex;
    }
                            
                        

    CSS3 Flexbox

    Permet dans de jouer plus facilement avec
    • le positionnement
    • l’orientation
    • l’ordre d’affichage
    Sans avoir à toucher au code HTML
    Remplace la combinaison des propriétés
    • position
    • display
    • float

    principales propriétés


    Un lien bien sympa !
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Responsive plus simple !

    https://developer.mozilla.org/fr/docs/Web/Guide/CSS/Flexible_boxes

    Can i use it ?

    YES ! YES ! YES !
    Utilisez cette propriété dans vos style CSS
    Surchargez les propriétés pour les vieux navigateurs si vous avez cette contrainte.
    Can i use flexbox ? http://caniuse.com/#feat=flexbox

    Quand l'utiliser ?

    • Structure d'une page
    • Onglets
    • Menus
    • Centrer un élément verticalement dans son container

    Exercice 1

    Utilisez les propriétés flexbox pour afficher les menus comme ci-dessous.
    exo flexbox

    L'exercice : http://codepen.io/Tommass/pen/wGbMxp

    Attention, vous n'avez pas le droit de toucher aux balises HTML.

    Exercice 2

    Utilisez les propriétés flexbox pour centrer le point comme ci-dessous.
    exo flexbox

    L'exercice : http://codepen.io/Tommass/pen/zqQryg

    Attention, vous n'avez pas le droit de toucher aux balises HTML.

    CSS3 Grid Layout

    Coming soon...
    Les CSS3 Flexbox permettent de positionner plus facilement les élements par rapport à leur conteneur.

    Les CSS3 Grid Layout vont nous offrir tous les outils pour faciliter la construction des layout de page, et simplifier la mise en place de comportement responsive.

    Ils remplaceront les grilles pour le moment utilisées et fournies par nos librairies (MDL).

    Font

                            
    @font-face {
        font-family: 'OpenSansRegular';
        src: url('../font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
        	url('../font/OpenSans-Regular-webfont.woff') format('woff'),
            url('../font/OpenSans-Regular-webfont.ttf') format('truetype'),
            url('../font/OpenSans-Regular-webfont.svg#OpenSansLight') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    html {
        font-family: 'OpenSansRegular', verdana, arial;
    }
                            
                        
    Est-ce que mon navigateur le supporte ? http://caniuse.com/#feat=fontface
    De la doc : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
    Merci Google !
    https://www.google.com/fonts
    Import de librairie d'icons https://www.google.com/design/icons/
    Veillez à toujours livrer votre projet avec les fonts "embedded" dans votre application.

    Media query

    L’attribut média permet de préciser le media sur lequel s’applique la CSS


    HTML

                            
    
                            
                        

    Feuille de style

                            
    @import url('/Content/header.css') screen;
    
    @media screen {
    	p.test {
    		font-family: verdana,sans-serif;
    		font-size: 14px;
    	}
    }
                            
                        
    Media type Description
    AllUsed for all media type devices (default)
    auralUsed for speech and sound synthesizers
    brailleUsed for braille tactile feedback devices
    embossedUsed for paged braille printers
    handheldUsed for small or handheld devices
    printUsed for printers
    projectionUsed for projected presentations, like slides
    screenUsed for computer screens
    ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals
    tvUsed for television-type devices

    Exemple

    Media screen

    Media print



    La balise media est utilisée pour définir des conditions

    media="screen, 3d-glasses, print and resolution > 90dpi“

    Dans la balise HEAD


    Dans la feuille de style

    @import url('/css/print-color.css') print and (color);
    
    @media screen and (orientation: portrait) { … }

    Plus concrètement de vos projets

    @media screen and (min-width: 400px) and (max-width: 700px) {
    
        /* le header est plus petit */
        header {
            height: 50px;
        }
    
        /* le footer disparait */
        footer {
            display:none;
        }
    
    }

    Plus d'infos ?

    https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries
    # Améliorations CSS3

    Text wrapping

                            
    div {
        text-overflow: ellipsis;
    }
                            
                        

    Opacité

                            
    footer {
        opacity: 0.3
    }
    
    header {
        rgba(255, 0, 0, 0.75)
    }
                            
                        

    Saturation & luminosité

                            
    header {
        hsla(95, 98%, 68%, 0, 19)
    }
                            
                        

    bordure arrondies

                            
    div {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
                            
                        

    Dégradé de couleur

                            
    div {
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
                            
                        

    Ombres

                            
    div {
        text-shadow: 2px 2px #ff0000;
        box-shadow: inset 0px 3px 3px 0px #dcdfe1
    }
                            
                        
    Generateur http://www.cssmatic.com/box-shadow

    Arrières plans

                            
    div {
        background: url('https://i.chzbgr.com/full/8359208704/h660F24F2/');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 0% 50%;
    }
                            
                        
    http://codepen.io/Tommass/pen/BoGaba

    Colonnes

                            
    .newspaper {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
                            
                        
    http://codepen.io/Tommass/pen/GpwRYL

    Traitement des images

                            
    div {
        background: /* top, transparent red, faked with gradient */
        linear-gradient(
        to bottom,
        rgba(53, 58, 97, 0.64),
        rgba(0,0,0, 0.64)
        ),
        url('https://i.chzbgr.com/full/8359208704/h660F24F2/');
    }
                            
                        
    http://codepen.io/Tommass/pen/epQYrg

    calc

    La fonction CSS calc() peut être utilisée à n'importe quel endroit ou une longueur, frequency, angle, time, number, ou integer est nécessaire. Grâce à calc(), il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.
                            
    .banniere {
        position: absolute;
        left: 40px;
        width: 90%; /* valeur pour les navigateurs ne supportant pas calc() */
        width: calc(100% - 80px);
        border: solid black 1px;
    }
                            
                        
    https://developer.mozilla.org/fr/docs/Web/CSS/calc

    Filtres

    La propriété filter permet de réaliser des effets de flou, modifier la teinte, ...
                            
    .mon-image {
        filter: blur(3px) grayscale(0.7);
    }
                            
                        
    http://html5-demos.appspot.com/static/css/filters/index.html

    Unités

    Unit Description
    %percentage
    ininch
    cmcentimeter
    mmmillimeter
    em1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
    exone ex is the x-height of a font (x-height is usually about half the font-size)
    ptpoint (1 pt is the same as 1/72 inch)
    pcpica (1 pc is the same as 12 points)
    pxpixels (a dot on the computer screen)
    vw% of screen width
    vh% of screen height

    Animations



                            
    header {
        animation:animation-de-tom 5s;
        -webkit-animation:animation-de-tom 5s;
    }
    
    @keyframes animation-de-tom {
        0% 	{ background:red; }
        10% { background:yellow; }
        20% { background:blue; }
        30% { background:green; }
        40% { background:violet; }
        50% { background:cyan; }
        60% { background:magenta; }
        70% { background:purple; }
        80% { background:orange; }
        90% { background:white; }
        100% { background:red; }
    }
                            
                        
    http://codepen.io/Tommass/pen/epQmpe

    Exemple complet avec flexbox, media query et animations : http://codepen.io/Tommass/pen/ZbmYWa

    Les animations doivent servir à jouer des transitions entre les états de votre SPA.

    FOCUS va produire une bonne partie des transitions induites par les composants. Certaines IHM métiers nécessiteront des transitions personnalisées

    Des librairies existent pour vous faciliter la vie : https://daneden.github.io/animate.css/

    Transformation




                                
    .bouton {
        /* définit l'origine de la transformation: ici le centre du bouton */
    	transform-origin:0% 0%;
    	-ms-transform-origin:0% 0%;
    	-webkit-transform-origin:0% 0%;
    	-moz-transform-origin:0% 0%;
    	-o-transform-origin:0% 0%;
    
        /* la transformation : une rotation de 90 degrés */
        transform:rotate(-90deg);
        -ms-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg);
        -moz-transform:rotate(-90deg);
        -o-transform:rotate(-90deg);
    }
                                
                            


    Dans le cadre des projets FOCUS, les transformations seront peu utilisées.
    Combinées aux animations, elles peuvent être utilisées pour générer des éléments graphiques dynamiques.

    Par exemple, les spinners : http://tobiasahlin.com/spinkit/.

    Ne pas réinventer la roue : utilisez des librairies CSS du marché.

    Can i use ?

    http://caniuse.com
    # Beson de doc ? ## La doc de Mozilla Developer Network https://developer.mozilla.org/fr/docs/Web/CSS ## sur Google `mdn` + `[mots clés]`

    Material Design



    Des spécifications pour la conception d'interfaces


    https://www.google.com/design/spec/material-design/introduction.html



    spec md


    Concrètement dans mon projet ?

    • Des règles de conception à respecter.
    • Une libraire graphique et quelques bonnes pratiques

    http://www.getmdl.io/


    Mais pourquoi ?

    Parce que cela présente de nombreux intérêts pour nous...
    • interfaces modernes dans l'ère du temps
    • inclue des usages très répandus
    • bénéfices des études d'un géant du web à moindre coût
    • applications d'un SI homogènes


    Et aussi...

    • remplaçant de bootsrap
    • libraire graphique légère
    • composants Material tout prêts
    • librairie d'icones



    https://www.google.com/design/icons/

    SASS

    Syntactically Awesome Style Sheets

    A quoi ca sert ? / Comment ça marche ?

    • Problème de maintenabilité avec le CSS
    • Structure le style d'une application
    • Pas de variables en CSS ?
    • Industrialisation du style / réutilisation
    • On peut écrire du CSS directement
    • Transpile vers le CSS

    Quelques fonctionnalités sympas

    Les variables $

    SASS

                                    
    $font-stack:    Helvetica, sans-serif;
    $primary-color: #333;
    
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }
                                    
                                

    CSS

                                        
    body {
      font: 100% Helvetica, sans-serif;
      color: #333;
    }
                                        
                                    

    Le nesting

    SASS

                                    
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    
      li { display: inline-block; }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
                                    
                                

    CSS

                                        
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    nav li {
      display: inline-block;
    }
    
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
                                        
                                    

    Les mixins

    SASS

                                    
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }
    
    .box { @include border-radius(10px); }
                                    
                                

    CSS

                                        
    .box {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
    }
                                        
                                    

    Possibilité de split en plusieurs fichiers

    On importe un fichier avec @import 'monFichier';

    • Meilleure séparation
    • Réutilisation de certains éléments (variables, mixins, ...)
    • Utilisation de librairies externes
    • Industrialisation dans les projets
    • Code CSS orienté COMPOSANT

    Ce qu'il faut retenir

    On travaille avec une logique variables + composants et on ne se prive pas du nesting et des variables. On écrit pas de fichiers CSS.
    La doc

    Best practices

    on se fait un fichier _variables.scss

    Avec ses couleurs, des polices et autres paramètres globaux...

    On a une logique composant

    • On a un fichier par composant (dans le même dossier que le composant)
    • On utlise des selecteurs data-project, pas de class, id
    • On utilise le nesting et le &
                                
    [data-focus='select'] {
        select {
            border-top:0;
            border-left:0;
            border-right: 0;
            border-bottom: 1px solid $select-border-color;
            padding: 3px 3px 3px 0;
            color: $select-text-color;
        }
        ...
    }
                                
                            

    On utilise au maximum les propriétés CSS récentes

    On gère au cas par cas les problèmes spécifiques avec des styles conditionnels, on présente au client un mode dégradé graphiquement pour les vieux browsers...

    On ne surcharge jamais directement les librairies

    • On rend le code moins lisibles, moins robuste aux changements de versions , ...
    • On utilise un sélecteur un précis relatif au data-project='my-component'.

    on affiche une page pour les navigateurs non supportés

    On utilise au maximum les flexbox

    Parce que c'est de la bombe !

    Un problème ? Une question ?

    Venez nous voir