vitto

@import 'https://gist.githubusercontent.com/vitto/e98cb01f1680eb4452b6b1837744cf67/raw/9c3ee4944660b6584b895dd64926fb9dda6eac8b/maps.scss';
@import 'https://gist.githubusercontent.com/vitto/e98cb01f1680eb4452b6b1837744cf67/raw/9c3ee4944660b6584b895dd64926fb9dda6eac8b/math.scss';
@import 'https://gist.githubusercontent.com/vitto/e98cb01f1680eb4452b6b1837744cf67/raw/9c3ee4944660b6584b895dd64926fb9dda6eac8b/media.scss';
@import 'https://gist.githubusercontent.com/vitto/e98cb01f1680eb4452b6b1837744cf67/raw/9c3ee4944660b6584b895dd64926fb9dda6eac8b/scaffolding.scss';
@import 'https://gist.githubusercontent.com/vitto/e98cb01f1680eb4452b6b1837744cf67/raw/9c3ee4944660b6584b895dd64926fb9dda6eac8b/ease.scss';
@import 'https://gist.githubusercontent.com/vitto/e98cb01f1680eb4452b6b1837744cf67/raw/9c3ee4944660b6584b895dd64926fb9dda6eac8b/vars.scss';

vitto

{
  "name": "workshop-bem-and-sass",
  "version": "1.0.0",
  "description": "A repo with examples to learn how to work with BEM in SASS Edit",
  "main": "index.js",
  "scripts": {
    "build": "npm run clean && cd frontend && ..\\node_modules\\.bin\\webpack.cmd --progress --profile --colors --env=prod && npm run pre-deploy",
    "clean": "shx rm -rf build/* & shx rm -rf node_modules/metalsmith/source/* & shx rm -rf node_modules/metalsmith/assets/*",
    "pre-deploy": "shx rm -rf dist/* &&  shx cp -a frontend/build/. dist/",
    "serve": "cd frontend/build && python -m SimpleHTTPServer 8000",

vitto

The workshop steps:

00-start-from-scratch
01-exercise-results
02-layout
03-component-button
04-component-tag
05-component-tooltip
06-component-input-checkbox

vitto

//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js
//code.jquery.com/jquery-2.2.3.min.js

var events, checkEvents;

var roundHalf = function(num) {
    return Math.round(num*2)/2;
}

var addDuration = function() {

vitto

<svg id="svg-element">
    <path class="your-background-fill" width="100" height="75"></path>
    <path class="other-background-fill" width="100" height="100"></path>
</svg>

vitto

// this should be set in your theme app.less file
 
.addContainerRow(row);

@hdSteps                  : 12;                     // this will generate 12 columns rules like hd-#-of-12
@tabletSteps              : 4;
@smartphoneSteps          : 2;
@fillFromViewport         : "smartphone-landscape"; // until smartphone landscape, columns will be set to 100% width
@viewTotalColumns         : true;                   // this will prepend -of-12 at the bottom of the generated rule
@columnsSeparator         : -of-;

vitto

// this should be set in your theme's app.less file

// Example 1

.addContainerRow(
    row-3-columns,
    3, // Full HD columns
    3, // HD Ready columns
    2, // Tablet landscape columns
    2, // Tablet portrait columns

vitto

<div class="my-selector"></div>

vitto

@hdFullPadding              : 6em 3em;
@hdReadyPadding             : 5em 3em;
@tabletLandscapePadding     : 4em 2em;
@tabletPortraitPadding      : 3em 2em 1em 2em;
@smartphoneLandscapePadding : 2em 2em 1em 2em;
@smartphonePortraitPadding  : 1em;
 
.addPaddingRule(
    my-padding-rule,
    @hdFullPadding,

vitto

.addPaddingSelector(false, 1em, 1em);
.addPaddingSelector(big, 3em, 3em);