Great Designs deserves Excellent Developments

Fit your Sketch designs with Angular more Grid & Flexbox

In terms of development precise, meticulous and scrupulous doesn’t mean perfect, but almost. We normally start from something like

Screenshot of Sketch Design we have to develop

So imagine you receive a Sketch file, should I do exactly as the design is? Well, if it is a great design deserves to do pixel by pixel.

I am going to summarise as much as I can some approach and methodologies for you to achieve development products that match visually and aesthetically in a 99% its designs…and of course with my favourite framework, Angular.

Have a look to that 👇

Design vs Solution in Development, almost identical

Theory

Maybe very clear for some people, but very unknown for many others

Layouts are the culmination of defined spatial rules and the organisation of content into one single composition. Bringing together your content into thoughtful structures is the easy part, making it all flow together with a clear hierarchy across a sea of changing platforms and screen sizes is the hard part…

Grids are useful in layout design because they help structure and organise content. Although grids are invisible in the user-facing design, it’s easy to tell at a glance whether a layout follows a grid system…

The foremost purpose of a grid — in graphic design at least — is to establish a set of guidelines for how elements should be positioned within a layout. Not only does an effective grid provide the rhythm for a design, but it also defines the meter.

Here a couple of links pointing to an interesting post for having quick look about the history behind and another one talking to some concepts regarding to spatial system, grid and layouts

In practice

Sketch

Layout Settings in Sketch

Grid Settings in Sketch

Development

The persistence of grid-based design in web and app design has also been a challenge for developers shaping web standards. In the early days of the web, developers often used tables to organise a layout. Since then, standards have evolved and we now have systems like Flexbox and CSS Grid which offer a basic framework for faithfully implementing grid systems in websites and apps.

You could think of flexbox as “one dimensional.” While flexbox can make rows and columns in the sense that it allows elements to wrap, there’s no way to declaratively control where elements end up since the elements merely push along a single axis and then wrap or not wrap accordingly. They do as they do, if you will, along a one-dimensional plane and it’s because of that single dimension that we can optionally do things, like align elements along a baseline — which is something grid is unable to do.

You could think of grid as “two dimensional“ in that we can (if we want to) declare the sizing of rows and columns and then explicitly place things into both rows and columns as we choose.

Grid is mostly defined on the parent element. In flexbox, most of the layout (beyond the very basics) happen on the children.

Nice article to read

https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

Now, we can build whatever Responsive Layout / Grid for apps with those tools.

There are already some very nice built-in frameworks / libraries defining Responsive Layout Grid like Material Design or Bootstrap.

However, I encourage you to build a custom one deciding what is better for the project with your UX colleagues

Challenge cases, all pieces together…

Defining Layouts in Sass

Layout in Sketch

Variables for Layout with Sketch

How is the code?

Using Grid (yes, grid in development; layout in designs)

src/assets/styles/_layout.scss

// Layout System in Large Devices
$layout-column-width-lg: 94px;
$layout-gutter-width-lg: 28px;

app.component.scss

@import '_layout';
@media screen and (min-width: 1024px) {
column-gap: $layout-gutter-width-lg;
grid-template-columns: repeat(12, $layout-column-width-lg);
grid-template-rows: 534px 266px;
grid-template-areas:
"area-1 area-1 area-1 area-1 area-1 area-1 area-1 area-2 area-2 area-2 area-2 area-2"
"area-3 area-3 area-3 area-3 area-4 area-4 area-4 area-4 area-5 area-5 area-5 area-5";
}

Our Development in Firefox with Inspector Dev Tools showing us our Layout System

We just cover the position in the parent element, the code can change a little but the philosophy is the same

Defining Grids in Sass

Grid in Sketchs

Variables for Grid with Sketch

src/assets/styles/_grid.scss

// Grid System in Large Devices
$grid-cell-lg: 16px;
$grid-block-lg: 10 * $grid-cell-lg;

Now, zooming

Logo

app.component.scss

...
.img {
    &--logo {
       position: absolute;
       left: 0;
       right: 0;
...
       @media screen and (min-width: 1024px) {
          margin-top: $grid-cell-lg * 4;
          margin-left: $grid-cell-lg * 4;
        }
}

The point here is that we are now able to put every single piece of the design in the correct place

Flexbox

Yes, flexbox for everything else like …

For example

Menu and its width

menu.component.html

...
<div class="menu">
    <span class="item">home</span>
    <span class="item">shop</span>
    <span class="item">about</span>
    <span class="item">contact</span>
</div>

menu.component.scss

...
width: 243px;
display: flex;
justify-content: space-between;
...

I will leave you here the repo on GitHub

ackuser/nx-room-homepage

and the link to the site

Frontend Mentor | Room homepage

just in case you want to have a deeper look

✍ Conclusion ✍

Support your developments with Layout, Grid over your design and using Css/Sass with Grid and Flexbox in Angular is the best option to me to make 1 to 1 pixel from Design to Development.

This design & challenge was taken from Frontend Mentor is such a great place to make yourself grow up professionally by allow you to improve your skills practising development.

👣 Next Steps 👣

This post helps me to show you how I solved part of the challenge. In next posts we will see other things related with Angular and other problems so stay tuned!!!