Qu'est-ce que c'est ?

CSS Common est un thème de démarrage / librairie CSS, comprenant :

  • Une feuille réinitialisant et stylisant des balises HTML courantes.
  • Une feuille de gestion du contenu.
  • Une feuille d'objets CSS utilisés fréquemment.
  • Des modules supplémentaires pour chaque besoin.

Responsive web design

Un exemple de layout Responsive avec CSSCommon.

Pourquoi ?

The miracle is this: the more we share the more we have.

Leonard Nimoy

Style HTML

Le container .cssc-content permet de styliser des listes, d'activer une taille de typo de base, de faire flotter des images.
Il est utilisé par exemple dans le contenu d'un article, dans une description de fiche produit, ...
Les autres styles HTML sont disponibles à tous les niveaux du DOM.

Lists

Unordered list

  • List element
  • List element
  • List element
  • List element
    • Sub-List element
    • Sub-List element
    • Sub-List element
    • Sub-List element
  • List element
  • List element

Ordered list

  1. List element
  2. List element
  3. List element
  4. List element
  5. List element
  6. List element

Content

Lorem ipsum dolor sit amet, abbr adipiscing elit. Sed non strong. img Suspendisse lectus tortor, link sit amet, adipiscing nec, ultricies sed, dolor. Cras emementum ultrices diam.

Geyser
Un geyser est un type particulier de source d'eau chaude qui jaillit par intermittence en projetant à haute température et à haute pression de l'eau et de la vapeur.
Fjord
Un fjord est une vallée érodée par un glacier avançant de la montagne à la mer, qui a été envahie par la mer depuis la retraite de la glace.

Maecenas ligulasup, varius a, semper congue, euismod non, mi. Proin porttitorsub, a strong link, enim est del ins, non small diam nisl sit amet erat.

Title lvl. 1

Title lvl. 2

Title lvl. 3

Title lvl. 4

Title lvl. 5

Contenu d'une citation

Auteur

Tags

Renard polaire Macareux Sterne Grande baleine bleue Mouton

Tags Enfants

Geyser Fjord Cascade Volcan Glacier Canyon

Éléments récurrents

Panneau

Mise en avant de texte.

Coupure du texte en CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

Effet Tiroir

Survolez-moi !

Block media

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing . (inspiré par @Stubbornella)

Remplacement d'image

Texte alternatif

Centrage vertical

Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes.

Barre d’avancement

30%

Notes

Séparateurs

The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do — Sarah Ban Breathnach.

 

Présentation de code

Balise <pre />

<script>
var i;
for (i=0; i<3; i++){
    console.log(i);
}
</script>

Balise <code />

1. Hello.
Module : cssc-tabs.css

Onglets

Des onglets simples, compatibles avec le plugin jQuery "Tabs" ou la classe MooTools "Tabs".

  • Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

  • Being the richest man in the cemetery doesn’t matter to me … Going to bed at night saying we’ve done something wonderful… that’s what matters to me.

  • A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem.
    The broader one's understanding of the human experience, the better design we will have.

Afficher HTML

<div class="cssc-tabs">
    <ul class="cssc-tabs-clic">
        <li class="is-current">
            <a href="#">Onglet</a>
        </li>
        <li>
            <a href="#">Onglet 2</a>
        </li>
        <li>
            <a href="#">Onglet 3</a>
        </li>
    </ul>
    <ul class="cssc-tabs-target">
        <li class="is-current">
            <p>Contenu 1.</p>
        </li>
        <li>
            <p>Contenu 2.</p>
        </li>
        <li>
            <p>Contenu 3.</p>
        </li>
    </ul>
</div>

Une marge se crée automatiquement entre les éléments, mais le dernier élément d'une ligne est tout de même calé à droite, quel que soit le nombre d'éléments par ligne.

Module : cssc-push.css

Pushs

Cet objet permet de créer une transition entre deux images. Par exemple, un push avec CTA.

Push avec simple fondu

Pas de pseudo-classes, étant donné que certains navigateurs ne supportent pas les transitions.
Au :hover, .after est progressivement affiché.
Afficher HTML

<a href="#" class="cssc-push push-simple">
    <span class="after">Texte alternatif</span>
</a>

Push avec double fondu

Moins de soucis en cas de sprite avec deux images semi-transparentes.
Au :hover, .after est progressivement affiché pendant que .before est progressivement masqué.
Afficher HTML

<a href="#" class="cssc-push push-double">
    <span class="before">Texte alternatif</span>
    <span class="after"></span>
</a>
Module : cssc-images.css

Images

Images avec légende / titre à utiliser, par exemple, dans une liste d'articles.

Image Title

Sub-title

Image Title

Sub-title

Image Title

Sub-title


Fork me on GitHub