Les conteneurs

Conçu pour contenir des éléments afin limiter leur largeur à une taille raisonnable pour l'affichage.

Body, Header, Main, Section et Article

Tous ces éléments ont une largeur de 100%. Le body à une hauteur minimale de la hauteur de l'écran.

Body et Main

Le <body> du <body> à une hauteur minimum de la taille de l'affichage et les dépassements horizontaux sont cachés.
Le <header> du <body> ne contient aucunes marges externes et internes.
Le <main> du <body> ne contient aucunes marges externes et internes.
Le <footer> du <body> contient une marge externe supérieur et des marges internes.
Le <header> et le <footer> du <main> ne contiennent aucunes marges externes, seulement des marges internes

Section et Article

Les <section> et <article> ont un rythme vertical automatique et différent suivant leur positionnement dans le code. Par exemple un <article> dans une <section> a une marge supérieure plus petite et inversement. Si un de ces éléments est le premier enfant, alors celui-ci aura une marge supérieur nulle.

Responsive et adaptatif

Sass Swing fournit deux classes responsive .container et .container-fluid pour limiter la largeur d'affichage d'un block en fonction de la largeur d'affichage. Ceux-ci sont automatiquement centrer à l'écran. La classe .container adaptera automatiquement les marges externe, tandis que .container-fluid occupera 100% de la largeur et adaptera automatiquement les marges internes. Ces conteneurs ne pourront jamais dépasser la taille maximum de la surface ou de l'élément d'affichage. Vous pouvez imbriquer ceux-ci entre eux.

Be flow, be flex

Sass Swing fournit en supplément la classe .flow-container permet quant à elle de limiter la largeur à 80ch.
cf : Typographie pour plus d'informations

Sass Swing met à disposition entre autres quelques classes utilitaires pour la gestion de block Flex tel que :
.flex (le mode par défaut est colonne), .flex--row pour passer en mode ligne.
Le comportement des classes suivantes : .flex--center-all, .flex--center, .flex--v-center, .flex--right, .flex--top, .flex--bottom .flex--space-around, .flex--space-evenly et .flex--space-between varient en fonction du mode colonne ou ligne. Voir Utilitaires agencement pour plus d'informations.

Element 1

Element 2

Element 1

Element 2

Element 1

Element 2

Element 1

Element 2

<div class="flex">
	<div>
		Element 1
	</div>
	<div>
		Element 2
	</div>
</div>

<div class="flex flex--center-all">
	<div>
		Element 1
	</div>
	<div>
		Element 2
	</div>
</div>

<div class="flex flex--row flex--bottom flex--right">
	<div>
		Element 1
	</div>
	<div>
		Element 2
	</div>
</div>

<div class="flex flex--row flex--v-center flex--space-around">
	<div>
		Element 1
	</div>
	<div>
		Element 2
	</div>
</div>