Stack and libs:

• React
• Gatsby
• Animate.css
• SASS (SCSS) support

Create Your Starter

cd ..
mkdir gatsby-starter-site
git init
yarn init -y
yarn add gatsby-theme-luchoster-base gatsby react react-dom

Then create your config:

module.exports = {
  plugins: [
     {
       resolve: 'gatsby-theme-luchoster-base'
     }
  ],
}

The theme comes with Sass support. You can create a new folder src/styles/ and add a sass file main.scss (for example), and start writing your styles right out of the box.

If you would like to use some of the predefined mixins, breakpoints and/or functions, just include: @import '~gatsby-theme-luchoster-base/src/styles/main.scss'; at the top of your main styles file. This will allow you to:

• Use BEM Mixers:

  .block {
      color: #eee;
      @include modifier('block--mod') {
        color: #042;
      }
      @include element('block__elem') {
        color: #fff;
      }
  }

  Modifier

  <div className="block block--modifier">Modifier</div>

  Element

  <div className="block">
  	<div className="block__element">Element</div>
  </div>

  For more info about BEM Methodology, please visit: getbem.com

• Use animate.css:

  <div className="some-class animated zoomIn">Zoom in</div>

• Use Breakpoint Mixers:

  Based on @ajlkn's breakpoint.scss I modified it a bit to use the breakpoints defined here. To use this mixin, you just have to write:

  .hero {
      height: 350px;
      @include breakpoint(md) {
      	height: 550px;
      }
      @include breakpoint(lg) {
      	height: 750px;
      }
  }

  Now your mobile .hero height will be 350px, 550px for tablet and 750px for larger screens.