1. Semantic markup

2. Pattern Lab

A lightning talk by Eugen Baryshnikau

@Front-Trends 2015

Warsaw

1. Semantic markup

a cry from the heart

2000, inline styles, handmade :(

But W3C recommends...

Separation of

content & presentation

Content

SGML
XML
HTML
RSS
Atom
KML
etc.

Presentation

XSLT
XSL
CSS
...

And then...

FRAMEWORKS!

COMPILERS!

GRUNT! BOWER!

SCAFFOLDING!

STYLEGUIDES!

...

... PROFIT!

But how effective a technology is?

How do we use that progress?

2015, no inline styles :)

Really?

Text

No inline styles? Semantic?

<div class="wrapper">
    <div class="content-main">
         Content - Main
    </div>

    <div class="content-secondary">
        Content - Secondary
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="column-md-8 text-center">
            Content - Main
        </div>
        <div class="column-md-4 with-border">
            Content - Secondary
        </div>
    </div>
</div>

Using a framework?

Use mixins and inheritance!

@mixin @extend

Why is semantic markup important

TODAY?

Why is semantic markup important?

support / bugfix without bothering back-end developers and changing back-end templates
reusable code
human readable

Support / bugfix without bothering back-end developers and changing back-end templates

Reusable and human readable code

<section class="container container-of-some-type">
    <div class="wrapper">
        <article>
            <div class="article-thumbnail">...</div>
            <div class="article-title">...</div>
            <div class="article-content">...</div>
        </article>
        <article>..</article>
        <article>..</article>
        <article>..</article>
        ...
    </div>
<section>

So please, be semantic :)

Part 2. Pattern Lab

http://patternlab.io

Thank you!

Questions? Notes?

eugen.baryshnikau@gmail.com