Documentation du style CSS

Cette page présente les différents éléments CSS développés pour le tic tac toe du projet DIU du bloc 4
Développement dans des fichiers séparés, via LESS, puis compilés et minifiés via un script bash local.

Lien hero !

Titre Card !

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro.
Do stuff!

Titre Card !

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro.
Do stuff!

Titre Card !

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro.
Do stuff!
Alerte ! Message

Hero

Titre h1 hero

Paragraphe hero

Lien hero ! 
<div class="hero">
   <h1>Titre h1 hero</h1>				
   <p>Paragraphe hero<p>
   <a class="btn btn-b" href="#">Lien hero !</a>
</div>

Cards

Titre Card !

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro.
Do stuff! 
<div class="col c4 card">
   <h3>Titre Card !</h3>
   Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro.<br>
   <a href="#" class="btn btn-a btn-sm">Do stuff!</a>
</div>

Buttons

btn-a btn-b btn-c classless 
<a class="btn btn-b smooth">btn-b</a>

btn-sm btn-a btn-sm btn-b btn-sm btn-c btn-sm classless 
<a class="btn btn-b btn-sm smooth">btn-sm</a>

Forms





$ 
<input type="text" class="smooth">
<textarea rows="3" class="smooth">
<span class="addon">$</span><input type="text" class="smooth">
Attention avec les addons!
Si on ne veut pas d'espace entre le addon et le input, on s'assure qu'il n'y a pas d'espace entre les balises </span> et <input>. 
... </span> <input ...
$ 
... </span><input ...
$

Navbars


<nav class="nav" tabindex="-1" onclick="this.focus()">
    <div class="container">
        <a class="pagename current" href="#">Min</a>
        <a href="#">One</a>
        <a href="#">Two</a> 
        <a href="#">Three</a>
    </div>
</nav>

Tables

#Col 1Col 2Col 3
15102
210204
35001000200


<table class="table">
   <thead>
      <tr>
         <th>#</th>
         <th>Col 1</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>5</td>
      </tr>
      <tr>
         <td>2</td>
         <td>10</td>
      </tr>
      <tr>
         <td>3</td>
         <td>500</td>
      </tr>
   </tbody>
</table>

Icons

Android Safe ☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №

Les icons Android Safe fonctionnent sur tous les terminaux.
Total Set 🔒 ✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ 🕱 🎲 🗑 ▶ 👁

75% des terminaux supportent les icons Total Set 
<i class="ico">Copy and paste icons from above here!</i>

Grids

12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11
12

<div class="row">
   <div class="col c12">12</div>
</div>


<div class="row">
   <div class="col c4">4</div>
   <div class="col c8">8</div>
</div>

Headings

h1

h2

h3

h4

h5
h6

<h1>Level One Heading</h1>

Messages

Titre du message ! Corps du message. 
<div class="msg">
   <strong>Titre du message !</strong>
   Corps du message
</div>
Les icons Android Safe fonctionnent sur tous les terminaux. 
<message class="great">
   Les icons Android Safe fonctionnent sur tous les terminaux.
</message>
Les icons Android Safe fonctionnent sur tous les terminaux. 
<message class="warning">
   Les icons Android Safe fonctionnent sur tous les terminaux.
</message>