beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Documented card sections

Browse source 
Also, some minor changes in card sections.
This commit is contained in:
Angelos Chalaris 2017-11-17 12:03:07 +02:00
parent b03af51bb6
commit 83f5f12c95
9 changed files with 148 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
dist/mini-default.css vendored
View file

@ -257,14 +257,15 @@ a:hover, a:focus {
.col-sm,
.row.cols-sm > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
.col-sm-1,
.row.cols-sm-1 > * {
flex-basis: 8.33333%;
max-width: 8.33333%;
flex-basis: 8.33333%;
}
.col-sm-offset-0 {
@ -273,8 +274,8 @@ a:hover, a:focus {
.col-sm-2,
.row.cols-sm-2 > * {
flex-basis: 16.66667%;
max-width: 16.66667%;
flex-basis: 16.66667%;
}
.col-sm-offset-1 {
@ -283,8 +284,8 @@ a:hover, a:focus {
.col-sm-3,
.row.cols-sm-3 > * {
flex-basis: 25%;
max-width: 25%;
flex-basis: 25%;
}
.col-sm-offset-2 {
@ -293,8 +294,8 @@ a:hover, a:focus {
.col-sm-4,
.row.cols-sm-4 > * {
flex-basis: 33.33333%;
max-width: 33.33333%;
flex-basis: 33.33333%;
}
.col-sm-offset-3 {
@ -303,8 +304,8 @@ a:hover, a:focus {
.col-sm-5,
.row.cols-sm-5 > * {
flex-basis: 41.66667%;
max-width: 41.66667%;
flex-basis: 41.66667%;
}
.col-sm-offset-4 {
@ -313,8 +314,8 @@ a:hover, a:focus {
.col-sm-6,
.row.cols-sm-6 > * {
flex-basis: 50%;
max-width: 50%;
flex-basis: 50%;
}
.col-sm-offset-5 {
@ -323,8 +324,8 @@ a:hover, a:focus {
.col-sm-7,
.row.cols-sm-7 > * {
flex-basis: 58.33333%;
max-width: 58.33333%;
flex-basis: 58.33333%;
}
.col-sm-offset-6 {
@ -333,8 +334,8 @@ a:hover, a:focus {
.col-sm-8,
.row.cols-sm-8 > * {
flex-basis: 66.66667%;
max-width: 66.66667%;
flex-basis: 66.66667%;
}
.col-sm-offset-7 {
@ -343,8 +344,8 @@ a:hover, a:focus {
.col-sm-9,
.row.cols-sm-9 > * {
flex-basis: 75%;
max-width: 75%;
flex-basis: 75%;
}
.col-sm-offset-8 {
@ -353,8 +354,8 @@ a:hover, a:focus {
.col-sm-10,
.row.cols-sm-10 > * {
flex-basis: 83.33333%;
max-width: 83.33333%;
flex-basis: 83.33333%;
}
.col-sm-offset-9 {
@ -363,8 +364,8 @@ a:hover, a:focus {
.col-sm-11,
.row.cols-sm-11 > * {
flex-basis: 91.66667%;
max-width: 91.66667%;
flex-basis: 91.66667%;
}
.col-sm-offset-10 {
@ -373,8 +374,8 @@ a:hover, a:focus {
.col-sm-12,
.row.cols-sm-12 > * {
flex-basis: 100%;
max-width: 100%;
flex-basis: 100%;
}
.col-sm-offset-11 {
@ -404,101 +405,102 @@ a:hover, a:focus {
}
.col-md,
.row.cols-md > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
.col-md-1,
.row.cols-md-1 > * {
flex-basis: 8.33333%;
max-width: 8.33333%;
flex-basis: 8.33333%;
}
.col-md-offset-0 {
margin-left: 0;
}
.col-md-2,
.row.cols-md-2 > * {
flex-basis: 16.66667%;
max-width: 16.66667%;
flex-basis: 16.66667%;
}
.col-md-offset-1 {
margin-left: 8.33333%;
}
.col-md-3,
.row.cols-md-3 > * {
flex-basis: 25%;
max-width: 25%;
flex-basis: 25%;
}
.col-md-offset-2 {
margin-left: 16.66667%;
}
.col-md-4,
.row.cols-md-4 > * {
flex-basis: 33.33333%;
max-width: 33.33333%;
flex-basis: 33.33333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-5,
.row.cols-md-5 > * {
flex-basis: 41.66667%;
max-width: 41.66667%;
flex-basis: 41.66667%;
}
.col-md-offset-4 {
margin-left: 33.33333%;
}
.col-md-6,
.row.cols-md-6 > * {
flex-basis: 50%;
max-width: 50%;
flex-basis: 50%;
}
.col-md-offset-5 {
margin-left: 41.66667%;
}
.col-md-7,
.row.cols-md-7 > * {
flex-basis: 58.33333%;
max-width: 58.33333%;
flex-basis: 58.33333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-8,
.row.cols-md-8 > * {
flex-basis: 66.66667%;
max-width: 66.66667%;
flex-basis: 66.66667%;
}
.col-md-offset-7 {
margin-left: 58.33333%;
}
.col-md-9,
.row.cols-md-9 > * {
flex-basis: 75%;
max-width: 75%;
flex-basis: 75%;
}
.col-md-offset-8 {
margin-left: 66.66667%;
}
.col-md-10,
.row.cols-md-10 > * {
flex-basis: 83.33333%;
max-width: 83.33333%;
flex-basis: 83.33333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-11,
.row.cols-md-11 > * {
flex-basis: 91.66667%;
max-width: 91.66667%;
flex-basis: 91.66667%;
}
.col-md-offset-10 {
margin-left: 83.33333%;
}
.col-md-12,
.row.cols-md-12 > * {
flex-basis: 100%;
max-width: 100%;
flex-basis: 100%;
}
.col-md-offset-11 {
margin-left: 91.66667%;
@ -525,101 +527,102 @@ a:hover, a:focus {
}
.col-lg,
.row.cols-lg > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
.col-lg-1,
.row.cols-lg-1 > * {
flex-basis: 8.33333%;
max-width: 8.33333%;
flex-basis: 8.33333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-2,
.row.cols-lg-2 > * {
flex-basis: 16.66667%;
max-width: 16.66667%;
flex-basis: 16.66667%;
}
.col-lg-offset-1 {
margin-left: 8.33333%;
}
.col-lg-3,
.row.cols-lg-3 > * {
flex-basis: 25%;
max-width: 25%;
flex-basis: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66667%;
}
.col-lg-4,
.row.cols-lg-4 > * {
flex-basis: 33.33333%;
max-width: 33.33333%;
flex-basis: 33.33333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-5,
.row.cols-lg-5 > * {
flex-basis: 41.66667%;
max-width: 41.66667%;
flex-basis: 41.66667%;
}
.col-lg-offset-4 {
margin-left: 33.33333%;
}
.col-lg-6,
.row.cols-lg-6 > * {
flex-basis: 50%;
max-width: 50%;
flex-basis: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66667%;
}
.col-lg-7,
.row.cols-lg-7 > * {
flex-basis: 58.33333%;
max-width: 58.33333%;
flex-basis: 58.33333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-8,
.row.cols-lg-8 > * {
flex-basis: 66.66667%;
max-width: 66.66667%;
flex-basis: 66.66667%;
}
.col-lg-offset-7 {
margin-left: 58.33333%;
}
.col-lg-9,
.row.cols-lg-9 > * {
flex-basis: 75%;
max-width: 75%;
flex-basis: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66667%;
}
.col-lg-10,
.row.cols-lg-10 > * {
flex-basis: 83.33333%;
max-width: 83.33333%;
flex-basis: 83.33333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-11,
.row.cols-lg-11 > * {
flex-basis: 91.66667%;
max-width: 91.66667%;
flex-basis: 91.66667%;
}
.col-lg-offset-10 {
margin-left: 83.33333%;
}
.col-lg-12,
.row.cols-lg-12 > * {
flex-basis: 100%;
max-width: 100%;
flex-basis: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66667%;
@ -718,7 +721,7 @@ a:hover, a:focus {
}
.card > .section.dark {
--card-back-color: linear-gradient(135deg, #eceff1 10%, #90a4ae 100%);
--card-back-color: #e0e0e0;
}
.card > .section.double-padded {
@ -786,6 +789,7 @@ label {
}
.input-group.fluid > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
@ -804,6 +808,7 @@ label {
}
.input-group.vertical > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
@ -957,6 +962,7 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
.button-group > .button, .button-group > [role="button"] {
margin: 0;
max-width: 100%;
flex: 1 1 auto;
text-align: center;
border: 0;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

72
docs/doc-fragments/cardSections.js
View file

@ -1,15 +1,71 @@
module.exports = {
id: 'card-sections',
title: 'Card sections',
keywords: [],
description: '',
example: '',
samples: [],
notes: [],
customization: [],
modifiers: [],
keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `media`, `double-padded`, `dark`],
description: '<p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the apropriate class applied to it.</p>',
example: `<div class="container" style="padding: 0.25rem"><div class="row"><div class="col-sm-12">
<div class="card fluid" style="margin: 0.5rem 0.25rem"><h3 class="doc section">Title section</h3><p class="doc section">This is a section with some textual content.</p></div>
</div></div></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre>`],
notes: [
`While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.`,
`Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.`,
`Media sections have a default height of <code>200px</code>.`,
`Due to the media sections using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support (recommended: <a href="https://github.com/bfred-it/object-fit-images">image polyfill</a>, <a href="https://github.com/jonathantneal/fitie">video polyfill</a>).`,
`Depending on the source website, some embedded videos might not display properly as media sections.`
],
customization: [
`Text color for cards and card sections can be changed by changing the value of the <code>--card-fore-color</code> variable.`,
`Background color for cards and card sections can be changed by changing the value of the <code>--card-back-color</code> variable.`,
`Border color for cards and card sections can be changed by changing the value of the <code>--card-border-color</code> variable.`,
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`
],
modifiers: [
{
title : 'Media sections',
description: '<p>You can create sections for media (<code>.media</code>), such as images or videos (using an <code>&lt;img&gt;</code> or a <code>&lt;iframe&gt;</code> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.</p>',
example: `<div class="container" style="padding: 0.25rem;"><div class="row">
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="placeholder"></div>
<div class="card"><div class="section"><h3>Card with video</h3></div><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe></div>
</div></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;img</span> <span class="highlight-b">src</span>=<span class="highlight-c">&quot;image.png&quot;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section media&quot;</span><span class="highlight-a">/&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre>`]
},
{
title : 'Color variants',
description: '<p>You can create sections with a darker (<code>.dark</code>) background, by applying the appropriate modifier.</p>',
example: `<div class="container" style="padding: 0.25rem;"><div class="row">
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div></div>
</div></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section dark&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre>`]
},
{
title : 'Additional spacing',
description: '<p>You can create sections with additional spacing (<code>.double-padded</code>), by applying the appropriate modifier.</p>',
example: `<div class="container" style="padding: 0.25rem;"><div class="row">
<div class="card"><div class="section"><h3>Normal spacing</h3></div><div class="section double-padded"><h3>Additional spacing</h3></div></div>
</div></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section double-padded&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre>`]
}
],
dos: [],
donts: []
donts: [
{
description: `Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.`,
sample: `<pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;p&gt;</span>This should have been a section!<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre>`
}
]
}
/*

6
docs/doc-fragments/cards.js
View file

@ -1,8 +1,8 @@
module.exports = {
id: 'cards',
title: 'Cards',
keywords: [`card`, `row`, `section`, `container`, `col`, `column`],
description: `<p><strong>mini.css</strong> provides you with cards, general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p>`,
keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `small`, `large`, `fluid`, `warning`, `error`],
description: `<p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p>`,
example: `<div class="container" style="padding: 0.25rem"><div class="row">
<div class="card"><div class="section"><h3 class="doc">Card 1</h3><p class="doc">This is a basic card with some sample content.</p></div></div>
<div class="card"><div class="section"><h3 class="doc">Card 2</h3><p class="doc">This is another card with some sample content.</p></div></div>
@ -16,7 +16,7 @@ module.exports = {
customization: [
`Text color for cards can be changed by changing the value of the <code>--card-fore-color</code> variable.`,
`Background color for cards can be changed by changing the value of the <code>--card-back-color</code> variable.`,
`Border color for caards can be changed by changing the value of the <code>--card-border-color</code> variable.`,
`Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.`,
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
],

1
docs/v3/DEVLOG.md
View file

@ -175,3 +175,4 @@
## 20171117
- Documented `card` and `card section` to complete the `layout` module's docs.
- Altered the `dark` section colors, didn't really like them.

40
docs/v3/docs.html
View file

@ -297,7 +297,7 @@
<div class="section double-padded"><h3>Customization</h3><ul><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable. This only affects the padding of the container.</li></ul></div>
</div><br/><div id="cards" class="card fluid">
<h2 class="section double-padded">Cards</h2>
<div class="section"><p><strong>mini.css</strong> provides you with cards, general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p></div>
<div class="section"><p><strong>mini.css</strong> provides you with cards (<code>.card</code>), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the <a href="#grid">grid system</a>, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.</p></div>
<div class="section"><h3>Example</h3><div class="container" style="padding: 0.25rem"><div class="row">
<div class="card"><div class="section"><h3 class="doc">Card 1</h3><p class="doc">This is a basic card with some sample content.</p></div></div>
<div class="card"><div class="section"><h3 class="doc">Card 2</h3><p class="doc">This is another card with some sample content.</p></div></div>
@ -338,15 +338,37 @@
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card fluid&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Try not to combine fixed-width and fluid cards. Instead, combine fixed-width cards with columns and place fluid cards inside them.</p></div></div><br/><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card warning error&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid applying two color modifiers on the same card.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Due to the fact that fluid cards stretch to fill their parent container, they might not fully respect their margins sometimes, although this should not cause any noticable problems in your web apps' layouts.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for caards can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
</div><br/><div id="card-sections" class="card fluid">
<h2 class="section double-padded">Card sections</h2>
<div class="section"></div>
<div class="section"><p>Card content is usually organized in smaller sections (<code>.section</code>) to be more easily digestible. A card section can be any valid HTML5 element with the apropriate class applied to it.</p></div>
<div class="section"><h3>Example</h3><div class="container" style="padding: 0.25rem"><div class="row"><div class="col-sm-12">
<div class="card fluid" style="margin: 0.5rem 0.25rem"><h3 class="doc section">Title section</h3><p class="doc section">This is a section with some textual content.</p></div>
</div></div></div></div>
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre></div>
<div class="section double-padded"><h3>Modifiers</h3>
<h4>Media sections</h4><p>You can create sections for media (<code>.media</code>), such as images or videos (using an <code>&lt;img&gt;</code> or a <code>&lt;iframe&gt;</code> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.</p><h5>Example</h5><div class="container" style="padding: 0.25rem;"><div class="row">
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="placeholder"></div>
<div class="card"><div class="section"><h3>Card with video</h3></div><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe></div>
</div></div><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;img</span> <span class="highlight-b">src</span>=<span class="highlight-c">&quot;image.png&quot;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section media&quot;</span><span class="highlight-a">/&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre><br/><h4>Color variants</h4><p>You can create sections with a darker (<code>.dark</code>) background, by applying the appropriate modifier.</p><h5>Example</h5><div class="container" style="padding: 0.25rem;"><div class="row">
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div></div>
</div></div><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section dark&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre><br/><h4>Additional spacing</h4><p>You can create sections with additional spacing (<code>.double-padded</code>), by applying the appropriate modifier.</p><h5>Example</h5><div class="container" style="padding: 0.25rem;"><div class="row">
<div class="card"><div class="section"><h3>Normal spacing</h3></div><div class="section double-padded"><h3>Additional spacing</h3></div></div>
</div></div><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section double-padded&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre></div>
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;card&quot;</span><span class="highlight-a">&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;section&quot;</span><span class="highlight-a">&gt;&lt;/div&gt;</span></span>
<span class="code-line"> <span class="highlight-a">&lt;p&gt;</span>This should have been a section!<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;/div&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.</li><li>Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.</li><li>Media sections have a default height of <code>200px</code>.</li><li>Due to the media sections using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support (recommended: <a href="https://github.com/bfred-it/object-fit-images">image polyfill</a>, <a href="https://github.com/jonathantneal/fitie">video polyfill</a>).</li><li>Depending on the source website, some embedded videos might not display properly as media sections.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for cards and card sections can be changed by changing the value of the <code>--card-fore-color</code> variable.</li><li>Background color for cards and card sections can be changed by changing the value of the <code>--card-back-color</code> variable.</li><li>Border color for cards and card sections can be changed by changing the value of the <code>--card-border-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
</div></main>
</div></div></body></html>

2
docs/v3/style.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
src/flavors/mini-default.scss
View file

@ -37,8 +37,8 @@ $card-error-fore-color: #f8f8f8; // Text color for card error
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name and background color for card dark section variant.
$card-section-dark-back-color: linear-gradient(135deg, #eceff1 10%, #90a4ae 100%);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);

4
src/flavors/mini-doc.scss
View file

@ -30,8 +30,8 @@ $card-error-fore-color: #f8f8f8; // Text color for card error
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name and background color for card dark section variant.
$card-section-dark-back-color: linear-gradient(135deg, #eceff1 10%, #90a4ae 100%);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);