Skip to content

Style Configuration

Patrick Sachs edited this page Dec 17, 2018 · 4 revisions

The Helios style configuration file.

This configuration file can be found under /src/config/style.sass(Does not exist by default, but /src/config/style.example.sass can be copied as a good starting point). If you are following along with the Getting Started tutorial simply go ahead and type this:

$ cp src/config/style.example.sass src/config/style.sass

Most of the time this should be good enough. The only time you need to actually edit this file is if you want to fine tune the CSS used by Helios.

If you want to do so, follow along, if not feel free to move on.

$ code src/config/style.sass

This will fire up Visual Studio Code and let you edit the configuration file.

The file itself uses the SASS syntax. SASS is a CSS language extension. Read more about SASS here: https://sass-lang.com/

Helios is written in Bulma CSS framework and tries to adhere to its standard as much as it can. Thus overriding styles set for Bulma classes is the best way to go. You can find the Bulma documentation here: https://bulma.io/documentation/

The !important keyword can be a very useful tool to enforce the usage of the styles set by your SASS file.

If absolutely want to use CSS you can convert your CSS to SASS using this tool: http://css2sass.herokuapp.com/