:warning: Old, do not use :warning:

These styles quite are old and don't reflect what a modern CSS setup should look like.

The Frontend starter kit contains much better starter CSS code. While you may not need everything in the starterkit for your particular project, the CSS reflects everything in this repo... but better.

Frontend starter styles

The building blocks of CSS at Springload

Using the styles

Clone the project on your computer, install Node and Yarn. This project also uses nvm.

cd ~/Development/sites/
git clone git@github.com:springload/frontend-starter-styles.git
# Go to your project
cd YOUR_PROJECT_NAME
# Copy the sass folder's contents from the starter-styles to your project
# eg. cp -a source destination
cp -a ../PATH_TO_STARTER_STYLES/frontend-starter-styles/src/sass/. ./PATH_TO_YOUR_FOLDER_INSIDE_YOUR_PROJECT/sass

See the css guidelines we follow here at springload. You can build on top of these styles in your project.

Working on this project

Installation

From the command-line:

cd ~/Development/sites/
git clone git@github.com:springload/frontend-starter-styles.git
cd frontend-starter-styles

To install our dependencies:

nvm install
# Then, install all project dependencies.
yarn install

Start working

Everything mentioned in the installation process should already be done.

This is the architectural base for css that we work with at Springload. Build on top of this as you wish, but here are the css guidlines we follow.

Should you choose to run any of this project's build tasks, it uses node-sass by way of node-sass-chokidar, and PostCSS.

# Make sure you use the right node version.
nvm use
# Start the server and the development tools.
yarn start
# Builds stylesheet for development
yarn build
# Builds stylesheet for production
yarn dist
# Runs linting.
yarn lint

Code linting

The project's code is linted with Stylelint.

Improvements

Add any improvements you think could be made here:

Add an example / kitchen sink page with all the components.
CSS grid as another grid object
...

springload / frontend-starter-styles