Layouts in the world of mobile devices

Rakuten Tech Conf 2017

@renettarenula

Aysha Anggraini

@renettarenula

aysha.me

codepen.io/rrenula

Old Grid System

  • Floats

  • Inline-blocks

CSS Grid

  • Better layout system

  • Simpler than current grid-based frameworks 

  • Not affected by source order of HTML

<div class="row">
    <div class="col s12">
        <div class="header"></div>
    </div>
</div>

<div class="row">
    <div class="col s12 l8">
        <div class="about"></div>
    </div>
    <div class="col s12 l4">
        <div class="episodes"></div>
    </div>
</div>

Current grid system

  • Row wrappers

  • Floats clearing

  • Complicated Markup

<!-- HTML -->
<div class="wrapper">
    <div class="header"></div>
    <div class="about"></div>
    <div class="episodes"></div>
</div>

CSS Grid

  • No row wrappers

  • CSS instead of HTML

  • Simpler Markup

.wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    display: grid;
}

.header {
    grid-column: 1fr;
}

1

2

3

1

2

3

What about browser support?

Think of layout as an enhancement

@support

Feature Queries

.wrapper {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(2, 1fr);

     @media (min-width: 728px) {
        width: 25%;
        grid-template-columns: repeat(4, 1fr);
    }
}

article {
    // for non-supported browser
    // has no effect when grid is supported and applied
    display: inline-block; 
}

article {
    width: 100%;
    
    @media (min-width: 728px) {
        width: 25%;
    }
}

@support (display: grid) {
    // reset width when grid is supported
    .wrapper > * {
        width: auto;
    }
}

Using Feature Queries in CSS

by Jen Simmons

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

Grid by Example

by Rachel Andrew

https://gridbyexample.com/

@renettarenula

aysha.me

codepen.io/rrenula

Thank You!

Layouts in the world of mobile devices

By Aysha Anggraini

Made with Slides.com

Layouts in the world of mobile devices

Laying out content on the web is one of the many challenges of responsive web development. Positioning content and ensuring consistent behaviour on smaller to larger screen devices requires hacks and workarounds that can be frustrating to wrestle with and when employed wrongly, can make code harder to maintain. Fortunately, the rise of responsive web development has also increased the number of tools that we can use in order to make our workflow easier. The new CSS Grid specification is one of such examples that gives us the power to control grid structures through CSS instead of HTML making laying out content to be easier. In this talk, I will walk you through the future of laying out content on the web.

  • 784

More from Aysha Anggraini