Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:web:css [05/05/2019 14:49] – [Frameworks] cyrille
+++ informatique:web:css [10/10/2023 19:36] (Version actuelle) – [Tailwind CSS] cyrille
@@ Ligne 7: / Ligne 7: @@
 **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]].
+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.
@@ Ligne 19: / Ligne 21: @@
 Exemples de menu avec 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 =====
@@ Ligne 27: / Ligne 50: @@
 ===== Frameworks =====
-  * [[https://tailwindcss.com/|Tailwind CSS]] a utility-first CSS framework for rapidly building custom user interfaces, no UI components ready.
+==== Milligram ====
-  * Bulma
-  * Foundation
-  * Tachyons
-[[http://semantic-ui.com/|Semantic UI]]
+[[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!
-[[http://topcoat.io/|Topcoat]] //by Adobe//
+==== 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]]