DevDmBootstrap3

Twitter Bootstrap 3 WordPress Starter Theme for Developers

If you are using the SASS child theme in your DevDmBootstrap3 project there are a few things you’ll need to know about compiling it. There are also a couple important notes.

Notes

  • The main DevDmBootstrap3 bootstrap.css file is being dequeued in the child theme’s functions.php file. The SASS child theme is shipping with a pre-compiled bootstrap.css that is imported in the style.css file. I did it this way to simply avoid any awkward conflicts between the compiled SASS and LESS versions. There might not be any but I didn’t want to take the chance.
  • The main SASS file you need to compile into CSS is located at /sass/bootstrap.scss.
  • There is an include package.json and a gruntfile.js. If you are using the “No nodeJS” compiling method you can ignore these. See Option 2 below about how they are used with a simple nodeJS / compass workflow.

Option 1 “No nodeJS required workflow”

Use an external SASS compiler. I like http://koala-app.com/. Simply open Koala and drag in the /sass directory. It will compile/watch bootstrap.scss and in the included scss files for changes. Start editing the boostrap scss files that are being pulled in bootstrap.scss and your changes will be compiled automatically into the css/bootstrap.css. Simple.

Option 2 “Using nodeJS, gruntJS, and compass.”

I’ve included a package.json file so you can simply cruise to the directory in your dev environment and run the ole “npm update.” Once it is done pulling down the dependencies just run “grunt” and it will automatically start the watcher and compiler. Minimize that window and get to work customizing the bootstrap scss files. It will compile into the css/bootstrap.css as you make changes.

This is a pretty standard workflow that most advanced SASS users are used to. If you don’t know what nodeJS is (it can be a pain to get it all setup) just use an external compiler as described in Option 1. You will have the same outcome and it is much easier if nodeJS isn’t in your current workflow.

5 Comments

  • Mauricio Arcehelizaga says:

    Hi, Thank you for creating this great theme.

    I have years of experience with CSS but I’m quite new to LESS. I’m a bit confused with how to compile the LESS files. I’m using a mac, if it makes any difference.

    The site I’m working on is online. I’m not sure what to use to compile it, do I have to install a plugin?

    • danny says:

      Hey Mauricio,

      Basically your workflow will be this. Download DevDmBootstrap3 -> Download a devdmbootstrap3 child theme -here is a link to the LESS version (link).

      All of your work will take place in the child theme so when an update is ran on DevDmBootstrap3 you don’t lose everything. Inside the child theme you will find a LESS directory. You will point your compiler (a piece of external software) to this directory and have it only compile bootstrap.less as that includes the rest of the LESS files (that you can edit) to customize your theme.

      A google search for “LESS Compilers Mac” will lead you to a lot of different solutions for this.

      SimpleLess is one but there are many others. Many IDEs will also have LESS compilers built in. But the basic idea remains the same.

      I hope this helps!

      – Danny

  • mike says:

    how to include media screens

    @media only screen and (max-width : 480px) {

    • danny says:

      Hey Mike,

      To make sure this loads with some authority I like to put media queries like this inside this file devdmbootstrap3-sasschild/sass/bootstrap/_custom.scss. It is one of the last files to be compile inside devdmbootstrap3-sasschild/sass/bootstrap.scss. You can always move that include inside that file to the end to make sure it is the LAST thing compiled if you are having trouble. Let me know if you need more help. You can email me the files you are working with danny@devdm.com if you want me to take a look. Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *