npm install
npm run serve
npm run build
npm run build:staging
npm run test:unit
npm run lint
We use vue-svg-loader
& image-webpack-loader
s when working with SVG.
If you wish to inline an SVG follow these instructions.
- Place the image in the
assets
folder. - Import it into the component and add the
?inline
query.<script> import InlineSVG from '../assets/star-full.svg?inline'; </script>
- Then use like a normal component
<template> <inline-svg /> </template>
TODO - Update this file so that it provides a clear overview of how the styling is structured. Introduce conventions but leave it to the README files at each level to provide deeper explanation to contexts and uses.
Just dumping some notes I have lying around on my laptop.
Some class prefixes that may help us apply some context and understanding to the classes we're using.
o- : Object
c- : Component
u- : Utility
t- : Theme
s- : Scope
is- : State
js- : JS hook
a- : Analytics hook
Some ID prefixes (to be used in the markup itself) that may help us identify the purpose of an ID. Styling should NEVER be bound to these IDs.
skip- : Skip link hook
labelledby- : Form label/input paring
Useful ITCSS architectures I've looked at:
- https://github.com/xfiveco/generator-chisel/tree/master/generators/app/templates/styles/itcss
- https://github.com/aarongarciah/itcss-sample/tree/master/src/scss