First commit.
This commit is contained in:
Fredrik Jonsson
commit
b7977e1c28
2 changed files with 28081 additions and 0 deletions
103
sass/base/headings/_headings.scss
Normal file
103
sass/base/headings/_headings.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
// Headings
|
||||
//
|
||||
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
|
||||
// classes are also available, for when you want to match the font styling of a
|
||||
// heading but still want your text to be displayed inline.
|
||||
//
|
||||
// Markup: headings-h.twig
|
||||
//
|
||||
// Style guide: base.headings
|
||||
|
||||
// Address variable `h1` font-size and margin within `section` and `article`
|
||||
// contexts in Firefox 4+, Safari, and Chrome.
|
||||
h1,
|
||||
%h1 {
|
||||
// Set the font-size and line-height while keeping a proper vertical rhythm.
|
||||
@include type-layout(xxl, 1.5);
|
||||
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margins.
|
||||
@include margin-top(1, xxl);
|
||||
@include margin-bottom(1, xxl);
|
||||
}
|
||||
|
||||
h2,
|
||||
%h2 {
|
||||
@include type-layout(xl, 1.5);
|
||||
@include margin-top(1, xl);
|
||||
@include margin-bottom(1, xl);
|
||||
}
|
||||
|
||||
h3,
|
||||
%h3 {
|
||||
@include type-layout(l, 1.5);
|
||||
@include margin-top(1, l);
|
||||
@include margin-bottom(1, l);
|
||||
}
|
||||
|
||||
h4,
|
||||
%h4 {
|
||||
@include type-layout(m, 1);
|
||||
@include margin-top(1, m);
|
||||
@include margin-bottom(1, m);
|
||||
}
|
||||
|
||||
h5,
|
||||
%h5 {
|
||||
@include type-layout(s, 1);
|
||||
@include margin-top(1, s);
|
||||
@include margin-bottom(1, s);
|
||||
}
|
||||
|
||||
h6,
|
||||
%h6 {
|
||||
@include type-layout(xs, 1);
|
||||
@include margin-top(1, xs);
|
||||
@include margin-bottom(1, xs);
|
||||
}
|
||||
|
||||
@include respond-to(s) {
|
||||
h1,
|
||||
%h1 {
|
||||
// Set the font-size and line-height while keeping a proper vertical rhythm.
|
||||
@include type-layout(xxl-2, 2);
|
||||
|
||||
// Set 1 unit of vertical rhythm on the top and bottom margins.
|
||||
@include margin-top(1, xxl-2);
|
||||
@include margin-bottom(1, xxl-2);
|
||||
}
|
||||
|
||||
h2,
|
||||
%h2 {
|
||||
@include type-layout(xl-2, 1.5);
|
||||
@include margin-top(1, xl-2);
|
||||
@include margin-bottom(1, xl-2);
|
||||
}
|
||||
|
||||
h3,
|
||||
%h3 {
|
||||
@include type-layout(l-2, 1.5);
|
||||
@include margin-top(1, l-2);
|
||||
@include margin-bottom(1, l-2);
|
||||
}
|
||||
|
||||
h4,
|
||||
%h4 {
|
||||
@include type-layout(m-2, 1);
|
||||
@include margin-top(1, m-2);
|
||||
@include margin-bottom(1, m-2);
|
||||
}
|
||||
|
||||
h5,
|
||||
%h5 {
|
||||
@include type-layout(s-2, 1);
|
||||
@include margin-top(1, s-2);
|
||||
@include margin-bottom(1, s-2);
|
||||
}
|
||||
|
||||
h6,
|
||||
%h6 {
|
||||
@include type-layout(xs-2, 1);
|
||||
@include margin-top(1, xs-2);
|
||||
@include margin-bottom(1, xs-2);
|
||||
}
|
||||
}
|
||||
25
sass/base/headings/headings-h.twig
Normal file
25
sass/base/headings/headings-h.twig
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<h1 class="{{modifier_class}}">Heading Level 1 (h1)</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h2 class="{{modifier_class}}">Heading Level 2 (h2)</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h3 class="{{modifier_class}}">Heading Level 3 (h3)</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h4 class="{{modifier_class}}">Heading Level 4 (h4)</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h5 class="{{modifier_class}}">Heading Level 5 (h5)</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h6 class="{{modifier_class}}">Heading Level 6 (h6)</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
|
||||
<h1 class="{{modifier_class}}">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h2 class="{{modifier_class}}">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h3 class="{{modifier_class}}">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h4 class="{{modifier_class}}">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h5 class="{{modifier_class}}">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
<h6 class="{{modifier_class}}">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
|
||||
Loading…
Reference in a new issue