Note: Sorry to say, but I don't have enough time to complete this Theme, it didn't work out as I planned to be. I will come out with some sexy high-tech theme in summer when I'll get lots of time.
- Omega 4.x ---- drush dl omega
- Sass ---- gem install sass
- Compass ---- gem install compass
- Sass Globbing ---- gem install sass-globbing
- Compass rgbapng ---- gem install compass-rgbapng
This project is different than Omega-subtheme, as it is created to ease the process of using Omega 4.x with Bootstrap and start developing from there. The folder structures are also different.
Important Folder/File Structure:
- style.css --- The one compiled CSS from the Sass
- preprocess --- Hook preprocess can be placed here
- process --- Hook process are placed here
- bootstrap --- All the Sass files from Bootstrap Framework
- components --- This is the file where you design CSS for Drupal modules and pages
- utility --- The extra declarations for your theme
- config.rg --- The main config file for Sass
- rasp.info ---- The holy lord of Theme info
- template.php ---- Template Overrides
- theme-settings.php ---- Your own settings for the theme
As the Omega Theme says, it uses the industry best practices for building beautiful web, so, the separation of processes and Sass files makes it even more beautiful.
This will be confusing without a proper tip, so.
Lets assume you have to design a Block.
You created a new block called raspi
In this Block, you have Header, Body Text, Link in body text and Footer.
Edit sass/utility/variables/_colors.scss file.
$raspi__background: rgba(#fff, 0.6);
$raspi__header-font: "Times New Roman";
Go-To sass/components/blocks folder and create a new file called _raspi.scss and add some styles there.
Add the class .block__raspi to your markup and its all ready to go. You don't need to include the SCSS file for Sass to compile. Since it uses Sass-Globbing all the folders and files under the components are automatically added and compiled to one style.css
It doesn't look like Bootstrap, where is the Big Green Button ?
This is starter theme, you have to add you own classes to the markup.
What about other Bootstrap jQuery Plugins ?
Its all there, just uncomment it from rasp.info or add it if not available. All other Js libraries are under libraries folder. To use Bootstrap js you need minimum jQuery 1.7. Since Drupal 7 ships with jQuery 1.4, the bootstrap.js is disabled by default. The alternative is to use jQuery Update Module and select 1.7 version or above.
Can I use any other CSS Framework except Bootstrap ?
Yes, if you want to use other CSS Frameworks like 960gs, zen-grids, gumby, etc. then copy the framework folder to sass folder, and edit the style.scss file. Comment out the @import "bootstrap/bootstrap" and add your favourite framework.