GSB Theme - gsb_theme
A custom Drupal theme that provides the look and feel for the public Stanford Graduate School of Business site.
This is a Drupal theme, and requires the gsb_theme.info file. Further documentation is available on Drupal.org.
The theme requires a Ruby version in the Gemfile.
This project requires Bundler to manage ruby and ruby gem dependencies and versions. Bundler includes a Gemfile and Gemfile.lock in the theme's root.
If you do not already have Bundler on your system, you can install it by running the command
sudo gem install bundler from the command line.
Installing the bundle
To install the project's bundle for the first time, from the gsb_theme directory run
This command should then download the gems the project requires.
The bundle only needs to be installed once.
Using the bundle
Once the bundle is installed, in order to use it, you must use the executable
bundle exec before any commands.
bundle exec compass compile or
bundle exec compass watch.
Updating the bundle
From time to time you may need to update or add ruby gems.
The gem name should be added to the Gemfile, and then run the command
Commit the changes made to the Gemfile, along with the resulting changes made to Gemfile.lock.
This project uses the CSS extension language Sass to author CSS, specifically, the indented Sass syntax.
The Sass syntax is white-space sensitive, and will not allow
In some cases, newer features have not been implemented for the Sass syntax to date, in which case Scss is needed.
The Sass settings are configured in
- This project is compiled using Compass, and also uses some mixins that are provided by the framework.
- Please check-in both the Sass and resulting compiled CSS changes together in the same commit to version control.
- This project uses Breakpoint to manage media queries.
- Variables for the media queries are created in
We are using Font Custom to generate our icon font based on the method outlined by Jayden Seric.
- Not using the
%iconextend, in order to use the icon mixin nested under an
- Moved the
@font-faceset up into
Adding or changing icons
- The icon font only needs to be compiled if a new icon is being added, or we need to change and existing icon.
- Using the icon template, export an svg, and place it in the
- In the
CSSdirectory contains the compiled CSS sheets from the Sass directory.
- The CSS should not be edited directly, as those changes will be removed upon compiling.
- Global CSS should be added in the
.infofile, and conditional CSS should be added in
- The font files that are used for the theme are in the
- This directory also contains an
iconsdirectory, which is where the font custom generated icon font and its configuration is.
- Fonts are added using
- All images used in the theme are in the
- This includes the icon svg files in a sub-directory called
- If it is an external library it is in the
Custom panels layouts directory.
- Within the
sassdirectory, there is a
conditionalsdirectory and a
conditionalsdirectory contains Sass sheets that compile to their own individual CSS sheets.
partialsdirectory contains a
designdirectory and style.sass sheet.
basedirectory contains partials that set up our theme including variables, mixins, extends, defaults, and layouts.
designdirectory contains partials that apply globally to the theme, and all are imported in the
- Overridden and customized templates are in the
- Avoid use of template (.tpl.php) files whenever possible.
- When overriding a template file, copy the original and rename as appropriate, and then commit it.
- Make the actual changes to the file in a separate commit.
- Favor preprocess hooks over theme functions over template files.
- Declarations should be in alphabetical order, except for positioning with top, right, bottom, left which can follow the position declaration.
- List parent-specific declarations directly under the class selector, then list parent states
- List the indented child selectors last
- Partials are named by the machine name of the content type.
- Selectors should be
Legacy browser support
- Browser specific changes for IE are made by using a class.
- For example, use
.ie8 &under the element that you need to adjust, with declarations nested beneath the browser class.