View span.html
<span class="modal-dialog-title-close" role="button" tabindex="0" aria-label="Close"></span>
View close.html
<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>
View sort.js
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)
View between.css
.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) }
View challenges.md
  • balanced grid
  • wrapping grid
  • 4 grid directions
  • equal height columns
  • push footer
  • horizonal centering
  • vertical centering
  • sequencing
View flexbox.md