Override/extend suit CSS

[gamesbook]

If this is a bug please specify versions you're using first.

Django version: 1.10.7 Django Suit version: 2.0a1 Python version: 3.5.3

Issue:

I need to be able to change some of the default colors that suit uses for styling.

The approach seems to be suggested in https://github.com/darklow/django-suit/blob/v2/docs/contribute.rst#sass-compiling

However, when I try the first step npm install, I get:

npm ERR! install Couldn't read dependencies
npm ERR! Error: ENOENT, open '/path/to/project/code/package.json'

which implies my project needs some type of config file. I have not used npm or bower before; it seems like a whole extra set of dependencies for what should be a simple operation?

[darklow]

Maybe you forgot to checkout v2 branch? Here I just tried following and it works:

git clone https://github.com/darklow/django-suit.git
cd django-suit/
git checkout v2

JS part:

npm install
bower install

Python part:

virtualenv env
source env/bin/activate
pip install -e .
pip install -r requirements-dev.txt
pip install -r demo/requirements.txt
python demo/manage.py runserver 0.0.0.0:8000

Now run gulp task in parallel, it will open http://localhost:8001/, if not - open http://localhost:8001/ manually

gulp

Now you can change any .scss file and it will hot reload css automatically, try:

vim django-suit/suit/sass/_variables.scss

#Change: 
$brand-primary: #4298DE; 
# to
$brand-primary: red; 

# and save and see hot reload happening

Now you can replace original suit.css by placing resulting django-suit/suit/static/suit/css/suit.css into you projects project/static/suit/css/ folder (make sure your project app is before suit in INSTALLED_APPS)

I suggest you extend using some _custom_variables.scss which is included after _variables.scss in https://github.com/darklow/django-suit/blob/v2/suit/sass/suit.scss#L1 file therefore whenever there is newer version of suit all you need to do is just git pull, run gulp again and redeploy resulting suit.css.

[gamesbook]

@darklow Thanks for the detailed instructions. The version of suit I have was downloaded via https://github.com/darklow/django-suit/tarball/v2 - should this not work? I also ran the npm and bower install inside the virtualenv; is that incorrect?

[darklow]

npm and bower have no relation to python env, they should be run in root folder where package.json file is. After run you will see node_modules and bower_components folders where packages are installed.