/* 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 ====
[[https://milligram.io/|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 ====
[[https://picocss.com|PicoCSS]] Minimal CSS Framework for semantic HTML.Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
==== Tailwind CSS ====
[[https://tailwindcss.com/|Tailwind CSS]] a utility-first CSS framework for rapidly building custom user interfaces, no UI components ready.
[[/informatique/web/tailwind_css|/informatique/web/tailwind_css]]
==== Bulma ====
[[https://bulma.io/|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 ====
[[:informatique:web:bootstrap|Bootstrap]]
==== Autres / More ====
[[https://www.knacss.com|knacss]] by AlsaCreations
Foundation
Tachyons
[[http://semantic-ui.com/|Semantic UI]]
[[http://topcoat.io/|Topcoat]] //by Adobe//
[[http://www.getskeleton.com/|Skeleton]]
===== Tips =====
==== Couleurs ====
* @@@@@ maroon ( #800000 )
* @@@@@ red ( #ff0000 )
* @@@@@ orange ( #ffA500 )
* @@@@@ yellow ( #ffff00 )
* @@@@@ olive ( #808000 )
* @@@@@ purple ( #800080 )
* @@@@@ fuchsia ( #ff00ff )
* @@@@@ white ( #ffffff )
* @@@@@ lime ( #00ff00 )
* @@@@@ green ( #008000 )
* @@@@@ navy ( #000080 )
* @@@@@ blue ( #0000ff )
* @@@@@ aqua ( #00ffff )
* @@@@@ teal ( #008080 )
* @@@@@ black ( #000000 )
* @@@@@ silver ( #c0c0c0 )
* @@@@@ gray ( #808080 )
==== 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 ====
* a:link: lien normal, non visité
* a:visited: lien visité
* a:hover: état du lien lorsque le curseur passe dessus
* a:active: lien sélectionné par clic
==== Coins arrondis ====
* [[http://covertprestige.info/css/boites-fluides/|Boites fluides avec bordures et coins en images]]
* [[http://css.mammouthland.net/image-coulissante-pour-coins-arrondis.php|Coins arrondis CSS]]
=== Sans image, tout en CSS ===
**Update**: Nouvelle version encore plus puissante des Nifty Corners: [[http://www.html.it/articoli/niftycube/|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:
Bla bla bla dans le rectangle
{{:informatique:html-css_rounded_boxes_.html|Voir cet exemple}}
==== Saut de page ====
et aussi
http://openweb.eu.org/articles/css_impression/
====wrap/float/contour text around freeform images====
http://www.bram.us/projects/the-box-office/
{{:informatique:web:css_wrap-float-contour_text_around_freeform_images.jpg|}}