-
Notifications
You must be signed in to change notification settings - Fork 130
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WCAG upgrade - Create test page for Display and Layout #2224
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Incomplete review
- Remove all the inline style
_data/common.json
Outdated
"componentName": "layout", | ||
"status": "stable", | ||
"pages": { | ||
"docs": [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"docs": [ | |
"examples": [ |
common/display/display-en.html
Outdated
<div class="well"> | ||
<div class="row"> | ||
<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 1</div> | ||
<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 2</div> | ||
<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 3</div> | ||
<!-- Add clearfix class to clear floated elements --> | ||
<div class="clearfix"></div> | ||
</div> | ||
<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suggest to have an example that don't rely on any inline style, something like:
<div class="well"> | |
<div class="row"> | |
<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 1</div> | |
<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 2</div> | |
<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 3</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="clearfix"></div> | |
</div> | |
<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p> | |
<div class="well"> | |
<div class="pull-left bg-darker text-white">Column 1</div> | |
<div class="clearfix"></div> | |
<div class="pull-left bg-darker text-white">Column 2</div> | |
<div class="pull-left bg-darker text-white">Column 3</div> | |
<div class="clearfix"></div> | |
<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p> |
common/display/display-en.html
Outdated
<div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;"> | ||
This element is centered horizontally within its parent container. | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
May be an example that use an image will be easier to demo "centre-block" without any specific width.
common/display/display-en.html
Outdated
</div></code></pre> | ||
|
||
<h4>Bootstrap 3 <code>.pull-left</code> class working example</h4> | ||
<div class="well" style="height: 115px;"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="well" style="height: 115px;"> | |
<div class="well"> |
common/display/display-en.html
Outdated
<div class="clearfix"></div> | ||
<div class="clearfix"> </div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this necessary here? the pull-right example don't seem to need that
<div class="clearfix"></div> | |
<div class="clearfix"> </div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<h4>WET-BOEW <code>.lbx-hide-gal </code>class working example</h4><div class="well"> | ||
<div class="lbx-hide-gal well"> | ||
This element is hidden as part of a lightbox gallery. | ||
</div> | ||
</div> | ||
<h4>Code sample</h4> | ||
<pre><code><div class="well"> | ||
<div class="<strong>lbx-hide-gal</strong> well"> | ||
This element is hidden as part of a lightbox gallery. | ||
</div> | ||
</div></code></pre> | ||
|
||
<h4>WET-BOEW <code>.mfp-hide </code>class working example</h4><div class="well"> | ||
<div class="mfp-hide well"> | ||
This element is hidden as part of a Magnific Popup modal. | ||
</div> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Those seem to be wet-boew plugin specific, should we have it here?
</div></code></pre> | ||
|
||
<h4>WET-BOEW <code>.wb-show-onfocus </code>class working example</h4><div class="well"> | ||
<input type="text" class="wb-show-onfocus well" placeholder="Focus on this input to reveal the element"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avoid placeholder attribute.
This input are missing a label.
Would this example be easier if we try to show a link, like the skip-links?
common/layout/layout-en.html
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We will need to rename this folder as it is a reserved keywork with our build system.
May be like "grid-layout" or something similar.
We would need to remove examples that are specific to some of other component/plugin.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Applied the changes to my branch PR-2224
eebca0f
to
2718e6b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@hanseller see the requested change as discussed.
"share": "true" | ||
} | ||
--- | ||
|
||
|
||
<h3>Grid baseline (containers)</h3> | ||
|
||
<h4>GCWeb Grid Baseline</h4> | ||
<p>Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.</p> | ||
<div class="well"> | ||
<div class="container"> | ||
<!-- Content of the container --> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | ||
</div> | ||
</div> | ||
<h4>Code Sample</h4> | ||
<pre><code><div class="well"><div class="container"> | ||
<!-- Content of the container --> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | ||
</div></div></code></pre> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"share": "true" | |
} | |
--- | |
<h3>Grid baseline (containers)</h3> | |
<h4>GCWeb Grid Baseline</h4> | |
<p>Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.</p> | |
<div class="well"> | |
<div class="container"> | |
<!-- Content of the container --> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
</div> | |
</div> | |
<h4>Code Sample</h4> | |
<pre><code><div class="well"><div class="container"> | |
<!-- Content of the container --> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
</div></div></code></pre> | |
"share": "true", | |
"layout": "no-container" | |
} | |
--- | |
<div class="container"> | |
<h1>Grid baseline (containers)</h1> | |
<p>Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.</p> | |
</div> | |
<div class="container"> | |
<!-- Content of the container --> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
</div> | |
<div class="container"> | |
<h2>Code Sample</h2> | |
<pre><code><div class="well"><div class="container"> | |
<!-- Content of the container --> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
</div></div></code></pre> | |
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove, we already have that example here: https://github.com/wet-boew/GCWeb/blob/master/components/header-rwd/well-header-rwd-en.html
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove, we already have this component here: https://github.com/wet-boew/GCWeb/tree/master/sites/authentication
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
"componentName": "grid-layout", | ||
"status": "stable", | ||
"pages": { | ||
"examples": [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add the other web page in this array
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added
common/grid-layout/layout-en.html
Outdated
|
||
<h3 id="flexbox">Flexbox</h3> | ||
|
||
<h4>WET-BOEW <code>.d-flex</code> class working example</h4> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h4>WET-BOEW <code>.d-flex</code> class working example</h4> | |
<h4><code>.d-flex</code> class working example</h4> |
Remove the "WET-BOEW" as it don't directly support the example but relate more to how to maintain that CSS/features
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/grid-layout/layout-en.html
Outdated
<h4>GCWeb override - Site footer <code>.row</code></h4> | ||
<div class="well"> | ||
<footer class="gcweb-override-site-footer"> | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="col-md-4"> | ||
<h5>About Us</h5> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p> | ||
</div> | ||
<div class="col-md-4"> | ||
<h5>Contact Us</h5> | ||
<p>Email: [email protected]<br>Phone: 123-456-7890</p> | ||
</div> | ||
<div class="col-md-4"> | ||
<h5>Follow Us</h5> | ||
<ul class="list-inline"> | ||
<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li> | ||
<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li> | ||
<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can remove it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed
common/grid-layout/logo-en.html
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can remove this example, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/header
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can remove this page, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/gcweb-menu
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move this example here: https://github.com/wet-boew/GCWeb/tree/master/components/gc-corporate
And rename those page + create an index.json-ld file corresponding to that component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can remove this page, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/footers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also remove wet-boew, bootstrap 3 reference in the various title where do provide content value.
common/display/display-en.html
Outdated
|
||
<h2 id="bootstrap">Bootstrap</h2> | ||
|
||
<h3 id="float">Float</h3> | ||
|
||
<h4>Bootstrap 3 <code> .clearfix</code>working example</h4> | ||
<div class="well"> | ||
<div class="row"> | ||
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | ||
<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div> | ||
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | ||
<!-- Add clearfix class to clear floated elements --> | ||
<div class="clearfix"></div> | ||
</div> | ||
<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p> | ||
</div> | ||
<h4>Code sample</h4> | ||
<pre><code><div class="well"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h2 id="bootstrap">Bootstrap</h2> | |
<h3 id="float">Float</h3> | |
<h4>Bootstrap 3 <code> .clearfix</code>working example</h4> | |
<div class="well"> | |
<div class="row"> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | |
<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="clearfix"></div> | |
</div> | |
<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p> | |
</div> | |
<h4>Code sample</h4> | |
<pre><code><div class="well"> | |
<h2 id="float">Float</h2> | |
<h3><code>.clearfix</code>working example</h3> | |
<div class="well"> | |
<div class="row"> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | |
<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="clearfix"></div> | |
</div> | |
<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p> | |
</div> | |
<h4>Code sample</h4> | |
<pre><code><div class="well"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here what this section can look like
<h2>Float</h2>
<h3>Clear fix <code>clearfix</code></h3>
<div class="well">
<div class="pull-left bg-info">( Row 1, Column 1 )</div>
<div class="pull-left bg-info">( Row 1, Column 2 )</div>
<div class="pull-left bg-info">( Row 1, Column 3 )</div>
<!-- Add clearfix class to clear floated elements -->
<div class="clearfix"></div>
<div class="pull-left bg-info">Row 2, Column 1</div>
<div class="pull-left bg-info">Row 2, Column 2</div>
<div class="pull-left bg-info">Row 2, Column 3</div>
<div class="pull-left bg-info">Row 2, Column 4</div>
</div>
<h4>Code sample</h4>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<div class="sr-only-focusable well"> | ||
This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation. | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use a focusable element, like an anchor <a href="#">
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<h4>WET-BOEW <code>.opct-20 </code>class working example</h4><div class="well"> | ||
<div class="opct-20 well"> | ||
This element has an opacity of 0.2 (20%). | ||
</div> | ||
</div> | ||
<h4>Code sample</h4> | ||
<pre><code><div class="well"> | ||
<div class="<strong>opct-20</strong> well"> | ||
This element has an opacity of 0.2 (20%). | ||
</div> | ||
</div></code></pre> | ||
|
||
<h4>WET-BOEW <code>.opct-90 </code>class working example</h4><div class="well"> | ||
<div class="opct-90 well"> | ||
This element has an opacity of 0.9 (90%). | ||
</div> | ||
</div> | ||
<h4>Code sample</h4> | ||
<pre><code><div class="well"> | ||
<div class="<strong>opct-90</strong> well"> | ||
This element has an opacity of 0.9 (90%). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing an example for:
opct-30
opct-40
opct-50
opct-60
opct-70
opct-80
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<h4>WET-BOEW <code>.lbx-hide-gal </code>class working example</h4><div class="well"> | ||
<div class="lbx-hide-gal well"> | ||
This element is hidden as part of a lightbox gallery. | ||
</div> | ||
</div> | ||
<h4>Code sample</h4> | ||
<pre><code><div class="well"> | ||
<div class="<strong>lbx-hide-gal</strong> well"> | ||
This element is hidden as part of a lightbox gallery. | ||
</div> | ||
</div></code></pre> | ||
|
||
<h4>WET-BOEW <code>.mfp-hide </code>class working example</h4><div class="well"> | ||
<div class="mfp-hide well"> | ||
This element is hidden as part of a Magnific Popup modal. | ||
</div> | ||
</div> | ||
<h4>Code sample</h4> | ||
<pre><code><div class="well"> | ||
<div class="<strong>mfp-hide</strong> well"> | ||
This element is hidden as part of a Magnific Popup modal. | ||
</div> | ||
</div></code></pre> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mfp-hide
+ lbx-hide-fal
example can be removed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<h4>WET-BOEW <code>.full-width </code>class working example</h4><div class="well"> | ||
<div class="full-width"> | ||
This element spans the full width of its parent container. | ||
</div> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h4>WET-BOEW <code>.full-width </code>class working example</h4><div class="well"> | |
<div class="full-width"> | |
This element spans the full width of its parent container. | |
</div> | |
</div> | |
<h3><code>.full-width </code>class</h3> | |
<div class="well"> | |
<label for="id_1">Full width example</label> | |
<input id="id_1" class="full-width"> | |
<label for="id_2">Default width example</label> | |
<input id="id_2"> | |
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
Working example of the latest change is available here: |
common/display/display-en.html
Outdated
<h2 id="bootstrap">Bootstrap</h2> | ||
|
||
<h3 id="float">Float</h3> | ||
|
||
<h4>Bootstrap 3 <code> .clearfix</code>working example</h4> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h2 id="bootstrap">Bootstrap</h2> | |
<h3 id="float">Float</h3> | |
<h4>Bootstrap 3 <code> .clearfix</code>working example</h4> | |
<h2 id="float">Float</h2> | |
<h3><code> .clearfix</code>working example</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/grid-layout/layout-en.html
Outdated
<li><a href="#grid baseline">Grid baseline (containers)</a></li> | ||
</ul> | ||
|
||
<h3 id="flexbox">Flexbox</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h3 id="flexbox">Flexbox</h3> | |
<h2 id="flexbox">Flexbox</h2> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is not fixed, may be the file "layout-en.html" was not added in the commit
common/grid-layout/layout-en.html
Outdated
|
||
<h2>On this page:</h2> | ||
|
||
<ul> | ||
<li><a href="#flexbox">Flexbox</a></li> | ||
<li><a href="#css-grid">CSS-grid</a></li> | ||
<li><a href="#grid baseline">Grid baseline (containers)</a></li> | ||
</ul> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h2>On this page:</h2> | |
<ul> | |
<li><a href="#flexbox">Flexbox</a></li> | |
<li><a href="#css-grid">CSS-grid</a></li> | |
<li><a href="#grid baseline">Grid baseline (containers)</a></li> | |
</ul> | |
<nav> | |
<h2>On this page:</h2> | |
<ul> | |
<li><a href="#flexbox">Flexbox</a></li> | |
<li><a href="#css-grid">CSS-grid</a></li> | |
<li><a href="#grid baseline">Grid baseline (containers)</a></li> | |
</ul> | |
</nav> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is still not here in the layout. but i can see it on the display page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
ff293f0
to
6dcac07
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See the change request.
common/display/display-en.html
Outdated
|
||
<h4>Bootstrap 3 <code>.center-block</code> class working example</h4> | ||
<div class="well"> | ||
<div class="center-block well bg-darker"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="center-block well bg-darker"> | |
<div class="center-block well bg-info"> |
<div class="center-block well bg-darker"> | |
<div class="center-block well bg-darker text-white"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<li><a href="#sizing-controls">Sizing controls</a></li> | ||
</ul> | ||
</nav> | ||
<h2 id="bootstrap">Bootstrap</h2> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h2 id="bootstrap">Bootstrap</h2> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | ||
<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div> | ||
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | ||
<!-- Add clearfix class to clear floated elements --> | ||
<div class="clearfix"></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move the clearfix in between.
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | |
<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="clearfix"></div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | |
<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="clearfix"></div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<div class="row"> | ||
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | ||
<div class="pull-left bg-darker text-white col-md-3 well">Column 2</div> | ||
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | ||
<!-- Add clearfix class to clear floated elements --> | ||
<div class="<strong>clearfix</strong>"></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="row"> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 2</div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="<strong>clearfix</strong>"></div> | |
<div class="row"> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 2</div> | |
<!-- Add clearfix class to clear floated elements --> | |
<div class="<strong>clearfix</strong>"></div> | |
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
common/display/display-en.html
Outdated
<h3 id="clear">Clear</h3> | ||
|
||
<h4><code>.clr-lft-lg</code> class working example</h4> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h3 id="clear">Clear</h3> | |
<h4><code>.clr-lft-lg</code> class working example</h4> | |
<h2 id="clear">Clear</h2> | |
<h3><code>.clr-lft-lg</code> class working example</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
}, | ||
|
||
"modified": "2024-03-26", | ||
"componentName": "grid-layout", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"componentName": "grid-layout", | |
"componentName": "gc-corporate", |
Folder name must match the componentName
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
"examples": [ | ||
|
||
{ | ||
"title": "Responsive Columns", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"title": "Responsive Columns", | |
"title": "GC Corporate", |
}, | ||
|
||
{ | ||
"title": "Colonnes réactives", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"title": "Colonnes réactives", | |
"title": "GC corporative", |
6dcac07
to
d969751
Compare
d969751
to
a55eb7e
Compare
WCAG upgrade - Create test page for Display and Layout