anfibiacreativa

// direct access to variables in the package, 
// because we declared the path in the includePaths array of the sassOptions for the loader
@import 'all_imports';

// which means we have all the colors in the scheme and don't have to do color
// definitions per components!
// which is really bad!!!

.teaser {
  &__base {

anfibiacreativa

// let's suppose here you have a general configuration that exports the path to sources like this
// get the node modules path
const nodemodules = path.join(cwd, 'node_modules');
const includePaths = [nodemodules, ]

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,

anfibiacreativa

<!-- This headline should be dinamic, so you can choose the hN, as appropriate -->
<h2 class="title__hl">
  <span class="title__title">Some title here</span>
</hl>

anfibiacreativa

.teaser {
  &__base {
    display: inline-block;
    padding: 30px 0;
    border: 1px solid grey;
  }
  
  &__outerWrapper {
    display: flex;
    flex-direction: column;

anfibiacreativa

<!-- 
This is the teaser monolithic. 
All goes in one file, which prevents you from decoupling and reusing styles.
:(
-->
<div class="teaser__base teaser__align--center">
  <div class="teaser__outerWrapper">
    <div class="teaser__wrapper">
    <img class="teaser__img" src="https://loremflickr.com/480/240" alt="random image"/>
  </div>

anfibiacreativa

<!-- 
This is the teaser composite.
For the sake of simplicity, it only has an image an a button.
Could also have a description, tags, social media buttons,
etc
-->
<div class="teaser__base atomic-align--center">
  <div class="teaser__wrapper">
    <!-- Let's include here out image -->
    <picture>

anfibiacreativa

<!-- This is just the dynamic wrapper of the teaser -->
<div class="teaser__base">
  <!-- I added an additional wrapper to have more room for maneuver. We can now create different layouts using flexbox -->
  <div class="teaser__outerWrapper">
    <div class="teaser__wrapper"></div>
    <div class="teaser__wrapper"></div>
  </div>
</div>

anfibiacreativa

<!-- This is the markup output -->

<picture class="picture__base">
   <source srcset="image-cropped?witdh=480" media="(min-width: 480px)">
   <source srcset="image-cropped?witdh=768" media="(min-width: 768px)">
   <source srcset="image-cropped?witdh=1024" media="(min-width: 1024px)">
   <img class="picture__img" src="cropped?witdh=480.png" alt="image-alt">
</picture>

anfibiacreativa

<!--
Let's describe a button with their respective css classes, in BEM
This is the output, you probably have a framework of some sort, dnamically outputting this
particularly the svg icon.
We are not reflecting accesibility labels or other attributes.
-->
<button class="button__base" type="button">
  <span class="button__label">Click me!</span>
  <svg class="button__icon icon-class">
      <use xlink:href="#icon-class"></use>

anfibiacreativa

<!--/* Firsy of all, you need to import the clientlibs template */-->
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
 
<!--/* You can then use the call API, to call the right clientlib category, for the right use case. In the example below
you're calling the js files only, for the 'my.category' category */-->
<sly data-sly-call="${clientLib.js @ categories='my.category'}" />

<!--/* Supposing you have special style rules for your authoring mode, you can test for wcmmode and include the right styles too
while avoid requesting them in publish, for performance sake */-->
<sly data-sly-call="${clientLib.css @ categories='my.category.author'}"