SUL Styles

Installation

Add this line to your application's Gemfile:

gem 'sul_styles'

And then execute:

$ bundle install

Import the SUL Styles in your app/assets/stylesheets/application.scss.

// Imports SUL SCSS Variables
@import 'sul-styles';

// Imports sul-icons
@import 'sul-icons-rails';
@import 'sul-icons-aliases';
// Helper classes used in icons
@import 'sul-icons/helpers';

Rather than importing the sul-icons-rails styles, it's recommended to use the hosted version of this style for caching purposes.

<html>
  <head>
    <link rel="stylesheet" href="https://sul-cdn.stanford.edu/sul_styles/0.5.0/sul-icons.min.css">
    <!-- or
    <link rel="stylesheet" href="https://sul-cdn.stanford.edu/sul_styles/0.5.0/sul-icons.css">
    -->
    ...

See the styles in your browser

After including the gem in your Rails project, you will be able to access the styleguide within your application at http://127.0.0.1:3000/styleguide. These routes are only available in the development and test environments.

Check your local application for SUL Styles provided colors

$ bundle exec rake sul_styles:check_local_colors
The color #8c1515 is present in app/assets/stylesheets/sul-variables.scss. This color is provided by SUL Styles under the variable $color-cardinal-red.

Styles supported

SCSS Variables for SU Identity

Stanford University identity colors added as SCSS variables

Common Date Formats

Common date formats that should be used in a variety of contexts

Date Format	Example
`'%d-%b-%Y'`	29-Jul-2015

Contributing to the icon font

You can add icons to the icon font by doing the following:

Make sure to have the current icons (checkout .fontcustom-manifest.json) as svg files located in the icon_svgs directory. These cannot be stored in version control due to licensing issues.
Install FontCustom
Run fontcustom compile

The new font should be generated under assets/fonts

Styles should be automatically generated under assets/stylesheets

Notes

Make sure to make use of _sul-icons-aliases.scss for creating easy to use aliases.

Make sure to use semantic versioning when adding to or updating the icon fonts

Don't change the svg's filename (it should be the same as the source it came from)

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/sul-dlss/sul_styles.

sul_styles

Development

Runtime