2

I have to redesign an existing M2-Shop with a given style guide. That guide defines structures for headlines, sub-lines, product etc. like a style guide does.

My problem is that there is no given structure in the less structure to change that easily.

Is that even possible to have a let's say boilerplate for CSS?

The styles are spread all over the less files. To say a headline H1 has to have a font size with 24px and a red text color and maybe a given line height that modifications I have also to change in every less file e.g. cms.less, product.less, product-list.less and so on.

Is there a way to simplify that?

Improve this question

2 Answers 2

Reset to default
0

Load your css at last after all the css and less files initiated it will automatically override the style

layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/newtheme.css" />
        </head>
</page>
Improve this answer
0

Maybe it's the easiest way to add your own .less file and in this file, you can override all the styles with your styles, from all over the page. You can write the code in less or in css - both will work. Place it in app/design/frontend/[Vendor]/[theme]/web/css/source/_extend.less. Just an example from my code:

@whiteColor: #fff;
@redColor: #f00;

.red-buttons {
  color: @whiteColor;
  background-color: @redColor;
  border: 0; 
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.