mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
New Typography prefix and default styles
This commit is contained in:
Lucas Vallenet
@@ -1,28 +0,0 @@
|
||||
.c-heading {
|
||||
line-height: $line-height-h;
|
||||
margin-bottom: rem(30px);
|
||||
|
||||
&.-h1 {
|
||||
font-size: rem($font-size-h1);
|
||||
}
|
||||
|
||||
&.-h2 {
|
||||
font-size: rem($font-size-h2);
|
||||
}
|
||||
|
||||
&.-h3 {
|
||||
font-size: rem($font-size-h3);
|
||||
}
|
||||
|
||||
&.-h4 {
|
||||
font-size: rem($font-size-h4);
|
||||
}
|
||||
|
||||
&.-h5 {
|
||||
font-size: rem($font-size-h5);
|
||||
}
|
||||
|
||||
&.-h6 {
|
||||
font-size: rem($font-size-h6);
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,17 @@
|
||||
// Base / Page
|
||||
// ==========================================================================
|
||||
|
||||
:root {
|
||||
|
||||
// Font sizes
|
||||
--font-size-h1: #{rem(36px)};
|
||||
--font-size-h2: #{rem(28px)};
|
||||
--font-size-h3: #{rem(24px)};
|
||||
--font-size-h4: #{rem(20px)};
|
||||
--font-size-h5: #{rem(18px)};
|
||||
--font-size-h6: #{rem(16px)};
|
||||
}
|
||||
|
||||
//
|
||||
// Simple page-level setup.
|
||||
//
|
||||
|
||||
@@ -31,6 +31,11 @@
|
||||
@import "elements/fonts";
|
||||
@import "elements/page";
|
||||
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
@import "typography/headings";
|
||||
@import "typography/wysiwyg";
|
||||
|
||||
// Objects
|
||||
// ==========================================================================
|
||||
@import "objects/scroll";
|
||||
@@ -47,7 +52,6 @@
|
||||
// Components
|
||||
// ==========================================================================
|
||||
@import "components/scrollbar";
|
||||
@import "components/heading";
|
||||
@import "components/button";
|
||||
@import "components/form";
|
||||
|
||||
|
||||
@@ -21,14 +21,6 @@ $font-size: 16px;
|
||||
$line-height: 24px / $font-size;
|
||||
$font-family: $font-sans-serif;
|
||||
$color: #222222;
|
||||
// Headings
|
||||
$font-size-h1: 36px !default;
|
||||
$font-size-h2: 28px !default;
|
||||
$font-size-h3: 24px !default;
|
||||
$font-size-h4: 20px !default;
|
||||
$font-size-h5: 18px !default;
|
||||
$font-size-h6: 16px !default;
|
||||
$line-height-h: $line-height;
|
||||
// Weights
|
||||
$light: 300;
|
||||
$normal: 400;
|
||||
|
||||
38
assets/styles/typography/_headings.scss
Normal file
38
assets/styles/typography/_headings.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
// ==========================================================================
|
||||
// Typography / Headings
|
||||
// ==========================================================================
|
||||
|
||||
.t-h1,
|
||||
.t-h2,
|
||||
.t-h3,
|
||||
.t-h4,
|
||||
.t-h5,
|
||||
.t-h6 {
|
||||
--heading-line-height: #{$line-height};
|
||||
|
||||
line-height: var(--heading-line-height);
|
||||
}
|
||||
|
||||
.t-h1 {
|
||||
font-size: var(--font-size-h1);
|
||||
}
|
||||
|
||||
.t-h2 {
|
||||
font-size: var(--font-size-h2);
|
||||
}
|
||||
|
||||
.t-h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
.t-h4 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
.t-h5 {
|
||||
font-size: var(--font-size-h5);
|
||||
}
|
||||
|
||||
.t-h6 {
|
||||
font-size: var(--font-size-h6);
|
||||
}
|
||||
55
assets/styles/typography/_wysiwyg.scss
Normal file
55
assets/styles/typography/_wysiwyg.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// ==========================================================================
|
||||
// Typography / Wysiwyg
|
||||
// ==========================================================================
|
||||
|
||||
.t-wysiwyg {
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
blockquote {
|
||||
margin-bottom: $line-height * 1em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
h1 { @extend .t-h1; }
|
||||
h2 { @extend .t-h2; }
|
||||
h3 { @extend .t-h3; }
|
||||
h4 { @extend .t-h4; }
|
||||
h5 { @extend .t-h5; }
|
||||
h6 { @extend .t-h6; }
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -31,7 +31,7 @@
|
||||
|
||||
<main data-scroll-section>
|
||||
<div class="o-container">
|
||||
<h1 class="c-heading -h1">Page</h1>
|
||||
<h1 class="t-h1">Page</h1>
|
||||
|
||||
<div class="o-layout">
|
||||
<div class="o-layout_item u-1/2@from-small">
|
||||
|
||||
@@ -31,19 +31,19 @@
|
||||
|
||||
<main data-scroll-section>
|
||||
<div class="o-container">
|
||||
<h1 class="c-heading -h1">Images</h1>
|
||||
<h1 class="t-h1">Images</h1>
|
||||
|
||||
<section>
|
||||
<h2 class="c-heading -h2">Lazy load demo</h2>
|
||||
<h2 class="t-h2">Lazy load demo</h2>
|
||||
|
||||
<h3 class="c-heading -h3">Basic</h3>
|
||||
<h3 class="t-h3">Basic</h3>
|
||||
|
||||
<div style="width: 640px; max-width: 100%;">
|
||||
<div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
|
||||
<div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/640/480?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
|
||||
</div>
|
||||
|
||||
<h4 class="c-heading -h3">Using o-ratio & background-image</h3>
|
||||
<h4 class="t-h3">Using o-ratio & background-image</h3>
|
||||
|
||||
<div style="width: 480px; max-width: 100%;">
|
||||
<div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
|
||||
@@ -52,9 +52,9 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="c-heading -h3">Relative to scroll</h3>
|
||||
<h3 class="t-h3">Relative to scroll</h3>
|
||||
|
||||
<h4 class="c-heading -h3">Using o-ratio & img</h3>
|
||||
<h4 class="t-h3">Using o-ratio & img</h3>
|
||||
|
||||
<div style="width: 640px; max-width: 100%;">
|
||||
<div class="o-ratio u-4:3">
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="c-heading -h3">Using o-ratio & background-image</h3>
|
||||
<h4 class="t-h3">Using o-ratio & background-image</h3>
|
||||
|
||||
<div style="width: 480px; max-width: 100%;">
|
||||
<div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=1"></div>
|
||||
@@ -84,7 +84,7 @@
|
||||
<div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=5"></div>
|
||||
</div>
|
||||
|
||||
<h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
|
||||
<h4 class="t-h3">Using SVG viewport for ratio</h3>
|
||||
|
||||
<div style="width: 480px; max-width: 100%;">
|
||||
<img
|
||||
|
||||
@@ -50,7 +50,17 @@
|
||||
|
||||
<main data-scroll-section>
|
||||
<div class="o-container">
|
||||
<h1 class="c-heading -h1">Hello</h1>
|
||||
<h1 class="t-h1">Hello</h1>
|
||||
<div class="t-wysiwyg">
|
||||
<h2>Crucifix de charrue de cibouleau.</h2>
|
||||
<p>Cossin de ciarge de sacristi de calvaire de <strong>bâtard de caltor</strong> de mosus d'étole de boswell de sacrament de sapristi de gériboire de Jésus de plâtre.</p>
|
||||
<ul>
|
||||
<li>Viande à chien de saint-cimonaque.</li>
|
||||
<li>Sacristi de calvince de charogne de saint-ciarge.</li>
|
||||
</ul>
|
||||
<h3>Calvaire de gériboire de saintes fesses.</h3>
|
||||
<p>Viande à chien de boswell de sacristi de patente à gosse de mangeux d'marde de <i>Jésus de plâtre de gériboire de purée de charrue</i> de christie de torrieux de cimonaque de saint-ciarge de bâtard de maudite marde de cochonnerie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user