digital design

CSS Grids - Web layout moves closer to how a Graphic Designer does grids. by ciro correia

I don't think I've ever spoken to a designer or developer who loves how CSS manages layout issues, we understand it and manipulate CSS to obey us but I think we all dislike how it works. BUT WAIT! The CSS gods have heard our cries, tada! CSS Grids are now gaining widespread support in most if not all browsers - of course I suppose we'll still have to use HTML tables to craft our emails cause email apps are sadly stuck in the dark ages but maybe one day that'll change too. 

Using CSS grids closely resembles how graphic designers approach grids, this means creating layouts are not only easier in HTML/CSS but also mirror how a designer thinks about working with space. All that frustration when building a webpage layout flies out of the window, we can easily port over that mathematical structure you lovingly crafted in your visual design. Here's the HTML I created for a basic structure - bear in mind this was using columns and rows similar to any grid structure I might have built in any other creative app and without manipulating floats or absolute/relative positioning in any way.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Grids</title>
</head>
<body>
<div class="container">
    <div class="grid header">header</div>
    <div class="grid sidebar">sidebar</div>
    <div class="grid content">content</div>
    <div class="grid extra">extra</div>
    <div class="grid footer">footer</div>
</div>
</head>
</html>

The divs are in a nested structure, the container div will be declared as a grid within the CSS. The classes define the layout for each grid div. The external CSS file uses CSS grids, here is the CSS file content:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
        grid-column-gap: 10px;
        grid-row-gap: 15px;
    }
    
.grid {
    background-color: #DC7633;
    color: #fff;
    padding: 25px;
    font-size: 3rem;
     }
     
.header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    }
    
.sidebar {
    grid-column-start: 1;
    grid-coumn-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
    background: #A3E4D7;
    }
    
.content {
    grid-column-start: 2;
    grid-coumn-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #a0c273;
    height: 400px;
    }
    
.extra {
    grid-column-start: 2;
    grid-coumn-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #D98880;
    }
    
.footer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #2471A3;
    }

If you copy and paste the two different portions into a .html and styles.css file respectively and then open up the html file in a browser you'll be able to see how I put together a basic structure with CSS grids. Simply.

Read me wax lyrical about grids.

Cool resource on CSS Grids.

Urban Waves website UX - Rapid Prototype by ciro correia

Screen capture of UX, taking user journey from home page through to the product page. A new project up on my Graphic Design portfolio. Graphic Design Portfolio

Anyone working on a prototype knows how Sketch has made things easier, workflow from research, design, prototype to handoff. I've been using Adobe XD recently which feels like Adobe is finally offering a great alternative to Sketch without the need for plugins to achieve a good working prototype. Granted, there is still some work to be done before XD gets on par with Sketch- but they're getting there fast. An obvious plus for XD is that Illustrator and Photoshop are part of the package, being part of the same software family. I'm looking for the ability to more easily integrate Photoshop and illustrator into my workflow if need be, without complicating XD's light-weight feel. Another handy thing that would be nice to see incorporated into XD is a hand-off with online style guide and inspector feature (apparently this is on the way). Prototyping feels sublime, I usually have one monitor open on design view and the other in preview mode. The experience is satisfying as you see things update in 'real-time'. More prototyping tools and functions would be a great addition as well, but I think most would agree that Adobe XD is on the right track.