Skip to content Skip to navigation

Styling on Sites: Introduction to Open Framework

This is the third post in my series, Styling on Sites. Last time we looked at how to use the great and powerful module, CSS Injector. In this post I'm going to introduce you to our new responsive base theme, Open Framework.

Introducing Open Framework

As of April 9th, all Drupal 7 websites on Stanford Sites now have access to the new responsive theme, Open Framework. This theme was developed in-house at Stanford Web Services, and it is open source and based on Bootstrap (formerly known as Twitter Bootstrap). It provides a set of responsive block regions that enable you to build complex responsive layouts, just by placing blocks in the appropriate regions.

To get started taking advantage of Open Framework, build some blocks. These can be menu blocks, views block displays, or custom blocks. Use the Regions Demo Page on Open Framework to figure out which region to drop blocks into in order to get the layout you want.

If you want to learn more about site building using Stanford's themes, watch this video:

(If you are interested in learning even more about our family of Drupal 7 themes, check out this video: Introduction to Stanford's Repsonsive Drupal Themes.)

Open Framework Theme Options

To access the theme options for Open Framework, navigate to: Appearance > Settings > Open Framework. Here you can toggle on and off the logo, title, slogan, menus, etc. You can set a custom logo, shortcut icon, and hide/show breadcrumbs. You can choose a custom background image, or choose a border style. This can help with some default styles that you want to implement on your site.

Customizing Open Framework

Open Framework gives you a good foundation to get started with your site (you get all of Bootstrap and more!), but it is also a great jumping off point for adding on a layer of custom styles. For those of us on Stanford Sites, we can use CSS Injector to add style overrides to customize the look and feel of our site, but if you are using Open Framework on a different hosting solution, feel free to create your own subtheme to store all of your custom styles. Read my second post in this series for instructions for using CSS Injector to customize styles.

Using what's out there: Bootswatch

What's great about using a popular framework like Bootstrap, is that thousands of people around the world are working with the same framework, and there are a lot of great examples of how you can customize Bootstrap styles. One of those great examples is Bootswatch. We can take some CSS from one of the Bootswatch themes, and apply it directly to our website using CSS Injector. This is a fast and easy way to spruce up your Open Framework website.

Here's how it's done:

  1. Find a theme on Bootswatch that you like. In this case, I've chosen the Amelia theme.
  2. Click download and choose the bootstrap.css file.
  3. Open the CSS file, and copy all of it.
  4. Create a new CSS Injector rule.
  5. Paste in the Bootswatch theme CSS.
  6. Make sure to set your rule to exclude the following paths so that you only see the styles on the front-end of your site:
    admin
    admin/*
    node/add/*
    node/*/edit
  7. Save your rule.
  8. Voilà!

My site went from drab:

Open Framework

To fab:

Bootswatch theme

You may need to do a little cleanup or custom CSS to really make it look good, but hey! This gets you that much closer to your own custom theme.

Categories: 

Comments

The Bootswatch trick is pretty cool - even I got it to work! I used the "Readable" version - http://bootswatch.com/readable/.

It looks like just copy-pasting bootstrap.css into a CSS Injector rule takes away the delicious Bootstrap responsiveness at different breakpoints :(

Thanks for catching that. It's true, by blanket copy/pasting Bootswatch theme code, you can introduce complications when it comes to responsive behaviors. Be sure to test any changes you make (obviously I didn't in this blog post haha) to your CSS to make sure that your site still works at each screen size. In the future, I'm planning a blog post about techniques for testing responsive behavior.

Bootswatch is open source and you’re welcome to modify the themes. Each theme consists of two LESS files. variables.less, which is included by default in Bootstrap, allows you to customize these settings. Bootswatch.less introduces more extensive structural changes.
http://www.psdtoresponsivehtml5.com