Geocode Earth Styleguide
How to use
Import the CSS into your project: ./node_modules/@geocodeearth/styleguide/styleguide.css
, then bombs away. That is the latest version of the styleguide. You could also include the styleguide through: ./node_modules/@geocodeearth/styleguide/_sass/_base.css
to compile the css yourself. Check out that file to just import pieces of bulma and the styleguide yourself.
Import with Jekyll
Jekyll automatically compiles sass files and any files referenced in those files. Referencing the styles when styleguide is installed via npm could be done by adding: @import "./node_modules/@geocodeearth/styleguide/_sass/_build";
to your main.scss file. That file could look like this:
---
# Important front matter
---
// override variables here
@import "_sass/_variables"
// import the styleguide, including bulma
@import "./node_modules/@geocodeearth/styleguide/_sass/_build";
// import your sass files
@import "_sass/your_sass_file"
// your styles
If your using jekyll-assets
which uses sprockets, you'll need to make an addition to your _config.yml
that looks something like this:
assets:
sources:
- _assets/
- node_modules
Development and Deployment
There are several npm scripts for compiling the css. Run npm run css-build
to build the css. Run npm run css-watch
to watch your sass changes and to compile on the fly. To place a new sass build into the css
folder run: npm run css-deploy
. Having the official deploy script separate from the script used in the styleguide means that you can commit to master while developing to avoid losing work or branching. Although branching is still recommended.
Note about the styleguide theme.
The styleguide is mostly static bulma with some slight component improvements. Those improvements provide a consistent base for us to build our application and editorial content. So the app and the marketing website and the documentation all use the same stylesheet. Changes to the styleguide can be performed in a downline repo and then backported easily.