{"id":335231,"date":"2021-02-24T07:54:35","date_gmt":"2021-02-24T15:54:35","guid":{"rendered":"https:\/\/css-tricks.com\/?p=335231"},"modified":"2021-02-24T07:54:50","modified_gmt":"2021-02-24T15:54:50","slug":"smolcss","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/smolcss\/","title":{"rendered":"SmolCSS"},"content":{"rendered":"\n<p>A wonderful collection of little layout-related CSS snippets from <a href=\"https:\/\/twitter.com\/5t3ph\" rel=\"noopener\">Stephanie Eckles<\/a> that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become. <\/p>\n\n\n\n<p>Random things to note!<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul><li>The resizeable containers aren&#8217;t some JavaScript library. They are just <code>&lt;div><\/code>s with <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/r\/resize\/\">resize<\/a>: horizontal;<\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/\">overflow<\/a>: auto;<\/code> (although there is <a href=\"https:\/\/github.com\/filamentgroup\/resizeasaurus\" rel=\"nofollow noopener\">a nice little lib<\/a> for that that displays current width output). <\/li><li>Each demo can be opened on CodePen, which is the <a href=\"https:\/\/blog.codepen.io\/documentation\/prefill\/\" rel=\"noopener\">prefill API<\/a> at work.<\/li><li>CSS custom properties are tastefully sprinkled throughout in a way that makes it more understandable instead of <a href=\"https:\/\/twitter.com\/chriscoyier\/status\/1361808354226667523\" rel=\"noopener\">less understandable<\/a>.<\/li><li>The dark mode doesn&#8217;t go super duper dark, but fairly dark blues and purples. That&#8217;s a good reminder that dark mode isn&#8217;t gray\/black mode. It remembers your setting, but does have flash-of-light-mode, which is the boss-mode problem with color preferences. I think you need <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/#storing-preferences\">server-side tech<\/a> to really get it perfect. <\/li><li>The whole site is <a href=\"https:\/\/github.com\/5t3ph\/smolcss\" rel=\"noopener\">open source<\/a>. Go <a href=\"https:\/\/www.11ty.dev\/\" rel=\"noopener\">Eleventy<\/a>!<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become. Random things to note!<\/p>\n","protected":false},"author":3,"featured_media":335232,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[586],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-22-at-4.29.21-PM.png?fit=1918%2C1094&ssl=1","jetpack-related-posts":[{"id":291535,"url":"https:\/\/css-tricks.com\/every-layout\/","url_meta":{"origin":335231,"position":0},"title":"Every Layout","date":"June 18, 2019","format":false,"excerpt":"Every Layout is a new work-in-progress website and book by Heydon Pickering and Andy Bell that explains how to make common layout patterns with CSS. They describe a lot of the issues when it comes to the design of these layouts, such as responsive problems and making sure we all\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/every-layout.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":205676,"url":"https:\/\/css-tricks.com\/modern-css-layout-power-and-responsibility\/","url_meta":{"origin":335231,"position":1},"title":"Modern CSS Layout, power and responsibility","date":"July 28, 2015","format":false,"excerpt":"Rachel Andrew reminds us that the power new CSS layout methods gives us could be used to form new anti-patterns: With this power comes great responsibility. For just as it will be possible for a developer to start out with a beautifully semantic, well structured document and use Grid and\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":308403,"url":"https:\/\/css-tricks.com\/exciting-things-on-the-horizon-for-css-layout\/","url_meta":{"origin":335231,"position":2},"title":"Exciting Things on the Horizon For CSS Layout","date":"May 7, 2020","format":false,"excerpt":"Michelle Barker notes that it's been a heck of a week for us CSS layout nerds. Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.Firefox supports gap for display: flex,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266161,"url":"https:\/\/css-tricks.com\/recreating-github-contribution-graph-css-grid-layout\/","url_meta":{"origin":335231,"position":3},"title":"Recreating the GitHub Contribution Graph with CSS Grid Layout","date":"February 2, 2018","format":false,"excerpt":"Ire Aderinokun sets out to build the GitHub contribution graph \u2014 that\u2019s the table with lots of green squares indicating how much you\u2019ve contributed to a project \u2013 with CSS Grid: As I always find while working with CSS Grid Layout, I end up with far less CSS than I\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2256,"url":"https:\/\/css-tricks.com\/css-tables-are-not-a-solution\/","url_meta":{"origin":335231,"position":4},"title":"CSS Tables Are Not a Solution","date":"February 17, 2009","format":false,"excerpt":"Eric Meyer said today in \"Wanted: Layout System\": Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it\u2019s arguably worse. Using element names other than table and td to create layout tables, and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20531,"url":"https:\/\/css-tricks.com\/learn-css-layout\/","url_meta":{"origin":335231,"position":5},"title":"Learn CSS Layout","date":"March 12, 2013","format":false,"excerpt":"Learn by seeing examples and code together in an easily digestible page-by-page format. Works on screens large or small, which we all know is darn important these days. By Greg Smith and Isaac Durazo.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335231"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=335231"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335231\/revisions"}],"predecessor-version":[{"id":335372,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335231\/revisions\/335372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/335232"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=335231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=335231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=335231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}