kyleknighted

#!/usr/bin/env sh
readme=./src/assets/README.md
echo -n > $readme # clears or creates empty file

echo "# Icons" >> $readme # h1 title of README document
echo "| preview | name |" >> $readme # column names for table
echo "|:----:| ---- |" >> $readme # center align preview image and left align name


# loop through all icons

kyleknighted

{
  "plugins": [
    {
      "removeTitle": true
    },
    {
      "cleanupNumericValues": {
        "floatPrecision": 2
      }
    },

kyleknighted

icons-sketch:
    # https://developer.sketchapp.com/guides/sketchtool/
    /Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool export slices path/to/icons.sketch --formats=svg --output=src/assets/icons

icons-svgo:
    # https://github.com/svg/svgo/#cli
    ./node_modules/.bin/svgo --config=./svgo.json --folder=./src/assets/icons/ --output=./ui/src/assets/icons/ --multipass --quiet

icons-sprite:
    # https://github.com/jkphl/svg-sprite/blob/master/docs/command-line.md

kyleknighted

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "name": "Italicsify for Operator Mono",
      "scope": [
        "modifier",
        "this",
        "comment",
        "storage.modifier.js",
        "entity.other.attribute-name.js"

kyleknighted

<div class="block">
  <div class="block__element">Stuff</div>
  <div class="block__element--modifier">Red Stuff</div>
  <div class="block__element--and-another">Yellow Stuff</div>
  <div class="block__element--modifier block__element--and-another">Blue Stuff</div>
</div>

kyleknighted

<div class="block">
  <div class="block__element">Stuff</div>
  <div class="block__element--modifier">Red Stuff</div>
  <div class="block__element--and-another">Yellow Stuff</div>
  <div class="block__element--modifier block__element--and-another">Blue Stuff</div>
</div>

kyleknighted

<div class="block">
  <div class="block__element">Stuff</div>
  <div class="block__element--modifier">Red Stuff</div>
  
  <div class="block__element--modifier block__element--and-another">And Another</div>
</div>

kyleknighted

//
// Regular Expression for URL validation
//
// Author: Diego Perini
// Updated: 2010/12/05
// License: MIT
//
// Copyright (c) 2010-2013 Diego Perini (http://www.iport.it)
//
// Permission is hereby granted, free of charge, to any person

kyleknighted

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

kyleknighted

<div></div>