#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    80
    Rep Power
    5

    Wordpress + Grunt + Bootstrap + SASS Questions


    Hi,

    I am learning Grunt and I have a general question on the workflow. For this project, I'll be using Grunt, Bootstrap and Sass.

    I do not want to have duplicated code anywhere and since I can edit some of the variables for Bootstrap (colors, etc..), I am trying to figure out how I should handle this without complicating things as well as making development for other developers easier. I do not want other developers to have any difficulties figuring out the workflow.


    File Structure
    assets / sass
    - modules
    -- _utility.scss
    -- _colors.scss
    -- ...

    - partials
    -- _base.scss
    -- _buttons.scss
    -- _figures.scss
    -- ..

    - vendor
    -- _bootstrap.scss
    -- _bootstrap-custom-variables.scss
    -- _colorpicker-1.1.scss
    -- ...

    style.scss


    Note - Grunt will load the bootstrap sass directory before compiling the Sass.

    My questions:
    1. I used SASS in the past but not with Bootstrap (or any frameworks). It's seems like a good idea to edit the variables within bootstrap to avoid having to overwrite rules. However, I feel like it might be complicating things. Should I edit the variables for Bootstrap or just leave it alone?

    2. Should I compile my vendor files separately into CSS then minify, then concat the vendors files with the style.css to create style.min.css ?

    So in my css folder, it will contain a folder called "vendor" which will have all the compile versions (colorpicker-1.1.css for example).

    3. Should I just import all the files into my style.scss file, compile it, minify it and call it a day?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2015
    Posts
    50
    Rep Power
    2
    Usually, you define your variables before you import the bootstrap.sass files:

    Code:
    $body-bg: #f3f3f3;
    
    @import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
    1. I used SASS in the past but not with Bootstrap (or any frameworks). It's seems like a good idea to edit the variables within bootstrap to avoid having to overwrite rules. However, I feel like it might be complicating things. Should I edit the variables for Bootstrap or just leave it alone?
    You should /never/ be able to edit vendor files. They're dependencies that can be installed, but are used, not maintained.

    That being said, Bootstrap was written to allow changing of variables like I did above.

    3. Should I just import all the files into my style.scss file, compile it, minify it and call it a day?
    That's what I do. Additionally, I name mine a hash of the timestamp it was created on, then instruct the server to cache JS and CSS assets for as long as possible. The reason is that if an update does occur, it will have a different hash and therefore the browser will already fetch it again.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    80
    Rep Power
    5
    Ok so in the vendor folder, I should only have the _bootstrap-custom-variables.scss file. Then in my style.scss file, import _bootstrap-custom-variable.scss then import the bootstrap file from the node_modules folder?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2015
    Posts
    50
    Rep Power
    2
    Sounds like how I have my projects setup. Your mileage will vary based on what libraries you use. I use Webpack and a few plugins
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2015
    Posts
    50
    Rep Power
    2
    Wait, I misread that: your "vendor" folder is basically your "node_modules" folder. What package manager do you use for installing front-end packages?

IMN logo majestic logo threadwatch logo seochat tools logo