Bootstrap 4 & Gulp Starter

About

I use the understrap framework for wordpress sites and wanted a simpler version for prototypes, landing pages, and simple sites.

Website: https://understrap.com

Child Theme Project: https://github.com/understrap/understrap-child

Confused by All the CSS and Sass Files?

Some basics about the Sass and CSS files:

The theme itself uses the /style.cssfile only to identify the theme inside of WordPress. The file is not loaded by the theme and does not include any styles.
The /css/theme.css and its minified little brother /css/theme.min.css file(s) provides all styles. It is composed of five different SCSS sets and one variable file at /sass/theme.scss:

@import "../src/bootstrap-sass/assets/stylesheets/bootstrap";  // 2. All the Bootstrap stuff - Don´t edit this!
@import "../src/fontawesome/scss/font-awesome"; // 3. Font Awesome Icon styles
// Any additional imported files //
@import "theme/theme";  // 4. Add your styles into this file

Don’t edit the number 2-3 files/filesets listed above or you won’t be able to update Understrap without overwriting your own work!
Your design goes into: /sass/theme.
- Add your styles to the /sass/theme/_theme.scss file
- And your variables to the /sass/theme/_theme_variables.scss
- Or add other .scss files into it and @import it into /sass/theme/_theme.scss.

npm install

Open your terminal
Change to the directory where you want to add UnderStrap
Type npm install

Developing With npm, Gulp and SASS and [Browser Sync][1]

Installing Dependencies

Make sure you have installed Node.js and Browser-Sync (optional) on your computer globally
Then open your terminal and browse to the location of your UnderStrap copy
Run: $ npm install

Running

To work with and compile your Sass files on the fly start:

$ gulp watch

Or, to run with Browser-Sync:

First change the browser-sync options to reflect your environment in the file /gulpconfig.json in the beginning of the file:

{
    "browserSyncOptions" : {
        "proxy": "localhost/theme_test/", // <----- CHANGE HERE
        "notify": false
    },
    ...
};

then run: $ gulp watch-bs

Footnotes

[1] Visit http://browsersync.io for more information on Browser Sync

Licenses & Credits

Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT documentation under CC BY 3.0.) and of course
jQuery: https://jquery.org | (Code licensed under MIT)
https://understrap.com/

JacobLett/bootstrap-4-gulp-starter