StylePlayground ↬ Changelog

The following will record changes that we have made in the playbase that have then been added to the main code base on this repo and or to the main D9 styles. These changes should be recorded in descending order by date.

# November 18, 2022 / Drupal System Templates and fixes

Drupal System Templates

Added new twig templates for the system tabs and status messages. These effect the tabs for edit, delete, revisions etc. and the messages that the system pops out after actions like editing a page. The basic work has been done here — more may be required.

New template locations: 
…/web/themes/custom/tyndale/templates/system/menu-local-tasks.html.twig
…/web/themes/custom/tyndale/templates/system/status-messages.html.twig

Copied from: …/web/core/modules/system/templates/…

Drupal Page Title

The page title has had some basic styles added to make sure it has some margin above it. This was really needed on mobile, but looks better on desktop as well.

General Fixes

↑ scooch up to the top

# November 17, 2022 / Grid-12 Composition

This is a flexible 12-column grid designed to create overall composition elements for the CUBE CSS stystem. Grid can change on 4 breakpoint: small (-s / 550px), medium (-m / 768px), large (-l / 900px) and extra-large (-xl / 1280px). Grid items are stacked on mobile. The examples below are working through some layout possibilities — there are many layouts possible!

View Grid 12 Composition Reference

The grid-12 style have been deployed everywhere. File location: …/scss/composition/_grid-12.scss

↑ scooch up to the top

# November 15, 2022 / Various Utility Classes and Fixes

Full Width Classes

Utility classes have been added to allow a section to go full width. Historically this class has been called full-bleed — I have added this class but have also added full-width. These classes are exactly the same, just not sure what language I want to use moving forward.

Wrapper Classes

Wrapper classes can be used to wrap (duh!) content into a confined width. By default, the site will have styles associated with the main section of the site which provides a wrapper (padding-inline: var(--space-s-3xl)) to make appropraite space between the content and the edge of the browser/screen. If you are using a full-width section, this breaks the default spacing. This will needed to be added back in as a child div using the main wrapper class.

View Wrapper Utility Class Reference

Text, list + float classes

Deployed utility classes for text, list and float elements and documented their use.

Visited link color

The visited link color was not working. This was changed in …/scss/global/_links.scss

↑ scooch up to the top

# November 14, 2022 / Color-based Utility Classes

Text and Background Colors

These color-based utility classes include all text color and background color combinations. Accessibile color contrast was ensured for these combinations especially for link colors on each background. All code was pushed to the Drupal 9 master branch and tested.

Notes:

↑ scooch up to the top

# November 4, 2022 / Font-based Utilities / Settings Changes

Font-based Utility Classes

These utility classes include font-size, font-weight, letter-spacing and font-family.

Notes:

↑ scooch up to the top

# November 4, 2022 / Spacing (padding, margin, gap) / shadow-xl

Spacing Utility Classes

Moved the spacing-based utility classes from /scss/addcss/utilities-testing.scss to their final location. These changes were done both on this site and on the Drupal 9 site and deployed to the master branches. A new utilities style sheet has been created and can be found at .../scss/utilities/_spacing.scss

shadow-xl

We added an new box-shadow utility class shdow-xl. This has been deployed by adding the code into ../scss/global/_custom-properties.scss and ../scss/utilities/_shadows.scss These files already existed.

↑ scooch up to the top

# October 18, 2022 / Flow classes / Shadows / Borders

Changes made to the following areas moving them to their deployment locations. Elements were moved from /scss/addcss/utilities-testing.scss to their final locations. These changes were done both on this site and on the Drupal 9 site and deployed to the master branches. Examples of these elemnets can be found at /utils/.

Flow Classes

Added alternative flow sizes based on spaces custom properties. These utility classes have been moved to /scss/utilities/_flow.scss

Shadows

Border width, radius, color, position

↑ scooch up to the top

# October 11, 2022 / Fluid Spacing Scale

A new fluid spacing scale was created and based on the fluid type scale. The code was added into scss/settings/_spacing.scss file. The seetings file is then used by scss/global/_custom-properties.scss to create custom properties matching each aspect of the fluid scale.

Next Steps: we will be creating a number of utility classes that will use these custom property values for spacing options including padding, margin and gap.

↑ scooch up to the top

# October 7, 2022 / Fluid Type Scale

The type scale is based on the Utopia Fluid Type Scale Calculator. The current scale is set to:

- MIN[@320px | Size: 18px | Type Scale: 1.2 (Minor Third)] → →
+ MAX[@1140px | Size: 20px | Type Scale: 1.25 (Major Third)]

The code was added into scss/settings/_font-size.scss file. The seetings file is then used by scss/global/_custom-properties.scss to create custom properties matching each of the fluid scale. (Ex.--fs--2 — --fs-5)

Next Steps: we will be creating a number of utility classes that will use these custom property values for font size overrides.

↑ scooch up to the top