DevDmBootstrap3

Twitter Bootstrap 3 WordPress Starter Theme for Developers

40376146This theme is intended to be used with the included LESS files. I suggest using a program to compile them as you work like WinLess. I wrote a blog post about LESS compilers that might help you if you are unsure what to do here. http://devdm.com/blog/less-compilers-for-windows/

This is a standard Bootstrap LESS setup with two additional files.

1) custom.less – This file contains a .clear class and a couple fixes for the footer menu “hover ups” being impossible to navigate to.

2) wordpress.less – This file contains all the specific WordPress style hokum (Bazinga!) for the Theme Unit test to pass and cleans up some generated WordPress classes.

Thats it! Everything else is standard.

Your workflow should be designed in such a way that you edit LESS files to change styles and all you compile is bootstrap.less into bootstrap.css as it includes all the required LESS files to generate the correct CSS output for the theme. You are using a child theme right? Go grab this child theme template to help you.

Here is what the default bootstrap.less looks like.

 

2 Comments

  • dima says:

    I have one little question: I use lessc (I’ve installed it with npm on my system), and I was wondering what should be compiled?
    I use it like this:
    $ lessc less/bootstrap.less css/bootstrap.css
    and while the css/bootstrap.css file contains all my modifications, it appears that isn’t loaded by wordpress. Am I doing something wrong?

    • danny says:

      Hey Dima,

      Make sure your child theme’s css file has this at the top.

      @import "css/bootstrap.css";

      Or you can wp_enqueue the style inside your functions.php file.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">