Introduction to Pattern Lab

In this episode of front-end tips we are going to look at something called Pattern Lab. It's a way to organise your HTML and CSS components and modules.

In this video we are going to take a look at Node/Gulp version of Pattern Lab, and I'm going to show you how to create atoms, make variants, how to use json data to render your components and at the end how to combine atoms into molecules.

[jangloe]

Very helpful to get started in my new job, thanks!
And also, the short infos about mustache was helpful to me :)

[manasiroy]

I found this tutorial which helps me a lot. In the last 5 years, no one create a tutorial like this. Thank You.

[nataliaavila]

Thank you very much for sharing your knowledge, this video helped me a lot, Pattern Labs are incredible!

[sagarkhanpara]

Thank you for this wonderful tutorial video, Really appreciate this...

[warfightermkey]

Thank you for the tutorial. It helped me out a lot. Keep up the good work!

[Ashan]

Thank you very much... really helpful walk through

[misaelalvarado]

What version of sublime text and theme are you using?

[dottn]

Thank you for this primer Ivan, it gave me the taste of it.
it would be nice you can show us how to build the bridge to Drupal 8.

Thank you again

[SamuelCuster]

What program are you using to remind yourself what you have to type next in the terminal?

[davidlundquist]

thanks for the video, I was at the London FrontEnd Meetup (London Ontario) where we saw a demo of PatternLab for Drupal, and I was impressed that once you got your widgets built they could be consumed as full-fledged twig templates.

Are you going to do a Twig PatternLab demo for OctoberCMS?

Thanks so much, great video.

[csilipo]

gr8 youtube for patternlab. Any chance you could do one on Drupal 8 and patternlab? Will Drupal adopt the patternlab to their new version of Drupal?

[the_wrong_folder]

Pattern Lab is interesting. Did Tailwind or Bootstrap (or similar CSS frameworks) use this approach for their development?
Thanks for the video!

[kingjames]

how would you use pattern lab with a responsive framework like bootstrap?

[ayukivlogs]

Any pattern lab video is available in hindi language? Then give me link...

[responsive_man]

Thank you for this awesome tutorials.. Can u make another video on this of Druapl + pattern lab..

[drewbefore]

Why are the styles not bundled together with the components? having 1 global css file for all of the components doesn't make any sense. How would you set this up so you can include a css file in each pattern. (like how every other component design system works)

[TimcoVanco]

I would like to make atoms, molecules...pages in Twig in PatternLab. Then I want to take these pages and use it in Pico.

Will that atoms (made in PatternLab) still be function in Pico?

[MahranMeher]

Thank you for the tutorial, but what's the benefit of using Pattern Lab it seems waaste of time, am i wrong or i just didn't its utility

[schiavone]

Nice.. you should be presenting at Baltimore DrupalCon

[dottn]

Around minute 20, the "for each" loop on twig would be:
<ul>
{% for item in list%}
<li>{{ item.name }}</li>
{% endfor %}
</ul>