ryanve

<span class="modal-dialog-title-close" role="button" tabindex="0" aria-label="Close"></span>

ryanve

<button type="button" name="cancel" class="send-invite__cancel-btn" data-ember-action="" data-ember-action-3746="3746">
  <span class="svg-icon-wrap">
    <span class="visually-hidden">Close</span>
    <li-icon aria-hidden="true" type="cancel-icon">
      <svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon">
        <g class="large-icon" style="fill: currentColor">
          <path d="M20,5.32L13.32,12,20,18.68,18.66,20,12,13.33,5.34,20,4,18.68,10.68,12,4,5.32,5.32,4,12,10.69,18.68,4Z"></path>
        </g>
      </svg>
    </li-icon>

ryanve

const fs = require('fs')
const yaml = require('js-yaml')

const transform = ({target, source, options}) => {
  fs.readFile(source, 'utf8', function(err, data) {
    if (err) throw err

    data = yaml.safeLoad(data)
    data = yaml.safeDump(data, options)

ryanve

.mt0-between:not(:first-child) { margin-top: 0 }
.mt1-between:not(:first-child) { margin-top: var(--space-1) }
.mt2-between:not(:first-child) { margin-top: var(--space-2) }
.mt3-between:not(:first-child) { margin-top: var(--space-3) }
.mt4-between:not(:first-child) { margin-top: var(--space-4) }

.ml0-between:not(:first-child) { margin-left: 0 }
.ml1-between:not(:first-child) { margin-left: var(--space-1) }
.ml2-between:not(:first-child) { margin-left: var(--space-2) }
.ml3-between:not(:first-child) { margin-left: var(--space-3) }

ryanve

• Prefer em for media queries. https://zellwk.com/blog/media-query-units/

ryanve

Videos: https://youtu.be/rapO30fpREg

ryanve

• https://www.mapbox.com https://www.mapbox.com/about/open/

ryanve

• balanced grid
• wrapping grid
• 4 grid directions
• equal height columns
• push footer
• horizonal centering
• vertical centering
• sequencing

ryanve

benefits

• responsive grow and shrink properties
• direction agnostic
• wrapping grids
• powerful alignment abilities

examples

• Methods for Aligning Flex Items along the Main Axis

ryanve

.unborder { border: 0 }
.unborder-top { border-top: 0 }
.unborder-left { border-left: 0 }
.unborder-right { border-right: 0 }
.unborder-bottom { border-bottom: 0 }

.unborder-column:first-child { border-top: 0 }
.unborder-column:last-child { border-bottom: 0 }
.unborder-row:first-child { border-left: 0 }
.unborder-row:last-child { border-right: 0 }