@benevolar/b-css
Version:
small css framework
165 lines (156 loc) • 14.8 kB
HTML
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="../css/b-css.min.css" />
</head>
<body>
<div class="body" >
<h4 class="title-section">FLEX ROW</h4>
<div class="flex row">
<section>
<h4>LOREM 1</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 2</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 3</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
</div>
<h4 class="title-section">FLEX ROW REVERSE</h4>
<div class="flex row reverse">
<section>
<h4>LOREM 1</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 2</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 3</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
</div>
<h4 class="title-section">FLEX COL</h4>
<div class="flex col">
<section>
<h4>LOREM 1</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 2</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 3</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
</div>
<h4 class="title-section">FLEX COL REVERSE</h4>
<div class="flex col reverse">
<section>
<h4>LOREM 1</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 2</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
<section>
<h4>LOREM 3</h4>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
</section>
</div>
<h4 class="title-section">FLEX JC-BETWEEN</h4>
<div class="flex jc-between">
<section>
<h4>LOREM 1</h4>
</section>
<section>
<h4>LOREM 2</h4>
</section>
<section>
<h4>LOREM 3</h4>
</section>
</div>
<h4 class="title-section">FLEX JC-AROUND</h4>
<div class="flex jc-around">
<section>
<h4>LOREM 1</h4>
</section>
<section>
<h4>LOREM 2</h4>
</section>
<section>
<h4>LOREM 3</h4>
</section>
</div>
<h4 class="title-section">FLEX AI-BASELINE</h4>
<div class="flex ai-baseline">
<section>
<h4>LOREM 1</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
<section>
<h4>LOREM 2</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
<section>
<h4>LOREM 3</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
</div>
<h4 class="title-section">FLEX WITHOUT BASELINE</h4>
<div class="flex">
<section>
<h4>LOREM 1</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
<section>
<h4>LOREM 2</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
<section>
<h4>LOREM 3</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
</div>
<h4 class="title-section">FLEX</h4>
<div class="flex col reverse ac-between ji-end">
<section class="flex row reverse">
<h6>1.0 H6 TITLE</h6>
<div>1.1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod asperiores velit praesentium itaque dolore, impedit nulla id. Sed eius maxime illo sequi voluptatem consectetur iure hic? Fuga quibusdam enim qui.</div>
<div>1.2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod asperiores velit praesentium itaque dolore, impedit nulla id. Sed eius maxime illo sequi voluptatem consectetur iure hic? Fuga quibusdam enim qui.</div>
<div>1.3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod asperiores velit praesentium itaque dolore, impedit nulla id. Sed eius maxime illo sequi voluptatem consectetur iure hic? Fuga quibusdam enim qui.</div>
<div>1.4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod asperiores velit praesentium itaque dolore, impedit nulla id. Sed eius maxime illo sequi voluptatem consectetur iure hic? Fuga quibusdam enim qui.</div>
<div>1.5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod asperiores velit praesentium itaque dolore, impedit nulla id. Sed eius maxime illo sequi voluptatem consectetur iure hic? Fuga quibusdam enim qui.</div>
</section>
<section>
<h4>LOREM 2</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
<section>
<h4>LOREM 3</h4>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea possimus dolore provident magni repellendus omnis, nisi ducimus, suscipit aliquid enim aliquam vel delectus soluta. Harum animi eos suscipit delectus non.
</section>
</div>
</div>
</body>
</html>