GCDS Forum - CSS Shortcuts
What is CSS shortcuts?
- Every digital product needs some custom styling. We help you get it from the start.
- A CSS utility framework built to match GC Design System (GCDS) styles and Canada.ca standards.
- Provides predefined CSS utility classes that apply core design elements, like colours, spacing, and typography, to your HTML.
- The classes align with our GCDS design tokens for consistency and ease of use.
- Using CSS Shortcuts in your project is optional. It can be added alongside your existing CSS.
Why CSS shortcuts?
Match styles
- CSS Shortcuts lets you apply predefined design tokens directly to your HTML elements.
- These design tokens are used throughout GCDS, so your custom code will match our components.
- Included reset styles apply Government of Canada standards from the start, allowing a consistent look from the start.
Faster development, less maintenance
- Your code becomes simpler, clearer, and easier to maintain.
- We handle the updates so you don't have to.
No third-party dependency
- CSS Shortcuts is built to meet the needs of the Government of Canada.
- Unlike other commonly used utility frameworks like Bootstrap or Tailwind, CSS Shortcuts is fully under our control.
- Modern CSS implementation.
Who is this for?
- If you are a web publisher publishing on Canada.ca using AEM, this may not be for you yet. If you are a web developer building custom code this might come in handy.
- CSS shortcuts provides utility classes to enhance your development without the need to create your own styles.
CSS shortcuts examples
Conditional/Responsive styling
Each class in CSS shortcuts has a modifier to work on specific viewport sizes. These are applied to each class like {size}:{class-name}.
The available sizes are:
- xs: Extra small
- sm: Small
- md: Medium
- lg: Large
- xl: Extra large
The example shows white text with a dark background saying "This is visible in the large viewport size.". Modifying the display frame's width will change the background colour and text to reflect the new viewport size.
Grab and drag the bottom-right corner to change the width of the display frame.
<main class="container-full lg:bg-primary md:bg-dark sm:bg-disabled md:text-light d-flex">
<p class="d-none lg:d-block text-current align-self-center">This is visible in the large viewport size.</p>
<p class="d-none md:d-block lg:d-none text-current align-self-center">This is visible in the medium viewport size.</p>
<p class="d-none sm:d-block md:d-none align-self-center">This is visible in the small viewport size.</p>
<p class="xs:d-block sm:d-none align-self-center">This is visible in the extra small viewport size.</p>
</main>
Containers
CSS shortcuts also has classes to easily define container sizes using the same small to extra large scale.
The example shows 6 list items with a black border set to the different widths available using the container classes.
<ul>
<li class="container-xs p-150 b-sm bb-0">XS</li>
<li class="container-sm p-150 b-sm bb-0">SM</li>
<li class="container-md p-150 b-sm bb-0">MD</li>
<li class="container-lg p-150 b-sm bb-0">LG</li>
<li class="container-xl p-150 b-sm bb-0">XL</li>
<li class="container-full p-150 b-sm">
Full (full width of parent container)
</li>
</ul>
Typography
CSS shortcuts comes with reset styles to ensure consistent styling between browsers. These styles also set the default typography styles to match the canada.ca standards.
With typography defaults
The example shows basic HTML elements (headings, paragraphs, and other text eleemnts) with the default styling loaded from CSS shortcuts.
Without typography defaults
The example shows basic HTML elements (headings, paragraphs, and other text eleemnts) with the browser default styling without CSS shortcuts.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph.</p>
<small>This is small text.</small>
<a href="#">This is a link</a>
<code>This is a code element</code>
Lists
With the reset styles contained in CSS shortcuts, developers will now have to be more intentional with styling lists. Lists by default will be unstyled and need a class assigned to them to choose the style of the marker.
The example shows 6 lists in two coloumns. The left column has a 3 unordered lists with various marker styles applied using CSS shrtcut classes. The left column has a 3 ordered lists with various marker styles applied using CSS shrtcut classes.
<main class="d-grid grid-cols-2 gap-300 container-xl mx-auto mt-300 xl:px-0 sm:px-600 px-225">
<div>
<h4>Unordered lists</h4>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class="list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ul class="list-circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Ordered lists</h4>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol class="list-decimal">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol class="list-lower-alpha">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</main>
Margin/padding
CSS shortcuts has a wide variety of margin and padding classes taking advantage of CSS logical properties. This allows you to write the CSS once for a variety of different layouts based on language direction.
The margin/padding scale is based off the spacing scale available in GCDS.
Margin/padding classes LTR
The example shows paragraphs with a black border and increased padding on all sides in a left to right reading pattern.
Margin/padding classes RTL
The example shows paragraphs with a black border and increased padding on all sides in a right to left reading pattern. All padding is a reverse of the other example.
<p class="pt-400 pb-300 ps-800 pe-100 b-solid b-sm bs-lg">This paragraph has padding applied to all sides by individual classes.</p>
<p class="px-800 py-300 b-solid b-sm bs-lg">This paragraph has padding applied to all the sides using two classes.</p>
<p class="p-400 b-solid b-sm bs-lg">This paragraph has padding applied to all the sides using one class.</p>
Grid
CSS shortcuts provides several options to create a layout, one method is taking advantage of CSS grids. There are several different ways to configure your grid, one way is to use the grid-cols-{column-number} classes.
The example shows a 3 column layout with each div in the column showcasing one of the icons from the GCDS icon library. When the width of the frame is changed, the 3 columns will reduce to 2 and then to 1.
Grab and drag the bottom-right corner to change the width of the display frame.
<main class="d-grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-300 container-xl mx-auto mt-300 xl:px-0 sm:px-600 px-225">
<div class="b-sm p-150">
<span class="gcds-icon-info-circle icon-h3"></span>
<p>Info circle</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-warning-triangle icon-h3"></span>
<p>Warning triangle</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-exclamation-circle icon-h3"></span>
<p>Exclamation circle</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-checkmark-circle icon-h3"></span>
<p>Checkmark circle</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-chevron-left icon-h3"></span>
<p>Chevron left</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-chevron-right icon-h3"></span>
<p>Chevron right</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-chevron-down icon-h3"></span>
<p>Chevron down</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-chevron-left icon-h3"></span>
<p>Chevron left</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-close icon-h3"></span>
<p>Close</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-download icon-h3"></span>
<p>Download</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-email icon-h3"></span>
<p>Email</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-external icon-h3"></span>
<p>External</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-phone icon-h3"></span>
<p>Phone</p>
</div>
<div class="b-sm p-150">
<span class="gcds-icon-search icon-h3"></span>
<p>Search</p>
</div>
</main>
Accessibility
CSS shortcuts has a couple accessibility features backed in like a reduced motion media query for users who prefer that.
// Force reduced motion for users who have preference set to reduce
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
When?
Keep an eye on your inbox or check the GC Design System website shortly to see when CSS shortcuts goes live.