Don’t want a bloated framework you have to learn\/master just to be able to build a robust site structure that breaks down nicely into RWD (responsive web design)?<\/p>\n
We don’t either.<\/p>\n
For most projects we use a few simple reusable CSS classes to make RWD much easier. Frameworks like HTML5 boilerplate or Zurb’s foundation are great – but if you’re building something custom for a client or yourself, it’s nice if you don’t need a terrible amount of documentation. We don’t use 95% of the bloated JavaScript that comes with most frameworks, because we write our own. Same with CSS.<\/p>\n
So we use some simple classes all the time that have accelerated our RWD development.<\/p>\n
\r\n\r\n\/* reusable classes *\/\r\n.hidden { display: none; }\r\n.invisible {visibility: hidden; }\r\n\r\n\/* micro clearfix below. contains floats like .clearfix. *\/\r\n.cf:before, .cf:after { content: \" \"; display: table; }\r\n.cf:after { clear: both; }\r\n\r\n\/* need to clear floats instead of contain them? use this below. *\/\r\n.clear, .clear-both { clear: both; }\r\n\r\n\/* need to float things? we got you covered. *\/\r\n.left, .floatleft { float: left !important; }\r\n.right, .floatright { float: right !important; }\r\n\r\n\/* these are for images, below. gives a nice margin. sweet. *\/\r\n.alignright { float: right; margin: 0 0 15px 15px;}\r\n.alignleft { float: left; margin: 0 15px 15px 0;}\r\n.floatnone { float: none; }\r\n\r\n\/* need a middle-aligned header. don't write another CSS rule. just use these! *\/\r\n.text-left {text-align: left;}\r\n.text-right {text-align: right;}\r\n.text-center {text-align: center;}\r\n\r\n\/* magic. many combinations exists with simplicity. *\/\r\n.float20 { float: left; width: 20%; }\r\n.float25 { float: left; width: 25%; }\r\n.float33 { float: left; width: 33%; }\r\n.float50 { float: left; width: 50%; }\r\n.float66 { float: left; width: 66%; }\r\n.float75 { float: left; width: 75%; }\r\n.float80 { float: left; width: 80%; }\r\n\r\n<\/code><\/pre>\nBreaking down the CSS<\/h3>\n
So, let’s say you have a container split into one-third\/two-thirds. Use a .float33<\/strong> and a .float66<\/strong>. Bam! Easy.<\/p>\nUsing some code like this:<\/p>\n
<div class=\"cf\"><!-- like, clear your floats! --> \r\n <div class=\"float66\">stuff here<\/div> \r\n <div class=\"float33\">MOAR stuff<\/div> \r\n<\/div> <\/code><\/pre>\nYou’d get this:<\/p>\n
\nstuff here<\/div>\nMOAR stuff<\/div>\n<\/div>\n <\/p>\n
<\/p>\n
Then, when you get to your desired breakpoint, you just assign:<\/p>\n
.float33, .float66 { float: none, width: 100%; } <\/code><\/pre>\nto make them span the full container\/window\/etc. Like so:<\/p>\n
\nstuff here<\/div>\nMOAR stuff<\/div>\n<\/div>\nBut wait. You say you want the sidebar .float33<\/strong> to be on top when it hits the breakpoint?<\/p>\nJust put .float33<\/strong> above .float66<\/strong> in the DOM, and add a class of .right<\/strong>. Dishes are done!<\/p>\n<div class=\"cf\"><!-- like, clear your floats! --> \r\n <div class=\"float33 right\">MOAR stuff<\/div> \r\n <div class=\"float66\">stuff here<\/div> \r\n<\/div> <\/code><\/pre>\nAnd you get:<\/p>\n
\nMOAR stuff<\/div>\nstuff here<\/div>\n<\/div>\nI mean, really…<\/h3>\n
RWD does not need to be overly complicated. Yet frameworks often feel that way. Above may be too simple for every project, but they help us immensely in rapidly developing RWD sites.<\/p>\n
Reuse and recycle!<\/h4>\n","protected":false},"excerpt":{"rendered":"
Don’t want a bloated framework you have to learn\/master just to be able to build a robust site structure that breaks down nicely into RWD (responsive web design)? We don’t either. For most projects we use a few simple reusable CSS classes to make RWD much easier. Frameworks like HTML5 boilerplate or Zurb’s foundation are […]<\/p>\n","protected":false},"author":1,"featured_media":335,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"acf":[],"yoast_head":"\n
The easiest Responsive Web Design (RWD) Framework - User Experience Design, Strategy, and App Development | Travers+Todd<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The easiest Responsive Web Design (RWD) Framework - User Experience Design, Strategy, and App Development | Travers+Todd\" \/>\n<meta property=\"og:description\" content=\"Don’t want a bloated framework you have to learn\/master just to be able to build a robust site structure that breaks down nicely into RWD (responsive web design)? We don’t either. For most projects we use a few simple reusable CSS classes to make RWD much easier. Frameworks like HTML5 boilerplate or Zurb’s foundation are […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/\" \/>\n<meta property=\"og:site_name\" content=\"User Experience Design, Strategy, and App Development | Travers+Todd\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-30T06:22:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-07-19T02:35:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"813\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/\",\"url\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/\",\"name\":\"The easiest Responsive Web Design (RWD) Framework - User Experience Design, Strategy, and App Development | Travers+Todd\",\"isPartOf\":{\"@id\":\"https:\/\/traverstodd.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg\",\"datePublished\":\"2015-06-30T06:22:20+00:00\",\"dateModified\":\"2015-07-19T02:35:22+00:00\",\"author\":{\"@id\":\"https:\/\/traverstodd.com\/#\/schema\/person\/d08b7a6f55746db1e358218126f32bf6\"},\"breadcrumb\":{\"@id\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#primaryimage\",\"url\":\"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg\",\"contentUrl\":\"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg\",\"width\":1600,\"height\":813},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/traverstodd.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The easiest Responsive Web Design (RWD) Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/traverstodd.com\/#website\",\"url\":\"https:\/\/traverstodd.com\/\",\"name\":\"User Experience Design, Strategy, and App Development | Travers+Todd\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/traverstodd.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/traverstodd.com\/#\/schema\/person\/d08b7a6f55746db1e358218126f32bf6\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/traverstodd.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0993e33b53af46ecde067e7cfd6279b3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0993e33b53af46ecde067e7cfd6279b3?s=96&d=mm&r=g\",\"caption\":\"Mike\"},\"url\":\"https:\/\/traverstodd.com\/author\/mike\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The easiest Responsive Web Design (RWD) Framework - User Experience Design, Strategy, and App Development | Travers+Todd","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/","og_locale":"en_US","og_type":"article","og_title":"The easiest Responsive Web Design (RWD) Framework - User Experience Design, Strategy, and App Development | Travers+Todd","og_description":"Don’t want a bloated framework you have to learn\/master just to be able to build a robust site structure that breaks down nicely into RWD (responsive web design)? We don’t either. For most projects we use a few simple reusable CSS classes to make RWD much easier. Frameworks like HTML5 boilerplate or Zurb’s foundation are […]","og_url":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/","og_site_name":"User Experience Design, Strategy, and App Development | Travers+Todd","article_published_time":"2015-06-30T06:22:20+00:00","article_modified_time":"2015-07-19T02:35:22+00:00","og_image":[{"width":1600,"height":813,"url":"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg","type":"image\/jpeg"}],"author":"Mike","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mike","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/","url":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/","name":"The easiest Responsive Web Design (RWD) Framework - User Experience Design, Strategy, and App Development | Travers+Todd","isPartOf":{"@id":"https:\/\/traverstodd.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#primaryimage"},"image":{"@id":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#primaryimage"},"thumbnailUrl":"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg","datePublished":"2015-06-30T06:22:20+00:00","dateModified":"2015-07-19T02:35:22+00:00","author":{"@id":"https:\/\/traverstodd.com\/#\/schema\/person\/d08b7a6f55746db1e358218126f32bf6"},"breadcrumb":{"@id":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#primaryimage","url":"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg","contentUrl":"https:\/\/traverstodd.com\/wp-content\/uploads\/easy-responsive-framework.jpg","width":1600,"height":813},{"@type":"BreadcrumbList","@id":"https:\/\/traverstodd.com\/the-easiest-responsive-web-design-framework-by-traverstodd\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/traverstodd.com\/"},{"@type":"ListItem","position":2,"name":"The easiest Responsive Web Design (RWD) Framework"}]},{"@type":"WebSite","@id":"https:\/\/traverstodd.com\/#website","url":"https:\/\/traverstodd.com\/","name":"User Experience Design, Strategy, and App Development | Travers+Todd","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/traverstodd.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/traverstodd.com\/#\/schema\/person\/d08b7a6f55746db1e358218126f32bf6","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/traverstodd.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0993e33b53af46ecde067e7cfd6279b3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0993e33b53af46ecde067e7cfd6279b3?s=96&d=mm&r=g","caption":"Mike"},"url":"https:\/\/traverstodd.com\/author\/mike\/"}]}},"_links":{"self":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/posts\/334"}],"collection":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/comments?post=334"}],"version-history":[{"count":0,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/posts\/334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/media\/335"}],"wp:attachment":[{"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/media?parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/categories?post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/traverstodd.com\/wp-json\/wp\/v2\/tags?post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}