Skip to content
Developing a new theme and style for CSU Learning Resources - A work in process
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Code-Snippets
Wiki
code-snippets
css-build
fractal
theme-package
.gitignore
README.md
sketch-style-guide.sketch

README.md

Learning Materials

This work is centred on developing a flexible and reusable Style Guide for Learning Materials, Resources and other Teaching and Learning content at Charles Sturt University.

Workshop

Report put together from the Design Thinking workshop. Starting point for discussions.

Preview Links

Influences on Style

CSU Sites

Material Design

Forms the basis of new CSU websites

Responsive type

With the introduction of Responsive Design Elements a lot of consideration has gone into the design of the typography. The focus of these changes has been to improve the readability of the text in Blackboard - and to do it across screen sizes. The article Your Body Text Is Too Small - Why website body text should be bigger, and ways to optimize it. provides a good overview of the approach taken and the reasons why.

Responsive type settings used are based on this article:Precise control over responsive typography. This uses a single calculation based on the screens width to set the baseline value of 16px and a maximum of 24px which is designed to adapt to any screen size - the small the screen the closer to the user and the smaller the text, the larger the screen the further away the user is and so the larger the font.

The basic equation sets this up here with a media query setting the max size at 24px at 1000px screen width.

font-size: calc( 16px + (24 - 16) * ( (100vw - 400px) / ( 1000 - 400) ));

Once this baseline has been introduced to the content area - all font sizes are relative using percentages which allows them to adapt easily to all variations.

There are going to be issues with additional scrolling - but current research suggests that this simply isn't the problem it once was or that people don't scroll.

Flex Grid

A simple grid system using flexbox has been deployed in the theme. Based on these articles:

By using Flexbox's innate nature to resize elements based on the page the grid is simply based on Rows and Columns. Place Columns in a Row and they will automatically resize equally. This works fine for most applications but there are special classes - column-half, column-2 and column-3 - which will help come up with thirds and other column configurations. Flexbox also provides ways to align content within elements to top, bottom and center.

Tooltips

Tool tips uses the CSS framework from Wenk but replaces the data-wenk attribute with tooltip. To use simply se an attribute in the tag to tooltip="the text you want to display".

Print CSS

Add a tweaked version of the Gutenberg Print CSS and removed nav and header items from display. Tweaked background printing to turn it on.

Useful Tools Used

Colour Tools

HTML

  • HTML Cleaner - general purpose cleaner for HTML
  • CSS Out - cleans out inline styles
  • Atom - text editor designed for working in code
You can’t perform that action at this time.