Différences

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

--- informatique:web:css [25/09/2022 21:20] – [Frameworks] cyrille
+++ informatique:web:css [10/10/2023 19:33] – [Component library for Tailwind CSS] cyrille
@@ Ligne 50: / Ligne 50: @@
 ===== Frameworks =====
-[[https://milligram.io/|Milligram]] 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!
+==== Milligram ====
-  * [[https://tailwindcss.com/|Tailwind CSS]] a utility-first CSS framework for rapidly building custom user interfaces, no UI components ready.
+[[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!
-  * Bulma
-  * Foundation
-  * Tachyons
-[[http://semantic-ui.com/|Semantic UI]]
+==== PicoCSS ====
-[[http://topcoat.io/|Topcoat]] //by Adobe//
+[[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>
+[[/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]]