The following commands are available:
# install node packages
yarn
# run the development server
yarn dev
# compile the production build
yarn build
# start the production server
yarn start
# run the linter for .js, .jsx and .scss
yarn lint
# run jest tests
yarn test
# watch jest tests
yarn test:watch
- All React classes should be named with upper camel case naming convention (ReactComponent).
- All other files should use the lower camel case naming convention (reactComponent).
- All files in the
/src/client/containers
folder should end with Container.
-
Due to use of both webpack (no cascading variables/functions) and foundation (separation of utilities and css output), there's a few tricky parts to the sass structure.
-
src/client/app/_config.scss
is a file containing only utilities and variables, it should never output css._config.scss
can be included in any component scss file to give access to foundation utilities/variables and other custom variables. Additional custom variables should be added here (ex: color map). -
src/client/app/App.scss
is the global css. It first loads_config.scss
and then loads_foundation-components.scss
which outputs the css of desired foundation components (add/remove foundation components here). App.scss should only be called once (inside App.jsx). Additional global css should be added here (ex: setting body background color).
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
# single name blocks
.block
.block__element
.block--modifier
# multiple name blocks
.block-grid
.block-grid__element
.block-grid--modifier
# multiple name modifiers and elements
.block
.block__element-name
.block--modifier-name
- All
.scss
files should match 1:1 with a component. - Non-component
.scss
files should be placed within the/src/client/app
folder.