Lil Regie's front-end workshop

Patterns affected:

• list/list_name_value_pairs
  

  Improve design of name/value pairs by adding white space.

Patterns affected:

• strap/strap_masthead
  

  Reduce coupling between HTML & CSS for styling. The HTML was needlessly nested and limited to <main> which prohibits use inside <article|section> for instance.

• list/list_blog_posts
  

  Reduce coupling between HTML & CSS for styling. The HTML was needlessly nested and limited to <ol|ul> + <li> elements. However, the card UI pattern is often better codified using <article> nested in an element appropriate for the context, e.g. <nav> if the main intention of the page is navigation or <article/section> when it’s the last section of a blog post linking to other posts.

Patterns affected:

• strap/strap_site_header
  

  Removed some extra right padding from the nav in the site header on desktop-sized screens

• block/block_figure
  

  Added a wrapping div to the text contents of the figure block, when in left and right alignment.

  Also reduced the size of images in mobile-like layouts

• list/list_image_tiles
  

  Keeping each image tile more ‘square’, and using two columns by default.

Patterns affected:

• strap/strap_site_header
  

  Please add an <hr> directly after the sticky header, if you want the header shadow to be invisible before scrolling.

Patterns affected:

• strap/strap_default
  

  Now uses two distinct data attributes to control the type and position of the mascot.

  The left position flips the mascot horizontally.

  Add straps/_strap_mascot_modifier.scss to your manifest to unlock the mascot styles

Patterns affected:

• block/block_figure
  

  Remove the heading’s top margin if the image is in the after position.

• block/block_list
  

  Remove the heading’s top margin if the heading is the first child of the Block

Patterns affected:

• block/block_figure
  

  <picture> or <figure> elements now have to be the first element in a Figure Block.

  Also added loading="lazy" for any Block images not included in the Masthead.

• list/list_blog_posts
  

  Images in a List of blog posts now cover the available space.

Patterns affected:

• custom/custom_dropdown
  

  Converted to a Stimulus JS controller. Markup has changed.

  Modality improvements too. Try the modality testpage

• custom/custom_tabs
  

  Converted to a Stimulus JS controller. Markup has changed.

  Can now be initialised with a desired tab index.

• custom/custom_backdrop
  

  Converted to a Stimulus JS controller as part of ToggleMenuController.

  Markup has changed.

• button/button_menu
  

  Converted to a Stimulus JS controller as part of ToggleMenuController.

  Markup has changed.

• link/link_close
  

  Converted to a Stimulus JS controller as part of ToggleMenuController.

  Markup has changed.

• strap/strap_site_header
  

  Converted to a Stimulus JS controller as part of ToggleMenuController.

  Markup has changed.

Patterns affected:

• custom/custom_dropdown
  

  Escape keyhandlers added. Only one dropdown can be opened at once.

Patterns affected:

• custom/custom_tabs
  

  If the user is on a small-screen device and the tab items are positioned above their contents, then the click handler now scrolls down to the content.

• heading
  

  All headings now use -*-font-smoothing: antialiased; to improve their legibility on low resolution devices.