Skip to content

Latest commit

 

History

History
25 lines (17 loc) · 1.09 KB

README.md

File metadata and controls

25 lines (17 loc) · 1.09 KB
Raw

Markup example. Landing page.

Note

This markup shows an example of using sass together with the ecss approach. It was actually implemented around beginning of 2021 for the portfolio. I did a refactoring of it in the end of 2023. If you consider my repositories as my portfolio - please take a look at more modern markups in my profile which using scss, BEM and mobile-first approach.

TWIG | SASS | ECSS

Webpack5 config - https://github.com/ekunitsa/webpack5

Figma - https://www.figma.com/file/fGcXIuVSaPBMO4UcDsPZD4 (from free sources, layout in russian language)

Result url - https://github.ekunitsa.com/markup-example-sass-ecss/

For start

  • npm i
  • npm run start

СSS methodology - ECSS

Documentation: https://ecss.benfrain.com/

With some nuances:

  • camelCase;
  • desktop first;
  • "is-" handle states;
  • At the time when I developed this layout - I worked in a company where several sites could be under one admin panel (multi-site). That's why we used the prefix as a unique site identifier. Here I kept this logic when developing. "gst-" is a unique site identifier which means "German Standard".