Rename .row--4-cols-medium to .p-row, document it as the default

canonical · Oct 3, 2024 · f2ad800 · f2ad800
1 parent bcb6bbe
commit f2ad800
Show file tree

Hide file tree

Showing 70 changed files with 310 additions and 237 deletions.
diff --git a/releases.yml b/releases.yml
@@ -3,7 +3,7 @@
     - component: Grid
       url: /docs/patterns/grid#4-column-grid
       status: Updated
-      notes: We've added the <code>.row--4-cols-medium</code> class, which creates a grid with a multiple of 4 columns on all screen sizes.
+      notes: We've added the <code>.p-row</code> class, which creates a grid with a multiple of 4 columns on all screen sizes.
 - version: 4.16.0
   features:
     - component: CTA Block / Borderless

diff --git a/scss/_settings_grid.scss b/scss/_settings_grid.scss
@@ -15,7 +15,7 @@ $threshold-4-med-12-col: $breakpoint-large !default;
 
 $grid-column-prefix: 'col-' !default;
 $grid-row-class: 'row' !default;
-$grid-row-4-cols-class: '#{$grid-row-class}--4-cols-medium' !default;
+$grid-row-4-cols-class: 'p-#{$grid-row-class}' !default;
 $grid-small-col-prefix: '#{$grid-column-prefix}small-' !default;
 $grid-medium-col-prefix: '#{$grid-column-prefix}medium-' !default;
 $grid-large-col-prefix: #{$grid-column-prefix} !default;

diff --git a/templates/404.html b/templates/404.html
@@ -2,15 +2,15 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h1 class="u-no-margin--bottom">404 - Page not found</h1>
     </div>
   </div>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>Sorry, we can't find the page you're looking for. If you think this is an error on our site, please <a href="https://github.com/canonical/vanilla-framework/issues/new">file a bug on GitHub.</a></p>
     </div>

diff --git a/templates/410.html b/templates/410.html
@@ -2,15 +2,15 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h1 class="u-no-margin--bottom">410 - Page deleted</h1>
     </div>
   </div>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>{{ message or "This page has been removed" }}</p>
     </div>

diff --git a/templates/500.html b/templates/500.html
@@ -2,15 +2,15 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <h1 class="u-no-margin--bottom">500 - Internal server error</h1>
     </div>
   </div>
 </div>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-12">
       <p>Something went wrong on our end. If you have the time, please help us out by <a href="https://github.com/canonical-websites/vanillaframework.io/issues/new">filing a bug.</a></p>
     </div>

diff --git a/templates/_layouts/_footer.html b/templates/_layouts/_footer.html
@@ -5,7 +5,7 @@
       <p class="u-no-margin--bottom">&copy; {{ now("%Y") }} Canonical Ltd.</p>
     </div>
     <div class="l-docs__main">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <nav class="col-3" aria-label="Footer">
           <ul class="p-list u-no-margin--bottom">
             <li class="p-list__item">
@@ -34,7 +34,7 @@
 </footer>
 {% else %}
 <footer class="p-strip is-dark">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-3">
       <p class="u-no-margin--bottom">&copy; {{ now("%Y") }} Canonical Ltd.</p>
     </div>

diff --git a/templates/accessibility.html b/templates/accessibility.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-12">
         <h1>Accessibility guidelines</h1>
         <p>Vanilla Framework aims for Level AA conformance with the <br><a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a></p>
@@ -85,7 +85,7 @@ <h2>Curated criteria checklist</h2>
 </div>
 
 <div class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6">
         <h2>Key WCAG documents</h2>
         <p>The volume of information on the WCAG 2.0 website can be disorienting. <br>We keep the following links handy for quick reference:</p>
@@ -94,7 +94,7 @@ <h2>Key WCAG documents</h2>
 </div>
 
 <div class="p-strip u-no-padding--top">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <ul class="p-list is-split">
         <li class="p-list__item"><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a>: the W3C standard, includes principles, guidelines and success criteria</li>
         <li class="p-list__item"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>

diff --git a/templates/contribute.html b/templates/contribute.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 <div id="main-content" class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-12">
         <h1 class="u-no-margin--bottom">Contribute</h1>
       </div>
@@ -18,7 +18,7 @@ <h1 class="u-no-margin--bottom">Contribute</h1>
 </div>
 
 <div class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="p-strip u-no-padding--top"><h2>Meet the team</h2></div>
       {% for team_member in team_members %}
         <div class="col-3 p-media-object">
@@ -46,10 +46,10 @@ <h3 class="p-media-object__title">
   </div>
 
   <div class="p-strip">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="p-strip u-no-padding--top"><h2>Contributors</h2></div>
       </div>
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         {% for contributor in contributors%}
           <div class="col-3 p-media-object">
             <img src="{{ contributor.avatar_url }}" class="p-media-object__image is-round" alt="">
@@ -74,18 +74,18 @@ <h3 class="p-media-object__title">
 </div>
 
 <div class="p-strip">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="p-strip u-no-padding--top"><h2>Contribute</h2></div>
     </div>
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-6">
         <p>When <a href="https://github.com/canonical/vanilla-framework/issues/new/choose">submitting a new issue</a>, please check that it hasn't already been raised by someone else. We've provided a template for new issues which will help you structure your issue to ensure it can be picked up and actioned easily.</p>
         <p>Please provide as much information possible detailing what you're currently experiencing and what you'd expect to experience.</p>
         <p>To work on an issue, please fork this repo and create a new branch on your local fork. When you're happy and would like to propose that changeset to be merged back upstream, open a pull request to merge from your local origin/master to upstream/master.</p>
         <p>When committing changes, make sure to group related changes so that the project is always in a working state. Use succinct yet descriptive commit messages to allow for easy reading of the commit log.</p>
       </div>
       <div class="col-6">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-6 p-card">
             <h3>Guidelines</h3>
             <p>We follow two guideline documents that align with the practices that the Canonical Web Team follows across all projects.
@@ -95,7 +95,7 @@ <h3>Guidelines</h3>
               </ul>
           </div>
         </div>
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <div class="col-3 p-card">
             <h3>File a bug</h3>
             <p>We use <a href="https://github.com/canonical/vanilla-framework/issues">GitHub issues</a> to track all our bugs and feature requests.</p>

diff --git a/templates/docs/examples/brochure/_25-25-50.html b/templates/docs/examples/brochure/_25-25-50.html
@@ -1,5 +1,5 @@
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
   <div class="row--25-25-50">
@@ -25,7 +25,7 @@
       </i>
     </div>
   </div>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
    <hr class="p-rule">
   </div>
   <div class="row--25-25-50">

diff --git a/templates/docs/examples/brochure/_25-75-nested.html b/templates/docs/examples/brochure/_25-75-nested.html
@@ -1,5 +1,5 @@
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <!-- we remove the bottom margin, as this separator is followed by highlighted separators in the grid below -->
     <hr class="p-rule u-no-margin--bottom">
   </div>

diff --git a/templates/docs/examples/brochure/_50-50.html b/templates/docs/examples/brochure/_50-50.html
@@ -1,6 +1,6 @@
 <section class="p-section">
   <div class="p-section--shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr class="p-rule">
     </div>
     <div class="row--50-50">
@@ -16,7 +16,7 @@ <h2>Become a customer</h2>
     </div>
   </div>
   <div class="p-section--shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr class="p-rule">
     </div>
     <div class="row--50-50">
@@ -31,7 +31,7 @@ <h2>Free for personal use</h2>
     </div>
   </div>
   <div class="p-section--shallow">
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <hr class="p-rule">
     </div>
     <div class="row--50-50">

diff --git a/templates/docs/examples/brochure/index.html b/templates/docs/examples/brochure/index.html
@@ -57,7 +57,7 @@ <h1>
 </section>
 
 <section class="p-section">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
 
@@ -98,7 +98,7 @@ <h5 class="p-muted-heading">Example</h5>
 <div class="u-fixed-width">
   <h5 class="p-muted-heading">Example</h5>
 </div>
-<div class="row--4-cols-medium">
+<div class="p-row">
   <hr class="p-rule">
 </div>
 
@@ -116,7 +116,7 @@ <h5 class="p-muted-heading">Example</h5>
 
 <div class="u-fixed-width">
   <h5 class="p-muted-heading">Example</h5>
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <hr class="p-rule">
   </div>
 </div>

diff --git a/templates/docs/examples/index.html b/templates/docs/examples/index.html
@@ -13,7 +13,7 @@ <h1>Component examples</h1>
       <hr />
     </div>
 
-    <div class="row--4-cols-medium">
+    <div class="p-row">
       <div class="col-3">
         <h2>Base elements</h2>
         <nav aria-label="Documentation: base elements">

diff --git a/templates/docs/examples/layouts/docs.html b/templates/docs/examples/layouts/docs.html
@@ -58,7 +58,7 @@ <h5 class="u-sv-2">Documentation example</h5>
         </div>
       </div>
       <div class="l-docs__main">
-        <div class="row--4-cols-medium">
+        <div class="p-row">
           <form class="p-search-box u-no-margin--bottom">
             <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on"/>
             <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
@@ -137,7 +137,7 @@ <h3>Side navigation</h3>
 
   <div class="l-docs__title" id="main-content">
     <div class="p-section--shallow">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-12">
           <h1>Main documentation content</h1>
         </div>
@@ -164,7 +164,7 @@ <h2 class="p-table-of-contents__header">On this page</h2>
   </div>
 
   <main class="l-docs__main">
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-12">
           <p>Main documentation content block is contained in grid <code>col-9</code>. Any standard base elements or Vanilla components can be used in the documentation pages.</p>
 
@@ -260,7 +260,7 @@ <h3>Grid</h3>
           <p>Main documentation content block is contained in grid <code>col-9</code>.</p>
 
           <p>For two columns split use two <code>col-4</code> columns.</p>
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-4">
               <ul class="p-list">
                 <li class="p-list__item"><a href="#docs/whats-new-2-6">New features in 2.6&nbsp;›</a></li>
@@ -283,7 +283,7 @@ <h3>Grid</h3>
 
           <p>For three columns split use three <code>col-3</code> columns.</p>
 
-          <div class="row--4-cols-medium">
+          <div class="p-row">
             <div class="col-3">
               <ul class="p-list--divided">
                 <li class="p-list__item"><a href="#docs/settings/animation-settings">Animation</a></li>
@@ -317,7 +317,7 @@ <h3>Grid</h3>
         <p style="padding-left: 1.5rem">© 2020 Canonical Ltd.</p>
       </div>
       <div class="l-docs__main">
-        <nav class="row--4-cols-medium" aria-label="Footer">
+        <nav class="p-row" aria-label="Footer">
           <div class="has-cookie">
             <p><a class="is-dark" href="#">Ubuntu</a> and <a class="is-dark" href="#">Canonical</a> are registered trademarks of Canonical Ltd.</p>
             <ul class="p-inline-list--middot">

diff --git a/templates/docs/examples/layouts/documentation.html b/templates/docs/examples/layouts/documentation.html
@@ -41,7 +41,7 @@
 </header>
 
 <section id="search-docs" class="p-strip--highlighted is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <form class="p-search-box u-no-margin--bottom">
       <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on"/>
       <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
@@ -51,7 +51,7 @@
 </section>
 
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <aside class="col-3">
       <nav class="p-side-navigation--raw-html is-sticky" id="drawer" aria-label="Table of contents">
         <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
@@ -210,7 +210,7 @@ <h3>Grid</h3>
       <p>Main documentation content block is contained in grid <code>col-9</code>.</p>
 
       <p>For two columns split use two <code>col-4</code> columns.</p>
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-4">
           <ul class="p-list">
             <li class="p-list__item"><a href="#docs/whats-new-2-6">New features in 2.6&nbsp;›</a></li>
@@ -233,7 +233,7 @@ <h3>Grid</h3>
 
       <p>For three columns split use three <code>col-3</code> columns.</p>
 
-      <div class="row--4-cols-medium">
+      <div class="p-row">
         <div class="col-3">
           <ul class="p-list--divided">
             <li class="p-list__item"><a href="#docs/settings/animation-settings">Animation</a></li>
@@ -260,7 +260,7 @@ <h3>Grid</h3>
 </div>
 
 <footer class="p-strip--highlighted">
-  <nav class="row--4-cols-medium" aria-label="Footer">
+  <nav class="p-row" aria-label="Footer">
     <div class="has-cookie">
       <p>© 2020 Canonical Ltd. <a href="#">Ubuntu</a> and <a href="#">Canonical</a> are registered trademarks of Canonical Ltd.</p>
       <ul class="p-inline-list--middot">

diff --git a/...tes/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html b/...tes/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium grid-demo">
+  <div class="p-row grid-demo">
     {% for i in range(12) %}
     {% with index = i + 1 %}
     <div class="col-small-1 col-medium-1 col-1">

diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html
@@ -12,7 +12,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow">
-  <div class="row--4-cols-medium grid-demo">
+  <div class="p-row grid-demo">
     {% for i in range(12) %}
     {% with index = i + 1 %}
     <div class="col-small-1 col-medium-1 col-1">

diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow grid-demo u-no-padding-top">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       <span>.col-1</span>
     </div>

diff --git a/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html b/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html
@@ -11,7 +11,7 @@
 
 {% block content %}
 <div class="p-strip is-shallow grid-demo u-no-padding-top">
-  <div class="row--4-cols-medium">
+  <div class="p-row">
     <div class="col-1">
       <span>.col-1</span>
     </div>