Autopergamene

Accueil Retour à En averse d'encre

Nouveau design test

Pendant les travaux l’exposition continue. On ne se moque pas je bidouille encore.
Si vous avez des remarques ou que ça bug chez vous dites-le moi.

Pour ceux que ça intéresse après mon article sur les préprocesseurs, le code du design est sur Github. Si vous avez toujours codé en CSS et vous demandez après mon article à quoi ressemble le code d’un design en SASS, vous pourrez y voir comment j’ai sectionné le design, employé les placeholders pour optimiser le code, passé mes images en data64 pour réduire les requêtes HTTP et l’usage et la puissance des variables au sein du code. Il y aussi des exemples de comment avec Susy et deux/trois mixins personnels j’ai pu aisément et rapidement ajouter une touche de responsive à la plupart des blocs.
Les ms([nombre]) que vous verrez dans le code correspondent au plugin modular scale de Compass (la boîte à outils de SASS) qui permet de calculer tous vos paddings/margins/font-size en tant que multiples de votre taille de police de base ce qui permet d’ajouter un semblant de rythme vertical à votre design.

body
  @extend %fontSerif // étend les blocs auxquels j'ai attribué une police sérif
  +font-smoothing(antialised) // Mixin ajout les préfixes propriétaires à la propriété font-smoothing
  background: $baseColor inline-image('crisp_small.jpg') // Utilise la couleur de base du design comme fond et aplatit l'image dans la CSS en data64
  color: $bodyFontColor // Utilise la couleur de base du texte

div#page
  @extend %container // étend le style de base d'un conteneur à colonnes
  @extend %reset // étend le reset des styles de wefrag
  margin: auto
  max-width: 75%
  padding: 0 ms(0) // Calcule le padding selon la taille de base du texte
  +to($tablet)
    max-width: 100% // Change la largeur du corps selon la largeur de la fenêtre
  +from-to($tablet, $wider)
    max-width: 95%

Le code principal du design est donc dans le dossier sass qui ensuite compile la feuille de style dans le dossier css.

Publié le : 10/29/12
Accueil Retour à En averse d'encre