Le quadrillage de ligne de base fluide (Fluid Baseline Grid Redux) est un cadre frontal CSS qui développe le Fluid Baseline Grid de Josh Hopkins & 40 Horse. Le système FBG original a été construit avec des normes typographiques à l'esprit et combine les principes des dispositions en colonnes fluides, des grilles de base et du design responsif mobile-first dans un cadre indépendant de la résolution et agnostique en termes d'appareils. Il est doté d'une normalisation CSS, de magnifiques normes typographiques, de bugs corrigés, d'incohérences courantes dans les navigateurs et d'une convivialité améliorée. Vous pouvez enfin avoir le beurre et l'argent du beurre, tout en créant des sites web géniaux. Cette version Redux s'appuie sur le projet original et le porte sur le framework CSS LESS.

Les caractéristiques en un coup d'œil :

• Conversion du système pour utiliser le processeur LESS
• quadrillage de ligne de base fixé à la taille par défaut du navigateur de 16px de base avec 150% (24px) de hauteur de ligne pour améliorer la lisibilité et l'apparence du texte. Toutes les valeurs sont déclarées dans les EMs pour la scalabilité.
• Mixins de générateur de grille - J'ai créé quelques mixins LESS pour vous aider à créer des présentations basées sur des grilles pour votre balisage sémantique.
  • Grille de proportion dorée - crée des grilles imbriquées en utilisant le nomre d'or ou proportion dorée.
  • Grille de séquence Fibonacci - mixin pour générer des largeurs de colonnes basées sur un nombre de la séquence de Fibonacci.
  • J'ai créé deux mixins génériques de génération de colonnes - l'un basé sur les mesures EM et l'autre sur les pourcentages.
• Points d'interruption suggérés dans EMs basés sur la largeur de ligne optimale pour la taille de texte par défaut, afin que nous puissions ajouter des colonnes à la mise en page lorsque plus d'espace est disponible.
  • jusqu'à 36 ems : 1 colonne par défaut
  • 36 ems : 2 colonnes
  • 58.5 ems : 3 colonnes
  • 94.5 ems : 4 colonnes (texte 20px/30px)
  • 117 ems : 5 colonnes (texte 24px/36px)

Licence: Le code et le design sont tombés dans le domaine public et sont libres d'utilisation sous Unlicense. Les polices d'icônes incluses sont couvertes par des accords séparés.