Skip to content

Commit

Permalink
Scope all paragraphs to the parent class .text
Browse files Browse the repository at this point in the history 
Bump up the font size to 19px on .text, otherwise this needs redefining
all over the place.

This will require a wrapper with the class of .text to be used to set a
19px default for any elements within .text.

Move the max-width setting to paragraphs within these .text blocks.

This will also enable anyone using markdown, or not wishing to add
class attributes to each element in a text block to use the same
pattern, for example, for headings and lists.

The elements page stylesheet also sets a max-width for lists, to avoid
having to use grid layout to constrain the text on its pages.

This will also allow the prototype kit to have an additional stylesheet
which can extend common element styles, using the .text scope.
  • Loading branch information
@gemmaleigh
gemmaleigh committed Dec 4, 2015
1 parent 8801659 commit 061c512
Show file tree
Hide file tree
Showing 21 changed files with 1,862 additions and 1,830 deletions.
9 changes: 9 additions & 0 deletions public/sass/elements-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,15 @@

// These are example styles, used only for the elements pages

// Set a max-width for scoped text elements
.text {
ul,
ol {
// Aim for less than 75 characters per line of text
max-width: 30em;
}
}

.elements-index {
// Reduce top and bottom margins
.heading-medium {
Expand Down
27 changes: 15 additions & 12 deletions public/sass/elements/_elements-typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,29 +126,32 @@ main {
}

// Text
p {
// Scope all paragraphs to the parent class '.text'
.text {

@include core-19;

margin-top: em(5);
margin-bottom: em(20);
p {
// Set a max-width for body copy
// Aim for less than 75 characters per line of text
max-width: 30em;

@include media(tablet) {
margin-top: em(5, 19);
margin-bottom: em(20, 19);
margin-top: em(5);
margin-bottom: em(20);

@include media(tablet) {
margin-top: em(5, 19);
margin-bottom: em(20, 19);
}
}

}

// Lede, or intro text
.lede {
@include core-24;
}

// Set a max-width for text blocks
// Less than 75 characters per line of text
.text {
max-width: 30em;
}

.text-secondary {
color: $secondary-text-colour;
}
Expand Down
2 changes: 1 addition & 1 deletion public/sass/elements/_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ ol {
.list-number {
list-style-type: decimal;
padding-left: 20px;

@include ie-lte(7) {
padding-left: 28px;
}
Expand Down
15 changes: 9 additions & 6 deletions views/examples/example_date.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@

{{>breadcrumb}}

<h1 class="heading-xlarge">
<span class="heading-secondary">Form elements</span>
Example: Date
</h1>
<div class="text">

<!-- Date of birth -->
{{> form_date }}
<h1 class="heading-xlarge">
<span class="heading-secondary">Form elements</span>
Example: Date
</h1>

<!-- Date of birth -->
{{> form_date }}

</div><!-- /.text -->
</main><!-- /#content -->
{{/content}}

Expand Down
151 changes: 77 additions & 74 deletions views/examples/example_details_summary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,85 +7,88 @@

{{>breadcrumb}}

<h1 class="heading-xlarge">
<span class="heading-secondary">Typography</span>
Example: Details summary
</h1>

<div class="grid-row">
<div class="column-two-thirds">

<p>
This example page demonstrates conditionally revealing information, using the HTML5 <code class="code">details</code> and <code class="code">summary</code> elements, <a href="http://html5doctor.com/the-details-and-summary-elements/" rel="external">they are described here</a>.
</p>

<p>
These elements are only supported by <a href="http://caniuse.com/#feat=details" rel="external">a few modern browsers</a> at the moment so you'll need a JavaScript polyfill to make them work in other browsers. <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js" rel="external">Here's the polyfill used by GOV.UK elements</a>.
</p>

<p>
The polyfill uses the <code class="code">aria-controls</code> attribute on the controlling element to associate it with the section it shows/hides. This is combined with the <code class="code">aria-expanded</code> attribute on the section to inform the <a href="http://www.w3.org/TR/html-aapi/#introduction-accessibility-apis" rel="external">accessibility API</a> of the changes to the document.
</p>

<h2 class="heading-medium">Example 1: Summary content is visible, details content is hidden</h2>

<div class="form-group">
<label class="form-label-bold" for="driving-licence">
Driving licence number
<span class="form-hint">For example, NORGA657054SM91J</span>
</label>
<input class="form-control" id="driving-licence" type="text">
</div>
<div class="text">

<details class="details">
<summary class="details-summary">
<span class="details-summary-text">Where to find your driving licence number</span>
</summary>
<div class="panel-indent">
<p>
Your driving licence number can be found in section 5<br>
of your driving licence photocard.
</p>
</div>
</details>

<h2 class="heading-medium">Example 2: Summary content is visible, details content is visible</h2>
<p>
The inital state is set to be open, by setting the boolean <code class="code">open</code> attribute.
</p>

<details class="details" open>
<summary class="details-summary">
<span class="details-summary-text">Where to find your driving licence number</span>
</summary>
<div class="panel-indent">
<p>
Your driving licence number can be found in section 5<br>
of your driving licence photocard.
</p>
</div>
</details>

<h2 class="heading-medium">Example 3: Summary content is visible, details content is visible</h2>
<p>
The inital state is set to be open, by setting the value of the <code class="code">open</code> attribute to open.
</p>

<details class="details" open="open">
<summary class="details-summary">
<span class="details-summary-text">Where to find your driving licence number</span>
</summary>
<div class="panel-indent">
<p>
Your driving licence number can be found in section 5<br>
of your driving licence photocard.
</p>
<h1 class="heading-xlarge">
<span class="heading-secondary">Typography</span>
Example: Details summary
</h1>

<div class="grid-row">
<div class="column-two-thirds">

<p>
This example page demonstrates conditionally revealing information, using the HTML5 <code class="code">details</code> and <code class="code">summary</code> elements, <a href="http://html5doctor.com/the-details-and-summary-elements/" rel="external">they are described here</a>.
</p>

<p>
These elements are only supported by <a href="http://caniuse.com/#feat=details" rel="external">a few modern browsers</a> at the moment so you'll need a JavaScript polyfill to make them work in other browsers. <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js" rel="external">Here's the polyfill used by GOV.UK elements</a>.
</p>

<p>
The polyfill uses the <code class="code">aria-controls</code> attribute on the controlling element to associate it with the section it shows/hides. This is combined with the <code class="code">aria-expanded</code> attribute on the section to inform the <a href="http://www.w3.org/TR/html-aapi/#introduction-accessibility-apis" rel="external">accessibility API</a> of the changes to the document.
</p>

<h2 class="heading-medium">Example 1: Summary content is visible, details content is hidden</h2>

<div class="form-group">
<label class="form-label-bold" for="driving-licence">
Driving licence number
<span class="form-hint">For example, NORGA657054SM91J</span>
</label>
<input class="form-control" id="driving-licence" type="text">
</div>
</details>

<details class="details">
<summary class="details-summary">
<span class="details-summary-text">Where to find your driving licence number</span>
</summary>
<div class="panel-indent">
<p>
Your driving licence number can be found in section 5<br>
of your driving licence photocard.
</p>
</div>
</details>

<h2 class="heading-medium">Example 2: Summary content is visible, details content is visible</h2>
<p>
The inital state is set to be open, by setting the boolean <code class="code">open</code> attribute.
</p>

<details class="details" open>
<summary class="details-summary">
<span class="details-summary-text">Where to find your driving licence number</span>
</summary>
<div class="panel-indent">
<p>
Your driving licence number can be found in section 5<br>
of your driving licence photocard.
</p>
</div>
</details>

<h2 class="heading-medium">Example 3: Summary content is visible, details content is visible</h2>
<p>
The inital state is set to be open, by setting the value of the <code class="code">open</code> attribute to open.
</p>

<details class="details" open="open">
<summary class="details-summary">
<span class="details-summary-text">Where to find your driving licence number</span>
</summary>
<div class="panel-indent">
<p>
Your driving licence number can be found in section 5<br>
of your driving licence photocard.
</p>
</div>
</details>

</div>
</div>
</div>

</div><!-- /.text -->
</main><!-- /#content -->
{{/content}}

Expand Down
Loading

0 comments on commit 061c512

Please sign in to comment.