hackcss

6 minute(s) Modifié le

Un framework css vraiment tout simple
Table des Matières

Comme beaucoup de hackers, j’adore la lisibilité du markdown. L’idée qui me botte avec le thème Afertdark (utilisé à cette heure pour le site), c’est de disposer d’une petite cabane personnelle numérique tout markdown pour produire des contenus web valides structurellement, faciles à lire et à copier. Le thème “ dark ” est aussi conçu pour protéger les yeux en basse lumière.

Ce site web dark utilise le thème After-dark. Un thème reposant sur le framework “ hack.css ” disponible sur https://hackcss.egoist.moe/.

Tour d’horizon.

Alternatives couleurs

Les modes dark-greysolarized-dark et standard sont aussi disponibles !

Utiliser hackcss

hack.css est parfait pour la page d’accueil de vos projets open-source. Il s’installe en lançant npm install -S hack et vous le chargez avec votre pré-processeur css préféré.

Vous pouvez aussi hot-linker l’url du fichier css. La dernière étape est d’ajouter la classe .hack à votre élément body.

<!-- requis dans tous les modes -->
<link rel="stylesheet" href="/path/to/hack.css">

<!-- mode markdown -->
<body class="hack"></body>

<!-- mode standard -->
<link rel="stylesheet" href="/path/to/standard.css">
<body class="standard"></body>

<!-- mode dark -->
<link rel="stylesheet" href="/path/to/dark.css">
<body class="hack dark"></body>

Guide Pratique

Basique

Utilisez .container pour centraliser tout le contenu principal.

Utilisez flexbox pour produire les layouts.

<div class="exemple">
	<div class="grid grid-example">
	  <div class="cell -4of12">
		<div class="content">4</div>
	  </div>
	  <div class="cell -4of12">
		<div class="content">4</div>
	  </div>
	  <div class="cell -4of12">
		<div class="content">4</div>
	  </div>
	</div>
	<div class="grid grid-example">
	  <div class="cell -4of12">
		<div class="content">4</div>
	  </div>
	  <div class="cell -8of12">
		<div class="content">8</div>
	  </div>
	</div>
	<div class="grid grid-example">
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	  <div class="cell">
		<div class="content">1</div>
	  </div>
	</div>
	</div>
4
4
4
4
8
1
1
1
1
1
1
1
1
1
1
1
1

modificateurs de .grid

  • Pour aligner les items avec align-items
  • -top: vers le haut
  • -middle: vers le milieu
  • -bottom: vers le bas
  • -stretch: étirer les items
  • -baseline: vers la base line
  • Pour mettre en forme les contenus avec justify-content
  • -left: vers la gauche
  • -center: vers le centre
  • -right: vers la droite
  • -between: ajouter des espaces entre les items
  • -around: ajouter des espaces autour des items

modificateurs de .cell 

  • -1of12: Set item width to 8.3% of parent
  • -2of12: Set item width to 16.7% of parent
  • -3of12: Set item width to 25% of parent
  • -4of12: Set item width to 33% of parent
  • -5of12: Set item width to 41.7% of parent
  • -6of12: Set item width to 50% of parent
  • -7of12: Set item width to 58.3% of parent
  • -8of12: Set item width to 66.7% of parent
  • -9of12: Set item width to 75% of parent
  • -10of12: Set item width to 83.3% of parent
  • -11of12: Set item width to 91.7% of parent
  • -12of12: Set item width to 100% of parent

Composants

élément hr


Liste

  • foo
    • sous foo
    • sous bar
    • sous baz
  • bar
  • baz

#### Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.

Formulaire

<form class="form">
  <fieldset class="form-group">
    <label for="username">USERNAME:</label>
    <input id="username" type="text" placeholder="type your name..." class="form-control">
  </fieldset>
  <fieldset class="form-group">
    <label for="email">EMAIL:</label>
    <input id="email" type="email" placeholder="" class="form-control">
  </fieldset>
  <fieldset class="form-group">
    <label for="country">COUNTRY:</label>
    <select id="country" class="form-control">
      <option>China</option>
      <option>U.S.</option>
      <option>U.K.</option>
      <option>Japan</option>
    </select>
  </fieldset>
  <fieldset class="form-group form-textarea">
    <label for="message">MESSAGE:</label>
    <textarea id="message" rows="5" class="form-control"></textarea>
  </fieldset>
  <div class="form-actions">
    <button type="button" class="btn btn-primary btn-block">Submit</button>
  </div>
</form>

Formulaire Admin

<form class="form">
	<fieldset class="form-group form-success">
	  <label for="username2">Nom Utilisateur:</label>
	  <input id="username2" type="text" placeholder="entrez votre nom..." class="form-control">
	</fieldset>
	<fieldset class="form-group form-warning">
	  <label for="age">AGE:</label>
	  <input id="age" type="text" placeholder="" class="form-control">
	</fieldset>
  </form>
Bloc Aide
<form class="form">
 <fieldset class="form-group form-success">
   <label for="phone">N° Téléphone :</label>
     <input id="phone" type="text" value="+86 180 800 8000" placeholder="" class="form-control">
	    <div class="help-block">Dans ce format: +86 xxx xxx xxxxx</div>
  </fieldset>
  <fieldset class="form-group form-error">
    <label for="email3">e-mail :</label>
      <input id="email3" type="email" placeholder="" class="form-control">
  </fieldset>
</form>
Dans ce format: +86 xxx xxx xxxxx

Tableau

<table>
  <thead>
    <tr>
      <th>éditeur</th>
      <th>vitesse</th>
      <th>extension</th>
      <th>interface</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>sublime</td>
     <td>90</td>
     <td>80</td>
     <td>70</td>
    </tr>
    <tr>
      <td>atom</td>
      <td>60</td>
      <td>85</td>
      <td>80</td>
    </tr>
    <tr>
      <td>vscode</td>
      <td>80</td>
      <td>65</td>
      <td>60</td>
    </tr>
  </tbody>
</table>
éditeur vitesse extension interface
sublime 90 80 70
atom 60 85 80
vscode 80 65 60

Barre de Progression

<!-- avec seulement une flèche -->
<div class="progress-bar">
  <div class="progress-bar-filled" style="width: 42%"></div>
</div>

<!-- avec un pourcentage s'affichant au-dessus de la flèche -->
<div class="progress-bar progress-bar-show-percent">
  <div class="progress-bar-filled" style="width: 42%" data-filled="Chargement 42%"></div>
</div>

Boutons

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>

<button class="btn btn-primary btn-ghost">Ghost Button</button>

<button class="btn btn-primary btn-block">Block Level Button</button>

Groupe de Boutons

 <div class="exemple">
	  <div class="btn-group">
	    <button class="btn btn-success btn-ghost">Gauche</button>
	    <button class="btn btn-success btn-ghost">Milieu</button>
	    <button class="btn btn-success btn-ghost">Droite</button>
	  </div>
  </div>

Card

<div class="card">
  <header class="card-header">titre</header>
  <div class="card-body">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
  </div>
</div>
titre
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.


Alertes

<div class="alert alert-success">Message success</div>
<div class="alert alert-info">Message info</div>
<div class="alert alert-warning">Message warning</div>
<div class="alert alert-error">Message error</div>
Message success
Message info
Message warning
Message error
<div class="menu">
   <a class="menu-item">
     item #1 <div class="pull-right">»</div>
   </a>
   <a class="menu-item active">
     item #2 <div class="pull-right">»</div>
   </a>
   <a class="menu-item">
     item #3 <div class="pull-right">»</div>
   </a>
 </div>

#### Media

C’est utile pour afficher une liste d’items, comme la timeline Twitter.

 <!-- alignement à gauche -->
<div class="media">
  <div class="media-left">
    <div class="avatarholder">e</div>
  </div>
  <div class="media-body">
    <div class="media-heading">EGOIST @egoist</div>
    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
  </div>
</div>

<!-- alignement à droite -->
<div class="media">
  <div class="media-body">
    <div class="media-heading">EGOIST @egoist</div>
    <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
  </div>
  <div class="media-right">
    <div class="avatarholder">e</div>
  </div>
</div>
e
EGOIST @egoist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
EGOIST @egoist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
e

Loading

hack.css vous donne un élément loading par défaut, mais vous pourrez en trouver d’autres sur CSS-only loaders.

<div class="loading"></div>

<button class="btn btn-info btn-ghost">
  Chargement en cours&hellip;
  <span class="loading"></span>
</button>

<div class="alert alert-info">
  <span class="loading"></span>
  Chargement dans une boîte d'alerte&hellip;
</div>

Chargement dans une boîte d'alerte…