Table des matières

Cascading Style Sheets

CSS - Cascading Style Sheets - Feuilles de style

Des liens dans le glossaire/CSS.

N'oubliez pas le Doctype !
Attention à ne pas oublier le doctype du document (lire “DTD : comment choisir”), sinon votre page sera en mode Quirks.

Un guide tout simple pour s'attaquer à la mise en page avec The Flexbox Layout (Flexible Box) : A Complete Guide to Flexbox

960 Grid System: The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

http://www.conditional-css.com/ Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

Exemples de menu avec CSS:

media query breakpoints

Breakpoints recommended by Twitter Bootstrap:

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
    }
    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
    }
    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    }
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    }
    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
    }

fonts-and-formatting

https://www.granneman.com/webdev/coding/css/fonts-and-formatting/

Frameworks

Milligram

Milligram (milligram.min.css = 9 ko) A minimalist CSS framework provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

PicoCSS

PicoCSS Minimal CSS Framework for semantic HTML.Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Tailwind CSS

Tailwind CSS a utility-first CSS framework for rapidly building custom user interfaces, no UI components ready.

/informatique/web/tailwind_css

Bulma

Bulma (bulma.min.css = 207 ko) is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

Bootstrap

Bootstrap

Autres / More

knacss by AlsaCreations

Foundation

Tachyons

Semantic UI

Topcoat by Adobe

Skeleton

Tips

Couleurs

Centrer des éléments en CSS

Aligner verticalement

Quand 2 éléments inline-block sont proches on peut les aligner verticalement avec vertical-align: middle.

Le centrage horizontal des éléments de type en-ligne

La propriété CSS “text-align” est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type “en-ligne” contenus dans ce bloc conteneur.

#someClass {
 text-align: center;
}

Le centrage horizontal des éléments de type bloc

Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs “auto” aux marges latérales.

#someClass {
  margin-left: auto;
  margin-right: auto;
  width: ...; /* largeur obligatoire pour être centré */
}

Centrage supportant resize

Centrage d'un élément qui reste centré quand on retaille la fenêtre du navigateur.

L'astuce est de placer dans un premier temps ce bloc à top 50% et left 50%, ce qui placera le coin supérieur gauche du bloc au milieu de page. Ensuite, on définit des marges négatives dont la valeur est exactement la moitié de la largeur et hauteur du bloc, ce qui le positionnera au milieu de page.

#conteneur {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     height: 400px;
     margin-top: -200px;
     margin-left: -350px;
     border: 1px solid #000000;
     }

Liens

Coins arrondis

Sans image, tout en CSS

Update: Nouvelle version encore plus puissante des Nifty Corners: Nifty Corners Cube.
L'article d'origine : http://www.html.it/articoli/nifty/

La couleur du rectangle est à la fois dans le css et dans le html …

Le style CSS :

.rtop, .rbottom{display:block;background: transparent}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #605C9D}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

Le rectangle HTML:

<div style="background-color: transparent; width: 300px">
  <b class="rtop" >
    <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
  </b>
  <div style="background-color: #605C9D; color: #FFFFFF; text-align: center;">
    Bla bla bla dans le rectangle
  </div>
  <b class="rbottom" >
    <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
  </b>
</div>

Voir cet exemple

Saut de page

 <p style="page-break-before: always;">
 </p>
 et aussi
 <div style="page-break-inside: avoid;">
 </div>

http://openweb.eu.org/articles/css_impression/

wrap/float/contour text around freeform images

http://www.bram.us/projects/the-box-office/