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.
The building blocks of CSS at Springload
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/sassSee the css guidelines we follow here at springload. You can build on top of these styles in your project.
From the command-line:
cd ~/Development/sites/
git clone git@github.com:springload/frontend-starter-styles.git
cd frontend-starter-stylesTo install our dependencies:
nvm install
# Then, install all project dependencies.
yarn installEverything 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 lintThe project's code is linted with Stylelint.
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
- ...