1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
====== Thème web des sites du domaine ubuntu-fr.org ======
===== Thème Ubuntu =====
Nous appuierons notre travail sur le thème Ubuntu officiel.
* https://code.launchpad.net/ubuntu-brand-guidelines
Ce thème officiel est basé sur normalize (ce que nous reprendrons aussi) et une mise en page en grille de 12 colonnes non élastiques (ce que nous ne voulons pas sauf pour les grands écrans).
Récupérer les fichiers du thème officiel :
bzr branch lp:ubuntu-brand-guidelines/guidelines-assets
===== SASS, COMPASS et ZenGrid =====
* Site web de SASS : http://sass-lang.com/
* Site web de COMPASS : http://compass-style.org/
* Site web de ZenGrid : http://zengrids.com/
**SASS** est pré-processeur CSS pensé comme une amélioration de CSS3 ajoutant des règles imbriquées, des variables, des fonctions, de l'héritage, et bien plus. Le tout est ensuite utilisé pour générer du CSS3 standard bien formaté.
**COMPASS** est un framework pour SASS apportant diverses fonctions prédéfinies.
**ZenGrid** est une extension pour SASS apportant un système de grilles de présentation.
Pour installer tout ça :
sudo apt-get install ruby
sudo gem update
sudo gem install sass compass zen-grids
Pendant le développement, pour générer automatiquement les CSS à chaque changement de fichiers :
compass watch
Pour passer en production avec des fichiers CSS compressés :
Éditer le fichier config.rb et dé-commenter la ligne : #environment = :production
Effacer tous les CSS déjà créé : compass clean
Régénérer les CSS avec la commande : compass compile
Cela génère les fichiers CSS qu'il nous faut, compressés et agrégés.
===== SMACSS =====
* Site web de SMACSS : http://smacss.com/
SMACSS est un guide d'écriture et d'organisation des différents fichiers .CSS afin de s'y retrouver plus facilement dans les différents éléments de mise en page.
5 catégories de fichiers :
Base - les styles de base
Layout - la mise en page des différents éléments ou groupes d'éléments
Module - les différents blocs réutilisables
State - description de l'apparence en fonction d'un contexte particulier (taille d'écran, page particulière, état d'un élément,…)
Theme - Ce qui est purement du thème (couleurs, fonds, etc…)
Nos fichiers de travail .scss seront dans un de ces types
===== Tests =====
Les fichiers .html sont uniquement là pour tester les éléments de base css afin d'avoir un rendu rapide de nos modifications.
|