[...]... it’s in the styling that the magic happens: grid-container { width: 95%; margin-left: auto; margin-right: auto; max-width: 1180px; } grid-row { clear: both; float: left; width: 100%; } row-4 col-3 { width: 74.5%; margin-left: 2%; } row-4 col-3 grid-unit { width: 31.63%; margin-left: 2.555%; margin-right: 0; } row-4 col-3 grid-unit:first-child { margin-left: 0; } As you can see, all the widths and margins... strong starting point, we can make plenty of inroads toward a responsive web design Now we’ll change our device target and look at the benefits of going back to the drawing board A First Look at Mobile-first Design Despite the responsive web design movement being in its infancy, schools of thought are already forming around ways to change the basic approach One of them is mobile-first (MF) design, ... class="vcard session-info active"> Craig Sharkie Responding to Responsive Design Craig has been a regular at Web Directions South... multiple designs to accommodate larger and smaller devices, the design moves fluidly depending on the browser size Fluid grids take on the heavy lifting and leave you to focus on design instead of structure, so let’s look at that structure now We’ll focus on those For home columns once more: ... means that we can streamline our CSS and deliv- er both code and CSS to the user more quickly Before we look at our CSS, we’ll add that sample content back in for emphasis: chapter01/snippets/speaker_html5.html (excerpt) Craig Sharkie Responding to Responsive Design ... physical location, as Web Directions South 2012 demonstrates in Figure 1.7 Figure 1.7 Web Directions South 2012 could show you the schedule when you arrive at the venue So, there you have it Responsive web design is the logical reaction design and developer communities are taking in the face of broad and disruptive upheaval from modern devices The community is looking to establish a future-proof practice... dynamic content Let’s start with the big picture Fluid grids, the first pillar of RWD, are the natural successor to the fluid layouts that were hot topics in 2006 when the 800-to-1024 discussion was on the table Fluid typography plays a role here too, as your content needs to be as responsive as your layout Laying the Web out in grids and columns has been the dream of designers since the Web began Implementations... operating procedure Once we’ve made the RWD transition, all applications will be built this way Refit or Restart So we know that responsive web design is something that just makes life easier for our users When, though, is the best time to start incorporating RWD in your process? Is it best to start from scratch when adopting an RWD approach? Is it best to leave your current application standing and... class="grid-row row-3 features"> The preceding code is a cleaned and smartly indented version of the code you’ll find at microsoft.com In it, the structure of the columns stand out, and the classes on the div elements make it even easier to read We can focus on the class names alone, actually, and work our way back up our DOM We start. .. names alone, actually, and work our way back up our DOM We start with three single grid-units wrapped in a grid-row Then we work back up through the col-3, which creates the columns, and on to another grid-row with four children, because of the row-4, before we reach the parent gridcontainer Then we finish at the row-padded element We use div elements as there’s no better HTML5 element for us We simply . Boilerplate JUMP START RESPONSIVE WEB DESIGN BY CRAIG SHARKIE & ANDREW FISHER Jump Start Responsive Web Design by Craig Sharkie and Andrew Fisher Copyright © 2013 SitePoint Pty. Ltd. Product Manager:. more. About Jump Start Jump Start books provide you with a rapid and practical introduction to web development languages and technologies. Typically around 150 pages in length, they can be read. that has caused the need for Re- sponsive Web Design (RWD)—an approach to web design that places the user firmly as the focus. Changes in devices aren’t new, of course; it’s the pace and breadth