Changes in CSS of Pattern Lab not working

Question

I am new to Pattern Lab. I have installed Pattern Lab PHP Mustache Template.

I can edit patterns and see changes on the output. However if I edit the css files, changes don't reflect on the output. I use php core/console --generate to generate files but still won't work on the css.

How do I generate the CSS so that the changes would reflect on the output?

Thanks.

Answer 1

In your css code use !important Like this,

div{
background-color: red !important;
}

This should definetly work.

Answer 2

That would be because Pattern lab styleguide is rendered in an iframe. So all the generated CSS is living there.

In order to change it, you should fork the styleguide starterkit and customize it as suggested here: https://github.com/pattern-lab/patternlab-php/issues/380.

You can customize Pattern Lab's UI by forking this: https://github.com/pattern-lab/styleguidekit-assets-default and adjusting the styles and markup there.