Stylesheets

Contents

File structure
SCSS
Bourbon
Compression
Map
Responsive design
Bootstrap

One of the first ways you'll want to modify the look of your site is by changing css stylesheets. onCourse comes with a set of default stylesheets to make your life easier, so you will probably start with a copy of our template-a, template-b or template-c. These in turn build on our base stylesheets which we update once a year or so.

Because you are building on existing stylesheets, lots of things are already taken care of for you. Your html/css developer can save weeks of work with our existing responsive layouts, grid and basic styling.

File structure

First let's see where all the files are. To make it easier to navigate, all the CSS is broken up into lots of files within a set of folders.

Start inside the '/s/stylesheets' folder in WebDAV. You'll see two folders: 'css' and 'src'. It is important that you do not edit the files in 'css' directly, but instead only edit the files in 'src'.

/s/stylesheets/src/

Start by looking at the file site.scss. That's the top of the stylesheet structure and it includes all the other files you need. Look for lines like this:

@import "application/settings";

We recommend you create a new file with your customisations and add a reference to that from site.scss. Don't remove the import of the 'base' stylesheets. That import brings in the core stylesheet definitions which are required for your onCourse site: shortlists, course and class listings, enrolment templates and much more. Override them however you want, but they will save you a lot of work rather than starting from scratch.

SCSS

If you didn't recognise the @import command above as CSS, that's because onCourse uses a variation of CSS called SCSS (also known as SASS). This extends the basic stylesheet concepts and adds some very useful abilities:

nested rules
variables
mixins
selector inheritance

Every time you edit any file in /s/stylesheets/src/, the destination /s/stylesheets/css/site.css is automatically regenerated by libsass. This takes less than a second, so you can see the results almost immediately. Remember that to see changes in the staging site you must be logged into the CMS in your web browser. You should not edit the site.css file directly, as any changes you make will be overwritten.

If you don't want to bother with learning SCSS that's fine. Just write ordinary CSS in the site.scss file. As your stylesheets become more complex, you will find that SCSS gives you valuable shortcuts to achieving what you want and you will never want to go back.

If you would like to break up your stylesheets into more manageable pieces, add another import statement under the 'base' import like this:

@import "colours";

Then create a file /s/stylesheets/src/_colours.scss (with the underscore). When you make changes to that file, onCourse will automatically merge any content from _colours.scss into the main css for your site.

Look through the default styles for variables which you can easily modify to change your site. For example, override $bodyFontFamily in order to change the font right through your site. Or change $primaryColor, $secondaryColor and $containerWidth.

Bourbon

By default your stylesheets include Bourbon. This css library gives you lots of useful functionality that you'd otherwise have to write by hand. Read up on this library and get instant rounded corners across all browsers, typography features, reset, and much much more. As just one simple example

section {
  @includelinear-gradient(totop,red,orange);
}

will give you the following output

section {
  background-color:red;
  background-image:-webkit-linear-gradient(bottom,red,orange);
  background-image:linear-gradient(totop,red,orange);
}

without having to remember to put Opera, webkit, Mozilla and html5 elements into your css. You don't need to use bourbon, but it can help you keep your site consistent across browsers more easily and save you time with common css blocks.

Read the docs for Bourbon.

Compression

No matter how many separate files you break up your stylestyles into, the output will be compressed into one file and minified. This means whitespace is stripped and the file is pretty hard to read. However browsers will be able to parse it just fine; this minification can make a big improvement to page load speeds and also to your SEO.

Comments will be stripped out, so don't hesitate to put lots of useful notes in your scss files.

Finally we compress the file with gzip to serve it across the internet as fast as possible. You'll see these output files as:

  • /s/stylesheets/css/site.css

  • /s/stylesheets/css/site.css.gz

Map

Because it can be hard to review minified and combined CSS in your browser, we also output a map file. This allows Chrome and Firefox developer tools to identify the real file and line number in the source scss where your stylesheet rule can be found, saving you a lot of searching. The map can be seen as:

  • /s/stylesheets/css/site.css.map

Your browser will automatically find and use that file if it knows how.

Responsive design

It is extremely important in a modern world filled with tablets and smart phones that your site is built to make life easy for those users. onCourse sites already are prepared with responsive designs at four sizes. That means that as the browser window gets smaller with different sized devices, the design itself alters to work better at that size. It is still up to you as a designer to properly take advantage of this responsive design, but the groundwork is already there for you in onCourse and the enrolment pages as well as skillsOnCourse are optimised already.

onCourse has media sizes of $small-screen, $tablet-screen and $desktop-screen throughout the base stylesheets and a grid based on bootstrap 3.

Bootstrap

Because we bring in bootstrap 3 by default, you get not only a nice grid but also a lot of common component styles which are very useful.