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
ft2015
By Eugen Baryshnikau
