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

Text

Text

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

Made with Slides.com