Qu'est-ce que c'est ?

CSS Common est un framework, ou plutôt une base de départ en CSS, qui comprend :

  • Une feuille de style par défaut, réinitialisant et stylisant les balises HTML les plus utilisées.
  • Une feuille d'objets CSS utilisés fréquemment.
  • Une feuille de démarrage basique.
  • Des modules à rajouter pour chaque besoin.

Modules

Ces modules sont des feuilles de style indépendantes, à utiliser avec les feuilles de base de CSSCommon.

Responsive web design

Un exemple simplifié de layout Responsive avec CSSCommon.

Pourquoi ?

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

Leonard Nimoy

Pour démarrer

Forkez le projet sur Github Téléchargez une archive .zip

Éléments récurrents

Barre d’avancement :

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 !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

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

Infobulle

Infobulle au survol Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Module : cssc-forms.css

Formulaires

Un modèle de formulaire à labels flottants et un modèle simple en paramétrant directement le form.
Cliquez sur les boutons ci-dessous pour découvrir les possibilités de CSSCommon pour les formulaires.

Actions sur INPUTs
  • Edit me if u can
Test de legend pour fieldset
  • Le button
  • Faux Label

Formulaire collé

Formulaire type "recherche rapide" ou "inscription à la newsletter"

Boutons

Boutons avec icône

Module : cssc-tables.css

Tableaux

Entete Entete Entete
contenu
avec sauts
de ligne		 contenu contenu
contenu Contenu sur deux colonnes
contenu un peu plus long que les autres, car il faut bien tester contenu sur deux lignes contenu
contenu contenu
Module : cssc-grid.css

Grilles

Un système simple de grilles.

Demo

Gridception : Ou la possibilité d'insérer une grille dans une grille.

Ici aussi !

E. 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.

F. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus . Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

A. 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. Cras elementum ultrices diam. Ut in risus volutpat libero pharetra tempor.

C. 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.

D. 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.

Grille fluide

33% Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

33% Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

33% Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

50% Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

50% Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.

Module : cssc-messages.css

Messages d'avertissement

Présentation de code

Balise <pre />

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

Balise <code />

1. Hello.

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

Push avec simple fondu

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

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

Push avec double fondu

<a href="#" class="cssc-push push-double">
    <span class="before"></span>
    <span class="after"></span>
</a>

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

Module : cssc-modeles.css

Modèles

Modèles d'objets récurrents dans les intégrations.

Liste "inline"

Pagination

Pagination centrée

Menu Principal avec sous-menu

Menu Principal avec sous-menu "riche" de largeur fixe

Menu Principal avec sous-menu "riche" 100%

Menu Principal avec Social links

Fil d'ariane

Module : cssc-layouts.css

Layouts

Layouts de mise en page. Sidebar à gauche ou droite.

Layout basique

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.

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.

Layout basique inversé

The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

Wide Layout

The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

Module : cssc-tabs.css

Onglets

Des onglets simples, avec juste un peu de JS à rajouter :)

  • The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

  • The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

  • The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

Fork me on GitHub