out through the winter throat

out through the winter throat le blog de Anahkiasen.

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.

11 commentaires pour “Nouveau design test”

  1. EXpMiNi dit :

    Pas un peu grosse la police ?

  2. KaB dit :

    Le gros block “cet article a été posté blabla” n’est pas assez discrêt.

  3. ng-aniki dit :

    Les polices m’apparaissent pixelisées, sur chrome, dernière version.

  4. Darkstryder dit :

    C’est sympa mais les animations sur “out through the winter throat” et le titre de l’article ont du lag. Le scroll dans la page est par contre fluide.

    Comme ExpMiNi, je verrais bien globalement 1 ou 2 points de moins sur la taille de toutes les polices.

  5. Anahkiasen dit :

    J’ai (un petit peu) réduit la police et minimisé les blocs de metadata.
    Pour les polices t’es sur quel OS ? Le ClearType de Windows a une sale tendance à relisser certaines polices déjà lissées, donc faut voir.
    Pour la lenteur des animateur ça dépend du navigateur, de ton système. Firefox par exemple a tendance à ramer plus sur les animations que Chrome. T’es sur quel OS/navigateur ?

    Pour ceux que ça intéresse après mon article sur les préprocesseurs, le code du design est sur Github. Ça peut être intéressant de voir comment on peut sectionner un design, étendre des placeholders etc si vous avez jamais touché à LESS ou SASS.

  6. Bloodoctrine dit :

    Dans l’encart gris, le texte ne s’affiche pas en roll over pour les mots de la première ligne comme “Webdesign”.
    Pour les autres il s’affiche d’ailleurs bien décalé.

    ps : je suis sur chrome

  7. Anahkiasen dit :

    Fait CTRL+F5/Command+Maj+R comme un bourrin, j’ai corrigé un bug du genre mais le cache de Wordpress est du genre persistant. Dis-moi si c’est mieux.

  8. Bloodoctrine dit :

    Cette réactivité me laisse sans voix. (c’est bon)

  9. Anahkiasen dit :

    J’ai ajouté des bouts de responsive design çà et là mais en fait le code des blogs Wefrag est tellement vieux qu’il n’y a même pas les balises meta pour que ça s’active sur mobile.
    J’ai aussi forcé l’accéleration 3D sur les blocs qui ont des animations, dites-moi si ça rame moins.

    EDIT : Bon j’ai semi-traffiqué mon blog en ajoutant un bout de JS qui ajoute les balises meta requises pour que le design mobile s’enclenche. C’est un peu malhônnete mais vu à quel point le code des blogs est dans l’an 40 j’ai pas trop d’autre choix.

  10. Mousse dit :

    Et j’ai même pas un merci. Connard. Je te hais. Meurt.

  11. Anahkiasen dit :

    Merci connard, je te hais <3

Laisser un commentaire

Si vous avez un compte sur WeFrag, connectez-vous pour publier un commentaire.

Vous pouvez, entre autres, utiliser les tags XHTML suivant :
<a href="" title="">...</a>,<b>...</b>,<blockquote cite="">...</blockquote>,<code>...</code>,<i>...</i>