CSS Common - Framework CSS
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
- List element
- List element
- List element
- List element
- List element
- List element
Content
Lorem ipsum dolor sit amet, abbr adipiscing elit. Sed non strong.
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 mark, 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
É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
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 alternatifCentrage vertical
Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes.
Barre d’avancement
Notes
Séparateurs
The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do — Sarah Ban Breathnach.
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.
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.
<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>
Galerie
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.
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>
cssc-images.css
Images
Images avec légende / titre à utiliser, par exemple, dans une liste d'articles.
