{"id":303953,"date":"2020-02-19T08:35:47","date_gmt":"2020-02-19T15:35:47","guid":{"rendered":"https:\/\/css-tricks.com\/?p=303953"},"modified":"2020-02-19T08:35:48","modified_gmt":"2020-02-19T15:35:48","slug":"same-html-different-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/same-html-different-css\/","title":{"rendered":"Same HTML, Different CSS"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>If this is an ah-ha moment for you, awesome! It might be worth knowing that this exact concept essentially excited an entire generation of front-end developers, in no small part due to the concept of the <a href=\"http:\/\/www.csszengarden.com\/\" rel=\"noopener\">CSS Zen Garden<\/a>, where the entire website was a fixed set of HTML and only CSS changes birthed some incredible creativity.<\/p>\n\n\n\n<p>Of course, we typically <em>do<\/em> get our hands into HTML when doing redesign work, but this is still a fun exercise that drives home the power of CSS. I wonder if JavaScript-powered components are what delivers this awe today, because they have a similar power of abstraction: make changes to a component and see the impact across an entire site. Only instead of the idea being rooted in constraint, there are no constraints. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. If this is an ah-ha [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":303993,"comment_status":"closed","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\/2020\/02\/same-html-different-css.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":173207,"url":"https:\/\/css-tricks.com\/web-technologies-hanging-together\/","url_meta":{"origin":303953,"position":0},"title":"Web Technologies Hanging Out Together","date":"June 24, 2014","format":false,"excerpt":"As a beginner, understanding how the different languages you learn interact with each other can be confusing. I thought we could pair up a variety of languages to see where they intersect and communicate. HTML and CSS You need HTML to have CSS, because HTML calls the CSS. In an\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332086,"url":"https:\/\/css-tricks.com\/a-terrible-way-to-do-footnotes-in-html\/","url_meta":{"origin":303953,"position":1},"title":"A (terrible?) way to do footnotes in HTML","date":"January 13, 2021","format":false,"excerpt":"Terence Eden poked around with a way to do footnotes using the <details>\/<summary> elements. I think it's kind of clever. Rather than a hyperlink that jumps down to explain the footnote elsewhere, the details are right there next to the text. I like that proximity in the code. Plus, you\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/details-summary-footnote.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":155839,"url":"https:\/\/css-tricks.com\/html-imports\/","url_meta":{"origin":303953,"position":2},"title":"HTML Imports","date":"November 12, 2013","format":false,"excerpt":"Essentially a way to import a block of dependancies (scripts and styles) into an HTML document. It doesn't actually just plop the content from the referenced file where you call it though, like an @import does in CSS or and include does in a server side language. HTML could very\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351143,"url":"https:\/\/css-tricks.com\/__trashed-7\/","url_meta":{"origin":303953,"position":3},"title":"You don&#8217;t need external assets in an HTML file","date":"September 1, 2021","format":false,"excerpt":"A fun exercise from Terence Eden. You can send an HTML file over the wire including anything a website might need without requesting any other files. CSS and JavaScript are easy, because there are <script> and <style> tags. Images and fonts (and pretty much whatever other kind of asset) aren't\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/broken-html.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353473,"url":"https:\/\/css-tricks.com\/expandable-sections-within-a-css-grid\/","url_meta":{"origin":303953,"position":4},"title":"Expandable Sections Within a CSS Grid","date":"October 15, 2021","format":false,"excerpt":"I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. I\u2019m quite comfortable wrangling CSS Grid to produce interesting layouts, while keeping the HTML markup clean and simple. But recently, I was\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/grid-expanded.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303926,"url":"https:\/\/css-tricks.com\/considerations-for-creating-a-card-component\/","url_meta":{"origin":303953,"position":5},"title":"Considerations for Creating a Card Component","date":"March 2, 2020","format":false,"excerpt":"Even a simple Card component can be tricky to design an API around. What abstraction are you providing? How much control do you want to give? If you make it too flexible, you aren't providing much value. If you make it to rigid, you also aren't providing much value.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/component-variations.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\/02\/same-html-different-css.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303953"}],"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=303953"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303953\/revisions"}],"predecessor-version":[{"id":303994,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303953\/revisions\/303994"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/303993"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=303953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=303953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=303953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}