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.
Report put together from the Design Thinking workshop. Starting point for discussions.
- New elements demonstration - Material Demonstration
- New style guide tool - Style Guide
- New theme exaplanation slides - Google Slides
Forms the basis of new CSU websites
- Material Design
- Inspired frameworks with examples:
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.
A simple grid system using flexbox has been deployed in the theme. Based on these articles:
- https://philipwalton.github.io/solved-by-flexbox/demos/grids/
- https://www.taniarascia.com/easiest-flex-grid-ever/
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.
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".
Add a tweaked version of the Gutenberg Print CSS and removed nav and header items from display. Tweaked background printing to turn it on.
- HTML Cleaner - general purpose cleaner for HTML
- CSS Out - cleans out inline styles
- Atom - text editor designed for working in code