Commit efd98055 authored by Anne Cavalier's avatar Anne Cavalier

Merge branch '#69-layout-utils' into develop

parents f839c047 a7e9e2a3
Changelog
====================================================================
v0.4
--------------------------------------------------------------------
core/helpers :
- définition d'une variable spécifique pour les paddings applicables aux éléments de class .container
- suppression du padding-top par défaut sur l'élément .main-container
v0.3
--------------------------------------------------------------------
......
......@@ -10,7 +10,6 @@ Mise à disposition de classes utilitaires pour les layouts ou le texte.
`.container` : centre un block dans son conteneur, lui ajoute un padding à gauche et à droite.
`.main-container` : classe à placer en surplus de container ci-dessus et servant à dégager un espace au-dessus du bloc principal de contenu.
## text-classes
......
......@@ -94,3 +94,14 @@ Deux maps déterminent les seuils principaux des media-queries et les largeurs m
Des variables permettent de standardiser les pas de grille utilisables notamment pour les margins et les paddings. Par défaut, ```$spacer``` (espacement standard), ```$spacer-x``` (horizontal) et ```$spacer-y``` (vertical) valent 1em.
On peut leur associer des opérateurs comme la division ou la multiplication (ex. ```padding-bottom: $spacer / 2;```) en veillant à faire suivre et précéder ces opérateurs d’une espace.
#### Container spacers
La variable `$container-spacer` définit le padding horizontal des blocs `.container`.
Par défault, la valeur de cette variable est la moitié de `$spacer-x`
```scss
$container-spacer: ($spacer-x / 2) !default;
```
// Settings
// -------------------------------
// ------------------------------------------------------------------
// Configurations
// Couleurs
// Bordures
// Texte
// Layout
// -------------------------------
// ------------------------------------------------------------------
// Configurations
// =========================================================
// ==================================================================
$enable-old-ie : false !default;
$enable-fontface : false !default;
......@@ -21,10 +21,11 @@ $cursor-disabled : not-allowed !default;
// Couleurs par défaut
// =========================================================
// ==================================================================
// Niveaux de gris et couleurs principales
// ---------------------------------------
// ------------------------------------------------------------------
// palette des gris
$gray-base: #3C434E !default;
$gray: $gray-base;
......@@ -95,7 +96,7 @@ $pre-scrollable-max-height: 20em !default;
// Bordures et coins arondis
// =========================================================
// ==================================================================
$border-width: 1px !default;
$border-radius: 4px !default;
......@@ -107,10 +108,10 @@ $hr-border-width: $border-width !default;
// Texte
// =========================================================
// ==================================================================
// Font-stacks
// -----------
// ------------------------------------------------------------------
$font-family-sans-serif : Arial, sans-serif !default;
$font-family-serif : Georgia, "Times New Roman", Times, serif !default;
......@@ -122,7 +123,7 @@ $monospace: $font-family-monospace !default;
// Fondamentaux typographiques
// ---------------------------
// ------------------------------------------------------------------
$font-family-base: $sans-serif !default;
......@@ -165,10 +166,10 @@ $lead-font-weight : normal !default;
// Breakpoints principaux, largeur des containeurs, spacers
// =========================================================
// ==================================================================
// breakpoints map
// ----------------
// ------------------------------------------------------------------
$grid-breakpoints: (
zero: 0,
......@@ -181,7 +182,7 @@ $grid-breakpoints: (
// Containers map
// --------------
// ------------------------------------------------------------------
$container-max-widths: (
medium: 44em,
......@@ -191,8 +192,14 @@ $container-max-widths: (
// Spacers
// -------
// ------------------------------------------------------------------
$spacer: 1em !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
// container spacers
// ------------------------------------------------------------------
$container-spacer: ($spacer-x / 2) !default;
......@@ -13,10 +13,6 @@
@include center-block();
@include clearfix();
padding-left: ($spacer-x / 2);
padding-right: ($spacer-x / 2);
}
.main-container {
padding-top: ($spacer-y * 2)
padding-left: $container-spacer;
padding-right: $container-spacer;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment