RWD - Notes livre - ch 4 - RWD avec le thème Aurora

Sam Richard (aka Snugug) a créé le thème Aurora, qui intègre Sass et Compass.

http://snugug.github.io/Aurora/ est la doc officielle et sur drupal c'est à https://www.drupal.org/project/aurora
Liste d'autres modules pour compléter Aurora à http://snugug.github.io/Aurora/modules/
Les sous-thèmes Aurora sont générés via http://yeoman.io/ (il faut avoir installé node.js -> voir https://www.drupal.org/project/aurora)

Installer Aurora

Avoir un Sass et Compass fonctionnels, puis installer le compass-aurora : gem install compass-aurora et dl le thème à https://www.drupal.org/project/aurora

Le module Magic est requis, et il est conseillé d'ajouter le module HTML 5 Tools, voir il est requis selon snugug (https://www.drupal.org/project/html5_tools).

Création du 1er sous-thème  "compass create YOURTHEMENAME -r aurora --using aurora/flavour"

Parmi les 3 versions: Corona (hyper basique), Polaris (SMACSS), et Aurora (est celui par défaut), on choisit Aurora, puis on installe ses dépendances (faire cd YOURTHEMENAME avant le bundle install):
compass create YOURTHEMENAME -r aurora --using aurora
bundle install  (en cas d'erreur "not found", tenter gem install bundler)

Configurer et lancer Compass

Tout d'abord, ouvrir le config.rb de son sous-thème pour y voir/modif les paramètres par défaut. On va décommenter des lignes, de facon à ce que son navigateur puisse résoudre les liens "CSS/fichiers Sass:
# In development, we can turn on the debug_info
# to use with FireSass or Chrome Web Inspector.
# Uncomment:
debug = true

On doit maintenant lancer Compass - etre sur qu'on est dans le dossier de son thème de travail et faire: bundle exec compass watch
On peux aussi faire compass watch mais bundle exec s'assure qu'il utilise les versions gems spécifiées pour Aurora.

Note: se créer un alias alias    becw='bundle exec compass watch'

Vérification de l'install

Faire un changement bien visible, du genre dans sass/partials/design/_design.scss  et ensuite, regarder ce que qu'a affiché dans le terminal Compass (et dans son navigateur).
body {
  background: red;
}

On devrait y voir kk chose comme "Change detected at 10:34:47 to: partials/design/_design.scss" et "overwrite stylesheets/style.css"

Petite présentation Aurora

Aurora est assez simple, nous allons présenter kk goodies qui ne ressemblent pas à CSS:

• Singularity est un système de grille Sassy
• Breakpoint simplifie l'écriture des requetes media (Sass)
• Color Schemer tookkit de couleur: génère/modif des couleurs
• Sassy Buttons boutons CSS3, simples mais beaux créés en kk lignes Sass
• Toolkit est le couteau-suisse fourre-tout
• Compass Normalize pour utiliser normalize.css sans avoir à le dl séparemment

Structure des fichiers Sass (Aurora)

Un 1er ex de thème simple

Aurora a les piles de polices suivantes:
$times-new-roman: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
$times:           Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
$georgia:         Georgia, "Times New Roman", "DejaVu Serif", serif;
$verdana:         Verdana, Tahoma, "DejaVu Sans", sans-serif;
$tahoma:          Tahoma, Verdana, "DejaVu Sans", sans-serif;
$helvetica:       Helvetica, Arial, "Nimbus Sans L", sans-serif;
$arial:           Arial, Helvetica, "Nimbus Sans L", sans-serif;

Variables de couleur ($georgia pourpre) => ouvrir sass/partials/_variables.scss
$font-body: $georgia;
$form-font-family: $arial;
$color-turnip: #D900BC;
$color-lightgray: #AAA;
$color-darkgray: #333;

Ex de formulaire, ouvrir sass/partials/global/_forms.scss
textarea {
  height: 10em;
}
input,
button,
select,
label,
textarea {
  font-family: $form-font-family;
}
label {
  display: block;
  margin-top: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  display: block;
  border: 1px solid $color-turnip;
  font-size: 16px;
  margin-top: 10px;
  padding: 5px;
  &:focus {
    border: 1px solid $black;
  }
}

En général, ajouts dans  _type.scss (typo), _extendables.scss (classes) et _defaults.scss. Mais ici, on va sauter directement à la section header pour cette petite démo.

Ouvrir sass/partials/design/_design.scss (devrait etre vierge) on va n'y mettre qu'une seule ligne: @import 'header';
Créer le fichier sass/partials/design/_header.scss avec:

#header {
  background: $black;
  width: 100%;
  overflow: hidden;
  h2 {
    margin: 0;.
    padding: 0;
    float: left;
    font-size: 30px;
    color: white;
    font-weight: normal;
    margin: 10px;
  }
  ul {
    float: right;
    margin: 17px 10px 10px;
    li {
      display: inline;
      padding: 0 10px;
      a {
        color: $white;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 16px;
        font-family: $form-font-family;
        &:hover {
          color: $color-turnip;
        }
      }
    }
  }
}

A partir de maintenant, créer un fichier dans  /sass/partials/design pour chaque section majeure de votre site.

Le coté responsive grace à Singularity et Breakpoint