Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
informatique:web:css [10/03/2016 17:10] – [Frameworks] cyrille | informatique:web:css [10/10/2023 19:36] (Version actuelle) – [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. |
| |
[[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. | [[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: | 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 ===== |
| |
| https://www.granneman.com/webdev/coding/css/fonts-and-formatting/ |
| |
| |
===== Frameworks ===== | ===== Frameworks ===== |
| |
[[http://semantic-ui.com/|Semantic UI]] | ==== Milligram ==== |
| |
[[http://topcoat.io/Topcoat|]] | [[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! |
| |
[[/informatique/web/bootstrap|Bootstrap]] | ==== 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]] | [[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 === |