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.