{"id":102774,"date":"2020-10-22T10:38:32","date_gmt":"2020-10-22T07:38:32","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/css-for-the-minimalist-exploring-classless-css\/"},"modified":"2020-10-22T10:38:32","modified_gmt":"2020-10-22T07:38:32","slug":"css-for-the-minimalist-exploring-classless-css","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/css-for-the-minimalist-exploring-classless-css\/","title":{"rendered":"#CSS for the Minimalist: Exploring Classless CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2d400cd8bd3\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2d400cd8bd3\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/css-for-the-minimalist-exploring-classless-css\/#Watercss\" >Water.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/css-for-the-minimalist-exploring-classless-css\/#Tufte_CSS\" >Tufte CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/css-for-the-minimalist-exploring-classless-css\/#Newcss\" >New.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/css-for-the-minimalist-exploring-classless-css\/#Sakura\" >Sakura<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/css-for-the-minimalist-exploring-classless-css\/#Marx\" >Marx<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#CSS for the Minimalist: Exploring Classless CSS<\/strong>&#8221;<\/p>\n<div class=\"entry-inner\">\n<p class=\"opener\">In 2011, the first version of Bootstrap (then called <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">Twitter<\/a> Bootstrap) came out. It was a product of Twitter\u2019s UI team and was a framework aimed at simplifying the creation of professional looking <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lications across the Web.\u00a0\u00a0\u00a0<\/p>\n<p>It\u2019s release revolutionized how developers used CSS \u2013 it took what was often a bespoke, unruly approach to Web stylization and gave developers the tools to easily make professional looking websites with standard components and minimal effort.<\/p>\n<p>As more and more developers began using Bootstrap, other CSS frameworks sprouted, as developer and application requirements multiplied.<\/p>\n<p>Now on version 4, Bootstrap is a 160kb (in minified form) library that offers developers an everything-but-the-kitchen-sink set of utilities. One can easily generate tags that look like this:<\/p>\n<p>&lt;button type=\u201dbutton\u201d class=\u201dmy-5 p-5 btn btn-sm btn-block btn-primary\u201d&gt;Click here&lt;\/button&gt; <\/p>\n<p>In other words, \u201cclass bloat.\u201d By addressing the multitude of requirements that applications need, Bootstrap and its brethren have created a plethora of nested HTML components, utility classes, complex themes, and javascript interactions.<\/p>\n<p>While newer approaches, like Tailwind.CSS, attempt to minimize class bloat by integrating deeper into the developer toolchain, the learning curve can be steep.<\/p>\n<p>Recently at <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/solitaired.com\/\">Solitaired<\/a>, we\u2019ve been exploring the direct opposite. We want to get rid of class bloat and go \u201cclassless.\u201d We think it will allow our solitaire <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/game\/\" data-internallinksmanager029f6b8e52c=\"7\" title=\"Game\" target=\"_blank\" rel=\"noopener\">game<\/a>s to run smoother and improve the user experience for our players.\u00a0<\/p>\n<p>Classless means just what it says \u2013 building sites that minimize, or ideally eliminate, the need for classes to make a sharp-looking website.<\/p>\n<p>In other words, all you need to do is use standard HTML and slap a classless stylizer up top to get a cleanly formatted, responsive, and easy to manage a website.<\/p>\n<p>While going classless may not be realistic for many web applications, it can absolutely be an approach for static sites, portfolio sites, personal blogs, or even small-ish applications.<\/p>\n<p>What are the top classless libraries of 2020?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Watercss\"><\/span><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/kognise\/water.css\">Water.css<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Water is my preferred CSS library \u2013 responsive and pretty, and 2.67kb compressed. One of the more interesting aspects of Water is that has light and dark modes. You can choose to use one, or it will automatically adjust based on a user\u2019s preferences. Who knew you could pack so much power in such a small library?<\/p>\n<p>If you need themes, Water includes documentation on how to do it. The default approach relies on CSS custom variables, which are supported by all browsers except Internet Explorer. Despite that incompatibility, custom variables make it incredibly easy to change the default water.css theme. For sites that require IE support, you can still customize using yarn.<\/p>\n<p>Water has 5.3K stars as of this writing, making it arguably the most popular classless library out there. On our end, we\u2019ll be migrating our <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unscrambled-words.com\">word unscrambler<\/a> to this in the next couple of months.<\/p>\n<p>How to use:<\/p>\n<p>Add &lt;link rel=\u201dstylesheet\u201d href=\u201dhttps:\/\/cdn.jsdelivr.net\/npm\/water.css@2\/out\/water.min.css\u201d&gt; to your the &lt;head&gt; tag.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tufte_CSS\"><\/span><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/edwardtufte\/tufte-css\">Tufte CSS<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Named after noted professor and pioneer of data visualization Edward Tufte, this CSS library attempts to implement his suggestions in an easy to implement CSS library. Tufte CSS may be the preferable choice for longer articles, academia, or personal projects, because it uses a serif, and has an emphasis on supporting graphs, charts, and side notes.<\/p>\n<p>Tufte is 7.71kb compressed and has been starred 4.5K times.<\/p>\n<p>How to use:<\/p>\n<p>Download the library at the Github link above, and add &lt;link rel=\u201dstylesheet\u201d href=\u201dpath\/to\/tufte.css\u201d&gt; to your the &lt;head&gt; tag.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Newcss\"><\/span><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/xz\/new.css\">New.css<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>At 4.8kb compressed, new.css is in the middle of the pack of classless CSS library sizes. Similar to Water, new.css creates clean, responsive pages easily. New.css also comes with a couple of additional themes if you have a hankering for additional styles.<\/p>\n<p>New.css also uses CSS custom variables to make theming easy.\u00a0<\/p>\n<p>How to use:<\/p>\n<p>Add &lt;link rel=\u201dstylesheet\u201d href=\u201dhttps:\/\/cdn.jsdelivr.net\/npm\/water.css@2\/out\/water.min.css\u201d&gt; to your the &lt;head&gt; tag. They also recommend adding the Inter font, using &lt;link rel=\u201dstylesheet\u201d href=\u201dhttps:\/\/fonts.xz.style\/serve\/inter.css\u201d&gt;.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Sakura\"><\/span><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/oxalorg\/sakura\">Sakura<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sakura\u2019s default theme aims for a calm, clean style. In the GitHub repository are also a number of themes that can be utilized right out of the box. At 2.8K stars, it\u2019s one of the more popular Classless CSS options.<\/p>\n<p>Sakura suggests using normalize.css, which will add a few more kb to its main payload of ~2kb compressed. Their theming methodology is slightly more complicated than Water\u2019s, relying on SCSS to update variables in the main CSS. One upside with this approach, however, is compatibility, as native CSS variables are not supported in any version of Internet Explorer.<\/p>\n<p>How to use:<\/p>\n<p>Add &lt;link rel=\u201dstylesheet\u201d href=\u201dhttps:\/\/unpkg.com\/sakura.css\/css\/sakura.css\u201d type=\u201dtext\/css\u201d&gt; to your the &lt;head&gt; tag.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Marx\"><\/span><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mblode\/marx\">Marx<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With a tagline of \u201cThe classless CSS reset (perfect for Communists),\u201d Marx would be on this list no matter what \u2013 but it also happens to be very popular, with over 1.4K Github stars.<\/p>\n<p>Marx is also easily themeable with SCSS and the documentation has some handy instructions on how to use this with Jekyll. That\u2019s nice, because static websites would be a common and great use case for classless frameworks.<\/p>\n<p>How to use:<\/p>\n<p>Add &lt;link rel=\u201dstylesheet\u201d href=\u201dhttps:\/\/unpkg.com\/marx-css\/css\/marx.min.css\u201d&gt; to your the &lt;head&gt; tag.<\/p>\n<p>As you can easily see above, the nice thing with classless CSS is that there\u2019s just not too much to them. One line converts an ugly webpage into something nice. Additionally, most of these frameworks clock in at far smaller than 10kb, making them at least 16 times smaller than Bootstrap.\u00a0<\/p>\n<p>Obviously, one of the big downsides with classless is that you don\u2019t get the kinds of complex components and javascript-ready interactions as you would with Bootstrap, Foundation, or some of the other libraries out there. However, there\u2019s a silver lining here. Since you\u2019re relying mostly on tags for formatting, it\u2019ll push you to be more semantic on your page \u2013 which is better for SEO and accessibility.<\/p>\n<hr class=\"wp-block-separator\"><em>Featured image by <\/em><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@scottwebb?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\"><em>Scott Webb<\/em><\/a><em> on <\/em><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/s\/photos\/minimalist?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\"><em>Unsplash<\/em><\/a><\/p>\n<hr class=\"wp-block-separator\">I hope that classless becomes more of a movement and that the default library people add to their applications is no longer Bootstrap, but something smaller, cleaner, and simpler.\n<\/div>\n<p><\/p>\n<div class=\"author-inner\">\n<p class=\"bio-name\">Darshan Somashekar<\/p>\n<div class=\"bio-desc\">\nDarshan is a product executive. He\u2019s sold companies to two public companies, Facebook and Chegg, the latter where he was an executive there for three years.<\/div>\n<p><!-- social-link --><\/p>\n<div class=\"clear\"><\/div>\n<\/div>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">News<\/a> articles, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/general\/\" target=\"_blank\" rel=\"noopener noreferrer\">General <\/a><\/span>category.<\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.noupe.com\/design\/css-for-the-minimalist-exploring-classless-css.html\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#CSS for the Minimalist: Exploring Classless CSS&#8221; In 2011, the first version of Bootstrap (then called Twitter Bootstrap) came out. It was a product of Twitter\u2019s UI team and was a framework aimed at simplifying the creation of professional looking applications across the Web.\u00a0\u00a0\u00a0 It\u2019s release revolutionized how developers used CSS \u2013 it took what&#8230;<\/p>\n","protected":false},"author":1,"featured_media":102775,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.noupe.com\/wp-content\/uploads\/2020\/10\/scott-webb-GQD3Av_9A88-unsplash.jpg","fifu_image_alt":"","footnotes":""},"categories":[1],"tags":[78105,78106,78107,78108],"class_list":["post-102774","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-css","tag-css-animations","tag-css-framework","tag-minimalism"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/102774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=102774"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/102774\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/102775"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=102774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=102774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=102774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}