Bootstrap UI Drupal Theming

I thought I'd write a quickie on setting up Bootstrap Theme. It can be quite a headache for a UX/UI Designer/Developer and its the most used framework for Drupal and without research I'm pretty certain Wordpress too.

You can code your theme using developer tools like Ruby or Node which operate as compilers for either SASS or LESS the preprocessing code for CSS.

Often the main issue is which to choose, LESS having its attributes and SASS too, its up to you. There are GUI's but I use command line from terminal. 

Steps.
Download Bootstrap Theme.
Pull that into your theme directory
Choose which starterkit to work from LESS or SASS
Rename the SASS folder to you theme name. Edit the starterkit file to your .info file
Pull down the bootstrap framework into your theme with its own bootstrap folder ./myTheme/bootstrap/
You'll notice that in your copied theme folder SASS nw mytheme there is no RB config file. You need to now initialize this with your dev tool, like "compass init"

In the rb config file edit out the lines for using scss as your preference rather than sass and run the command that is written.
the rb config file looks like
 

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
 

so uncomment like the above "preferred_syntax = :sass"
and then run the command " sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass" in your terminal this will now compile your style.css file.

Run compass watch and your good to go.

If you need to clean your cache use = compass clean

 

 

 

designwebservices.com and webinmotion.co.uk © 2017