00:00:00

Bootstrap / Grunt

Notes

Bootstrap

  • Mise en forme du contenu
  • Mise en page avec la grille adaptative de Bootstrap : pour des sites Responsive Web Design
  • Composants Bootstrap

Less

  • variables
  • mixins
  • heritages
  • pseudo-classes
  • importation de fichier

Notes

Framework Bootstrap

Notes

Sommaire

  • Mise en forme CSS
  • La grille bootstrap
  • Composants

Notes

Mise en forme CSS

getbootstrap.com/css

  • Typography (alignement, blockquotes, lists)
  • Tables
  • Formulaires
  • Boutons
  • Images

Notes

La grille bootstrap

  • Le principe
  • colonnes imbriquées
  • offset
  • ordre des colonnes

Notes

Composants

  • Glyphicons
  • Menus déroulants
  • Navigation
  • Breadcrumb, pagination, label, badges
  • Media (groupe d'image + texte)
  • Vignettes

Notes

this is notes

LessCSS

Notes

Sommaire

  • variables
  • imbrication de code
  • mixins
  • importation de fichier

Notes

Compiler LESS avec GRUNT

    Installer nodejs sur ubuntu

    sudo apt-get update
    sudo apt-get install nodejs npm

    Installer Grunt

    npm install -g grunt-cli
    

    Créer Gruntfile.js

    Créer un fichier Gruntfile.js dans le répertoire racine du projet. Ensuite, copier et coller l'exemple de configuration de la page suivante. Il définit (là où l'on peut lire des commentaires) : quels sont les fichiers à observer, les chemins sources des fichiers LESS, les chemins de destination des fichiers CSS

Notes

    
    module.exports = function(grunt) {
    require('jit-grunt')(grunt);
      grunt.initConfig({
        less: {
          development: {
              options: {
                  compress: true,
                  yuicompress: true,
                  optimization: 2
              },
              files: {
                "css/main.css": "less/main.less" // destination file and source file
              }
          }
        },
        watch: {
          styles: {
            files: ['less/**/*.less'], // which files to watch
            tasks: ['less'],
            options: {
              nospawn: true
            }
          }
        }
      });
      grunt.registerTask('default', ['less', 'watch']);
    };
    

Configurer le « package file »

Si vous n'avez pas de fichier package.json dans le répertoire source de votre projet, il faut en créer un :

$ cd votre_repertoire_racine
$ npm init

Start Grunt

Une fois que vous avez un fichier valide package.json, exécutez : npm install grunt grunt-contrib-less grunt-contrib-watch jit-grunt --save-dev Cela va installer les packages recquis et les ajouter à package.json.

$ grunt

Pendant que Grunt s'exécute, les fichiers LESS seront donc automatiquement compilés pour produire des fichiers CSS.

Notes

Les bases

variables

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

Résultat :

#header {
  color: #6c94be;
}

Un gain de temps inestimable pour l'intégration front-end

Notes

imbrication de code

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Notes

Mixins ou fonctions

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

Résultat :

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

Notes

Import de fichier

@import (option) "fichier";

Les options

  • reference: importe en tant que fichier less sans l'inclure dans la sortie css. Très utilisé pour les fichiers de fonctions less.
  • inline: inclue le fichier sans le compiler
  • less: traite le fichier en tant que less, quelque soit l'extension
  • css: traite le fichier en tant que css
  • once: n'importe le fichier qu'une seule fois (comportement par défaut)
  • multiple: importe le fichier plusieurs fois

Notes