{"id":306641,"date":"2020-04-13T14:51:34","date_gmt":"2020-04-13T21:51:34","guid":{"rendered":"https:\/\/css-tricks.com\/?p=306641"},"modified":"2020-05-25T06:47:04","modified_gmt":"2020-05-25T13:47:04","slug":"no-class-css-frameworks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/no-class-css-frameworks\/","title":{"rendered":"No-Class CSS Frameworks"},"content":{"rendered":"\n<p>I <a href=\"https:\/\/css-tricks.com\/water-css\/\">linked<\/a> up <a href=\"https:\/\/kognise.github.io\/water.css\/\" rel=\"noopener\">Water.css<\/a> not long ago as an interesting sort of CSS framework. No classes. No <code>&lt;h2 class=\"is-title\"&gt;<\/code>. You just use semantic HTML and get styles. Is that going to &#8220;scale&#8221; very far? Probably not, but it sure is handy for styling things quickly, where \u2014 <em>of course<\/em> \u2014 you&#8217;re writing semantic HTML but don&#8217;t need to care tremendously about the look, other than it should look as decent as it can with low effort. <\/p>\n\n\n\n<p>This week I saw <a href=\"https:\/\/andybrewer.github.io\/mvp\/\" rel=\"noopener\">MVP.css<\/a> making the rounds. Same idea. There are a bunch more!<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul><li><a href=\"https:\/\/kognise.github.io\/water.css\/\" rel=\"noopener\">Water.css<\/a><\/li><li><a href=\"https:\/\/andybrewer.github.io\/mvp\/\" rel=\"noopener\">MVP.css<\/a><\/li><li><a href=\"https:\/\/raj457036.github.io\/attriCSS\/\" rel=\"noopener\">AttriCSS<\/a><\/li><li><a href=\"https:\/\/igoradamenko.github.io\/awsm.css\/elements.html\" rel=\"noopener\">awsm.css<\/a><\/li><li><a href=\"https:\/\/kimeiga.github.io\/bahunya\/\" rel=\"noopener\">Bahunya<\/a><\/li><li><a href=\"https:\/\/evgenyorekhov.github.io\/holiday.css\/src\/index.html\" rel=\"noopener\">holiday.css<\/a><\/li><li><a href=\"http:\/\/markdowncss.github.io\/\" rel=\"noopener\">Markdown CSS<\/a><\/li><li><a href=\"https:\/\/codepen.io\/mblode\/pen\/JdYbJj\" rel=\"noopener\">Marx<\/a><\/li><li><a href=\"https:\/\/oxal.org\/projects\/sakura\/demo\/\" rel=\"noopener\">Sakura<\/a><\/li><li><a href=\"https:\/\/css-pkg.github.io\/style.css\/\" rel=\"noopener\">style.css<\/a><\/li><li><a href=\"https:\/\/vasanthv.com\/stylize.css\/demo.html\" rel=\"noopener\">Stylize.css<\/a><\/li><li><a href=\"https:\/\/github.com\/edwardtufte\/tufte-css\" rel=\"noopener\">Tufte CSS<\/a><\/li><li><a href=\"https:\/\/yegor256.github.io\/tacit\/\" rel=\"noopener\">Tacit<\/a><\/li><li><a href=\"https:\/\/writ.cmcenroe.me\/\" rel=\"noopener\">Writ<\/a><\/li><li><a href=\"https:\/\/newcss.net\/\" rel=\"noopener\">new.css<\/a><\/li><li><a href=\"https:\/\/github.com\/marcop135\/bullframe.css\" rel=\"noopener\">bullframe.css<\/a><\/li><\/ul>\n\n\n\n<p>Even <a href=\"https:\/\/get.foundation\/sites.html\" rel=\"noopener\">Foundation<\/a>, while being a big honkin&#8217; framework, does some pretty decent stuff classless-ly&#x2122;. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No &lt;h2 class=&#8221;is-title&#8221;&gt;. You just use semantic HTML and get styles. Is that going to &#8220;scale&#8221; very far? Probably not, but it sure is handy for styling things quickly, where \u2014 of course \u2014 you&#8217;re writing semantic HTML but [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":306705,"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":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/classless-css-framework-logos.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":356652,"url":"https:\/\/css-tricks.com\/semantic-menu-context\/","url_meta":{"origin":306641,"position":0},"title":"Semantic menu context","date":"November 11, 2021","format":false,"excerpt":"Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a list. I would suspect the intention is much like <nav> is today, but I really don't know.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/menu-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377565,"url":"https:\/\/css-tricks.com\/accessible-forms-with-pseudo-classes\/","url_meta":{"origin":306641,"position":1},"title":"Accessible Forms with Pseudo Classes","date":"March 22, 2024","format":false,"excerpt":"Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"Web Form Accessibility with focus-within","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/03\/focus-within-form-accessibility.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301616,"url":"https:\/\/css-tricks.com\/water-css\/","url_meta":{"origin":306641,"position":2},"title":"Water.css","date":"January 10, 2020","format":false,"excerpt":"It's notable that Water.css was the #1 clicked thing from Louis Lazaris' Web Tools Weekly in 2019. It's from a 13-year old developer named Felix! It's just a little bit of CSS you apply to class-free semantic HTML to give it nice basic responsive styles \u2014 the perfect kind of\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/water-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303953,"url":"https:\/\/css-tricks.com\/same-html-different-css\/","url_meta":{"origin":306641,"position":3},"title":"Same HTML, Different CSS","date":"February 19, 2020","format":false,"excerpt":"Ahmad Shadeed covers the idea of a card component that has a fixed set of semantic HTML with some BEMy classes on it. There is a title, author, image, and tags. Then he redesigns the card into five totally different designs without touching any of the HTML just the CSS.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/same-html-different-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375952,"url":"https:\/\/css-tricks.com\/unchain-my-inaccessibly-labelled-heart\/","url_meta":{"origin":306641,"position":4},"title":"Unchain My Inaccessibly-Labelled Heart","date":"December 14, 2022","format":false,"excerpt":"Suzy Naschansky from the HTMHell Advent Calendar: <h2 id=\"article1-heading\">All About Dragons<\/h2> <p>I like dragons. Blah blah blah blah blah.<\/p> <p> <a id=\"article1-read-more\" aria-labelledby=\"article1-read-more article1-heading\">Read more<\/a> <\/p> See that aria-labelledby attribute? It chains two IDs from the markup, one for the heading (#article1-heading) and one for the link (#article1-read-more). What happens\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/chain-id-aria-labelledby.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325239,"url":"https:\/\/css-tricks.com\/copyediting-with-semantic-html\/","url_meta":{"origin":306641,"position":5},"title":"Copyediting with Semantic HTML","date":"November 17, 2020","format":false,"excerpt":"Tracking changes is a quintessential copyediting feature for comparing versions of content. While we\u2019re used to tracking changes in a word processing document, we actually have HTML elements capable of that. There are a lot of elements that we can use for this process. The main ones we\u2019ll look at\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/browser-copy-edit.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/classless-css-framework-logos.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306641"}],"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=306641"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306641\/revisions"}],"predecessor-version":[{"id":311653,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306641\/revisions\/311653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/306705"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=306641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=306641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=306641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}