Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes |
informatique:web:css [20/07/2017 08:10] – [Cascading Style Sheets] cyrille | informatique:web:css [09/08/2023 15:40] – [Tailwind CSS] cyrille |
---|
**N'oubliez pas le Doctype !**\\ | **N'oubliez pas le Doctype !**\\ |
Attention à ne pas oublier le doctype du document (lire "[[http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html|DTD : comment choisir]]"), sinon votre page sera en [[http://www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html|mode Quirks]]. | Attention à ne pas oublier le doctype du document (lire "[[http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html|DTD : comment choisir]]"), sinon votre page sera en [[http://www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html|mode Quirks]]. |
| |
| Un guide tout simple pour s'attaquer à la mise en page avec The Flexbox Layout (Flexible Box) : [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox]] |
| |
[[http://960.gs/|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. | [[http://960.gs/|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. |
Exemples de menu avec CSS: | Exemples de menu avec CSS: |
* [[http://www.webreference.com/programming/css_style2|How to Style an Unordered List with CSS]] | * [[http://www.webreference.com/programming/css_style2|How to Style an Unordered List with CSS]] |
| |
| ===== media query breakpoints ===== |
| |
| Breakpoints recommended by Twitter Bootstrap: |
| <code css> |
| /* 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) { |
| } |
| </code> |
| |
===== fonts-and-formatting ===== | ===== fonts-and-formatting ===== |
| |
===== Frameworks ===== | ===== 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. |
| |
| Debug breakpoints : |
| {{ :informatique:web:css_debug_breakpoints.png?nolink&200|}} |
| <code html> |
| <div id="debug-css-breakpoints" class="sticky top-0 left-0 bg-orange-100 text-slate-400 text-sm font-mono"> |
| <div class="bg-inherit absolute">XS</div> |
| <div class="bg-inherit absolute hidden sm:block">SM</div> |
| <div class="bg-inherit absolute hidden md:block">MD </div> |
| <div class="bg-inherit absolute hidden lg:block">LG </div> |
| <div class="bg-inherit absolute hidden xl:block">XL </div> |
| <div class="bg-inherit absolute hidden 2xl:block">2XL</div> |
| </div> |
| </code> |
| |
| === Component library for Tailwind CSS === |
| |
| * https://daisyui.com/ |
| |
| |
| ==== 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://semantic-ui.com/|Semantic UI]] |
| |
[[http://topcoat.io/|Topcoat]] //by Adobe// | [[http://topcoat.io/|Topcoat]] //by Adobe// |
| |
[[/informatique/web/bootstrap|Bootstrap]] | |
| |
[[http://www.getskeleton.com/|Skeleton]] | [[http://www.getskeleton.com/|Skeleton]] |
| |
| |
===== Tips ===== | ===== Tips ===== |
| |
==== Centrer des éléments en CSS ==== | ==== 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 === | === Le centrage horizontal des éléments de type en-ligne === |