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

Customization documentation for card module

Browse source 
Added documentation for card module's customization, setup for other pages not yet done, updated older customization pages as needed to fix mistakes.
This commit is contained in:
Angelos Chalaris 2017-04-17 20:09:38 +03:00
parent e1f38145e1
commit d7482bbcfe
7 changed files with 244 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
docs/customization/card.html
View file

@ -22,6 +22,8 @@
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;}header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
</style>
</head>
<body>
@ -58,8 +60,221 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To customize the <strong>card</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Cards &amp; sections</h2></div>
<div class="section">
<p>The <strong>card</strong> module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.</p><br/>
<table width="100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Variable">$card-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for card components</td><td data-label="Sample value">'card'</td>
</tr>
<tr>
<td data-label="Variable">$card-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for card components</td><td data-label="Sample value">#fafafa</td>
</tr>
<tr>
<td data-label="Variable">$card-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for card components</td><td data-label="Sample value">$fore-color</td>
</tr>
<tr>
<td data-label="Variable">$card-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for card components</td><td data-label="Sample value">1px solid #9e9e9e</td>
</tr>
<tr>
<td data-label="Variable">$card-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">Border radius for card components</td><td data-label="Sample value">2px</td>
</tr>
<tr>
<td data-label="Variable">$card-margin</td><td data-label="Type">Margin</td>
<td data-label="Description">Margin for card components</td><td data-label="Sample value">16px</td>
</tr>
<tr>
<td data-label="Variable">$card-box-shadow</td><td data-label="Type">Box shadow</td>
<td data-label="Description">Box shadow for card components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
</tr>
<tr>
<td data-label="Variable">$card-normal-width</td><td data-label="Type">Width</td>
<td data-label="Description">Width for card components</td><td data-label="Sample value">320px</td>
</tr>
<tr>
<td data-label="Variable">$card-section-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for card components' sections</td><td data-label="Sample value">'section'</td>
</tr>
<tr>
<td data-label="Variable">$card-section-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">Border style for card components' sections</td><td data-label="Sample value">1px solid #bdbdbd</td>
</tr>
<tr>
<td data-label="Variable">$card-section-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for card components' sections</td><td data-label="Sample value">6px</td>
</tr>
<tr>
<td data-label="Variable">$card-section-media-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for card components' media sections</td><td data-label="Sample value">'media'</td>
</tr>
<tr>
<td data-label="Variable">$card-section-media-height</td><td data-label="Type">Height</td>
<td data-label="Description">Height for card components' media sections</td><td data-label="Sample value">200px</td>
</tr>
</tbody>
</table><br/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section"><h2>Card mixins</h2></div>
<div class="section">
<p>The <strong>card</strong> module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.</p><br/>
<table width="100%" class="striped">
<caption>Card mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Mixin">make-card-alt-color (<span class="fore-primary">$card-alt-name</span>, <span class="fore-primary">$card-alt-back-color</span>, <span class="fore-primary">$card-alt-fore-color</span>, <span class="fore-tertiary">$card-alt-border-style</span>, <span class="fore-tertiary">$card-alt-border-radius</span>, <span class="fore-tertiary">$card-alt-section-border-style</span>)</td>
<td data-label="Description">Creates a new card color variant using the specified values.</td>
</tr>
<tr>
<td data-label="Mixin">make-card-alt-size (<span class="fore-primary">$card-alt-size-name</span>, <span class="fore-primary">$card-alt-size-width</span>)</td>
<td data-label="Description">Creates a new card size variant using the specified values.</td>
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Parameter">$card-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the card color variant</td><td data-label="Sample value">'inverse'</td>
</tr>
<tr>
<td data-label="Parameter">$card-alt-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the card color variant</td><td data-label="Sample value">#212121</td>
</tr>
<tr>
<td data-label="Parameter">$card-alt-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for the card color variant</td><td data-label="Sample value">#fafafa</td>
</tr>
<tr>
<td data-label="Parameter">$card-alt-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">(Optional) Border style for the card color variant</td><td data-label="Sample value">1px solid #424242</td>
</tr>
<tr>
<td data-label="Parameter">$card-alt-border-radius</td><td data-label="Type">Border radius</td>
<td data-label="Description">(Optional) Border radius for the card color variant</td><td data-label="Sample value">2px</td>
</tr>
<tr>
<td data-label="Parameter">$card-alt-section-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">(Optional) Border style for the card color variant's section borders</td><td data-label="Sample value">1px solid #616161</td>
</tr>
</tbody>
</table><br/>
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-color</span> ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);</pre>
<br/>
<table width="100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-alt-size</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Parameter">$card-alt-size-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the card size variant</td><td data-label="Sample value">'large'</td>
</tr>
<tr>
<td data-label="Parameter">$card-alt-size-width</td><td data-label="Type">Width</td>
<td data-label="Description">Width for the card size variant</td><td data-label="Sample value">480px</td>
</tr>
</tbody>
</table><br/>
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-size</span> ('large', 480px);</pre>
<br/>
<table width="100%" class="striped">
<caption>Card section mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span)</td>
<td data-label="Description">Creates a new card section color variant using the specified values.</td>
</tr>
<tr>
<td data-label="Mixin">make-card-section-alt-style (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-padding</span>)</td>
<td data-label="Description">Creates a new card section style variant using the specified values.</td>
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-section-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Parameter">$card-section-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the card section color variant</td><td data-label="Sample value">'dark'</td>
</tr>
<tr>
<td data-label="Parameter">$card-section-alt-back-color</td><td data-label="Type">Color</td>
<td data-label="Description">Background color for the card section color variant</td><td data-label="Sample value">#e0e0e0</td>
</tr>
<tr>
<td data-label="Parameter">$card-section-alt-fore-color</td><td data-label="Type">Color</td>
<td data-label="Description">Text color for the card section color variant</td><td data-label="Sample value">#212121</td>
</tr>
<tr>
<td data-label="Parameter">$card-section-alt-border-style</td><td data-label="Type">Border</td>
<td data-label="Description">(Optional) Border style for the card section color variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
</tr>
</tbody>
</table><br/>
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-color</span> ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);</pre>
<br/>
<table width="100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-section-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Parameter">$card-section-alt-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for the card section style variant</td><td data-label="Sample value">'double-padded'</td>
</tr>
<tr>
<td data-label="Parameter">$card-section-alt-padding</td><td data-label="Type">Padding</td>
<td data-label="Description">Padding for the card section style variant</td><td data-label="Sample value">10px</td>
</tr>
</tbody>
</table><br/>
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-style</span> ('double-padded', 10px);</pre>
<br/>
</div>
</div>
</div>

5
docs/customization/contextual.html
View file

@ -22,6 +22,8 @@
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
</style>
</head>
<body>
@ -58,8 +60,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>contextual</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To customize the <strong>contextual</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
</div>
</div>
</div>

6
docs/customization/input_control.html
View file

@ -457,12 +457,6 @@
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-style</span> ('large', 2px solid #9e9e9e, 4px, 18px, 10px);</pre>
<br/>
</div>
<div class="section">
<h3>Notes:</h3>
<ol>
<li id="footer-note-one">The value of <code>$footer-sticky-name</code> will only be used if <code>$include-footer-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
</ol>
</div>
</div>
</div>
</div>

5
docs/customization/progress.html
View file

@ -24,6 +24,8 @@
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #bdbdbd;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
</style>
</head>
<body>
@ -60,8 +62,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>progress</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To customize the <strong>progress</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
</div>
</div>
</div>

5
docs/customization/tab.html
View file

@ -22,6 +22,8 @@
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
</style>
</head>
<body>
@ -58,8 +60,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>tab</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To customize the <strong>tab</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
</div>
</div>
</div>

5
docs/customization/utility.html
View file

@ -22,6 +22,8 @@
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
.box-colored { color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
td:first-child, td:last-child { font-family: monospace, monospace; }
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
</style>
</head>
<body>
@ -58,8 +60,7 @@
</div>
<div class="section">
<h2>Quick start</h2>
<p>To use the <strong>utility</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p><br>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
<p>To customize the <strong>utility</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
</div>
</div>
</div>

7
docs/v2/DEVLOG.md
View file

@ -966,3 +966,10 @@
- Documented `navigation` module's customization page.
- Resolved #63, replacing the `flex-grow` and `flex-shrink` properties with the `flex` shorthand. Everything should display properly across browsers now.
- Fully documented `input_control` and `table` modules in terms of customization.
## 20170417
- Merged couple of PRs into `master`, updated `dev211` with the new changes to make sure everything is up to date.
- Dealt with a couple of minor mistakes in existing modules.
- Documented `card` module's customization.
- Added base text and styles for all customization pages not yet finished.