Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteDernière révisionLes deux révisions suivantes |
informatique:web:css [25/09/2022 21:28] – [Frameworks] cyrille | informatique:web:css [10/10/2023 19:33] – [Component library for Tailwind CSS] cyrille |
---|
===== Frameworks ===== | ===== 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://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. | [[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. | [[https://tailwindcss.com/|Tailwind CSS]] a utility-first CSS framework for rapidly building custom user interfaces, no UI components ready. |
| |
[[https://bulma.io/|Bulma]] is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. ''bulma.min.css = 207 ko'' | 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 | Foundation |
| |
[[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]] |