Card title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.
Les couleurs
Notre thème CSS met à disposition plusieurs classes pour faciliter l'utilisation des couleurs. Pour les textes, il suffit d'ajouter la classe text-{color} et pour les backgrounds bg-{color}.
Primary-500
Primary-400
Primary-300
Primary-200
Primary-100
Neutral-500
Neutral-200
Neutral-100
Neutral-0
Markup html
<div class="bg-primary500">
<span class="text-primary500">Primary-500</span>
</div>
<div class="bg-primary400">
<span class="text-primary400">Primary-400</span>
</div>
<div class="bg-primary300">
<span class="text-primary300">Primary-300</span>
</div>
<div class="bg-primary200">
<span class="text-primary200">Primary-200</span>
</div>
<div class="bg-primary100">
<span class="text-primary100">Primary-100</span>
</div>
<div class="bg-neutral500">
<span class="text-neutral500">Neutral-500</span>
</div>
<div class="bg-neutral200">
<span class="text-neutral200">Neutral-200</span>
</div>
<div class="bg-neutral100">
<span class="text-neutral100">Neutral-100</span>
</div>
<div class="bg-neutral0">
<span class="text-neutral0">Neutral-0</span>
</div>
Les Typographies
Titre 1
Titre 2
Titre 2 souligné
Titre 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis numquam ipsum temporibus libero ad sed odio odit laudantium quod beatae. Labore minus recusandae excepturi illo, dolorem dolores nostrum. Assumenda, repellat?
Markup html
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h2 class="title-underline">Titre 2 souligné</h2>
<h3>Titre 3</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
numquam ipsum temporibus libero ad sed odio odit laudantium quod
beatae. Labore minus recusandae excepturi illo, dolorem dolores
nostrum. Assumenda, repellat?
</p>
La mise en page
Nous avons mis en place un système de grid au sein de notre thème CSS, il existe aussi plusieurs classes afin de définir plus simplement la mise en page des éléments HTML.
La grid
Notre grid est composé de 12 colonnes et prend en charge les colonnes responsives grâce aux classes col-{none | sm | md | lg}-{force}.
col-3
col-4
col-2 & col-md-7
col-3
Markup HTML
<div class="row">
<div class="col-3">
col-3
</div>
<div class="col-4">
col-4
</div>
<div class="col-2 col-md-7">
col-2 & col-md-7
</div>
<div class="col-3">
col-3
</div>
</div>
Les placements
Il existe plusieurs classes pour faciliter la mise en page des éléments HTML au sein d'une row. Vous y retrouverez plusieurs classes correspondantes à la majorité des propriétés de placement des flex-box : justify-{value}, justify-self-{value}, align-{value} et align-self-{value}.
justify-center
justify-end
justify-start
justify-between
justify-between
Markup HTML
<div class="row justify-center">
<div class="col-3">
justify-center
</div>
</div>
<div class="row justify-end">
<div class="col-3">
justify-end
</div>
</div>
<div class="row justify-start">
<div class="col-3">
justify-start
</div>
</div>
<div class="row justify-around">
<div class="col-3 bg-primary100">
justify-between
</div>
<div class="col-3 bg-primary100">
justify-between
</div>
</div>
Les marges internes et externes
Nous avons mis en place des classes afin de gérer la marge interne et externe des éléments plus simplement, à l'aide des classes CSS m-{direction}-{force} (prise en charge de mx-{force}, my-{force} et m-{force}) pour gérer la marge externe et les classes p-{direction}-{force} (prise en charge de px-{force}, py-{force} et p-{force}) pour spécifier la marge interne d'un élément (veillez à bien être sur un élément display block).
m-right-2
mx-6
m-2
p-5
Markup HTML
<div class="row ">
<div class="col-2 m-right-2">m-right-2</div>
<div class="col-2 mx-6">mx-6</div>
<div class="col-2 m-2">m-2</div>
<div class="col-2 p-5">p-5</div>
</div>
Les icônes
Notre thème CSS permet d'intégrer les icônes plus facilement à l'aide de classes. Pour ajouter une icône, il suffit de placer une div avec la classe icon-{icon_name}. Avant d'intégrer une icône, vous devez placer les SVG de vos icônes dans le dossier /assets/icons de votre site web. icon_name correspond au nom du SVG présent dans le dossier. Vous pouvez ajouter des attributs à la div pour modifier la couleur, les contours, ainsi que les dimensions.
Markup HTML
<div class="icon-star" fill="#e88011" height="10"></div>
<div class="icon-star" stroke="#e88011" fill="white" height="20"></div>
<div class="icon-star" fill="#e88011" height="30"></div>
<div class="icon-star" stroke="#e88011" fill="white" height="40"></div>
Les inputs et boutons
Les boutons
Nous avons créé deux types de boutons : ceux sans icône et ceux avec, ils utilisent notre système d'icône présenté précédemment.
Markup HTML
<div class="row justify-between my-5">
<a href="" class="button button__primary">Primary</a>
<a href="" class="button button__secondary">Secondary</a>
<a href="" class="button">Default</a>
</div>
<div class="row justify-between my-5">
<a href="" class="button button__primary button__icon">
<div class="icon-send icon" fill="white"></div>
Primary
</a>
<a href="" class="button button__secondary button__icon">
<div class="icon-send icon" fill="black"></div>
Secondary
</a>
<a href="" class="button button__icon">
<div class="icon-send icon" fill="black"></div>
Default
</a>
</div>
Les inputs
Markup HTML
<div class="input-container">
<input class="input" type="text" placeholder="Input sans icône" />
</div>
<div class="input-container">
<div class="icon-send icon" fill="black" height="21"></div>
<input class="input" type="text" placeholder="Input icone gauche" />
</div>
<div class="input-container">
<input class="input" type="text" placeholder="Input icone droite" />
<div class="icon-send icon" fill="black" height="21"></div>
</div>
<div class="input-container">
<input class="input" type="text" placeholder="Double input" />
<div class="input-double-separator"></div>
<input class="input" type="text" placeholder="Double input" />
</div>
<div class="input-container">
<textarea
class="input"
placeholder="Votre message"
rows="5"
></textarea>
</div>
Les cartes
Card Title
Lorem, ipsum dolor
Card title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam unde sunt reiciendis quia fugiat tempore possimus quibusdam, et vitae aperiam nesciunt porro, maxime eum quasi cum dolores officia soluta reprehenderit.
Markup HTML
<!-- Variante 1 -->
<article class="card">
<header>
<h3>Card title</h3>
</header>
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam, quae.
</p>
</main>
<footer>
<a href="" class="button button__primary">Primary</a>
</footer>
</article>
<!-- Variante 2 -->
<article class="card bg-neutral0 card__destination">
<aside class="card__full_image">
<img src="/assets/img/cards/Pisa_Tower.png" alt="Tour de Pise" />
</aside>
<header>
<h3>Card Title</h3>
</header>
<main>
<section>
<div class="row align-center">
<span
class="icon-location"
width="20"
height="20"
stroke="orange"
></span>
<small>Lorem, ipsum dolor </small>
</div>
</section>
</main>
</article>
<!-- Variante 3 -->
<article class="card">
<aside class="card__thumbnail">
<img src="/assets/img/reviews/Colombia.png" alt="" />
</aside>
<header class="card__header">
<h3>Card title</h3>
</header>
<main>
<section class="card__description">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aliquam unde sunt reiciendis quia fugiat tempore possimus
quibusdam, et vitae aperiam nesciunt porro, maxime eum quasi
cum dolores officia soluta reprehenderit.
</p>
</section>
<a href="">En savoir plus</a>
</main>
</article>
Header et Footer
Header
Dans cet exemple, le header a un fond gris pour faciliter la lisibilité. En pratique, celui-ci est blanc. (Nous avons utilisé la classe bg-neutral100 dans cet exemple)
Markup HTML
<header class="align-center justify-between header ">
<div class="header__left align-center">
<img src="/assets/svg/FarawayLogo.svg" alt="logo" />
<nav>
<ul>
<a href="" class="px-3">
<li>Accueil</li>
</a>
<a href="" class="px-3">
<li>Destinations</li>
</a>
<a href="" class="px-3">
<li>A propos</li>
</a>
<a href="" class="px-3">
<li>Contact</li>
</a>
<div class="break-line"></div>
<a href="/register.html" class="px-3 lg-max"
><li>S'inscrire</li></a
>
<a
href="/login.html"
class="button button__primary px-3 lg-max"
><li>Se connecter</li></a
>
</ul>
</nav>
</div>
<div class="header__right lg-min justify-end align-center">
<a href="/register.html">S'inscrire</a>
<a href="/login.html" class="button button__primary m-left-6"
>Se connecter</a
>
</div>
<div class="header__burger lg-max">
<div class="burger-menu">
<div class="burger-menu__line"></div>
<div class="burger-menu__line"></div>
<div class="burger-menu__line"></div>
</div>
</div>
</header>
Footer
Markup HTML
<footer class="footer">
<img src="/assets/svg/FarawayLogo.svg" alt="logo" />
<div>
<h2>Nos pages</h2>
<ul>
<li>Accueil</li>
<li>Destinations</li>
<li>À propos</li>
<li>Contact</li>
</ul>
</div>
</footer>