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

<!-- 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

<!-- 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 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 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

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

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

// 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

// 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

[alias]
	co = checkout
	com = commit -am
	aa = add -A
	cot = checkout --track
	st = status
	sta = stash save
	stal = stash list
	bll = branch -a
	blr = branch -r