Added tool links to flavors page
This commit is contained in:
Angelos Chalaris
parent
4c631cf4d4
commit
d4e2d6715f
7 changed files with 52 additions and 12 deletions
|
|
@ -234,7 +234,7 @@ var customizationMainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-
|
|||
var customizationMainEnd = `<footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>.</p></footer></main>`;
|
||||
|
||||
var customizationFragments = custFragments.map(f => buildCustomizationFragment(f)).join('<br/>');
|
||||
var customizationLinks = [buildLink(custFragments[0]), '<hr style="padding:0;"/>', ...custFragments[1].sections.map(f => buildLink(f))].join('');
|
||||
var customizationLinks = [buildLink(custFragments[0]), buildLink(custFragments[1]), '<hr style="padding:0;"/>', ...custFragments[2].sections.map(f => buildLink(f))].join('');
|
||||
|
||||
function buildCustomizationFragment(fragment){
|
||||
var fragmentHtml = `<div id="${fragment.id}" class="card fluid">
|
||||
|
|
|
|||
|
|
@ -1654,6 +1654,7 @@ module.exports = {
|
|||
flavorFile +='\\n';
|
||||
}
|
||||
|
||||
console.log(flavorFile);
|
||||
var base = './';
|
||||
var directory = '../';
|
||||
var files = [
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
var premadeFlavors = require('./premadeFlavors');
|
||||
var buildYourOwn = require('./buildYourOwnFlavor');
|
||||
var flavorTools = require('./flavorTools');
|
||||
|
||||
module.exports = [premadeFlavors, buildYourOwn]
|
||||
module.exports = [premadeFlavors, flavorTools, buildYourOwn]
|
||||
|
|
|
|||
13
docs/doc-fragments/flavorTools.js
Normal file
13
docs/doc-fragments/flavorTools.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
var version = require('../vinf').version;
|
||||
module.exports = {
|
||||
id: 'flavor-tools',
|
||||
title: 'Complementary tools',
|
||||
content: `<div class="section"><p>Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:</p>
|
||||
<ul>
|
||||
<li><a href="https://coolors.co/" rel="noopener" target="_blank">Coolors - Color schemes generator</a></li>
|
||||
<li><a href="https://uigradients.com/#PlayingwithReds" rel="noopener" target="_blank">uiGradients - Beautiful colored gradients</a></li>
|
||||
<li><a href="https://www.cssmatic.com/box-shadow" rel="noopener" target="_blank">Box shadow generator</a></li>
|
||||
<li><a href="https://www.webpagefx.com/web-design/hex-to-rgb/" rel="noopener" target="_blank">HEX to RGB converter</a></li>
|
||||
<li><a href="http://www.colorzilla.com/gradient-editor/" rel="noopener" target="_blank">Gradient generator</a></li>
|
||||
</ul></div>`
|
||||
}
|
||||
|
|
@ -2,5 +2,11 @@ var version = require('../vinf').version;
|
|||
module.exports = {
|
||||
id: 'prebuilt-flavors',
|
||||
title: 'Prebuilt flavors',
|
||||
content: `<p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul>`
|
||||
content: `<div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
|
||||
<ul>
|
||||
<li>Default</li>
|
||||
<li>Lite</li>
|
||||
<li>Dark</li>
|
||||
<li>Nord</li>
|
||||
</ul></div>`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -365,7 +365,10 @@
|
|||
|
||||
- Added `jszip`, `sass.js` and `file-saver` to `package.json`.
|
||||
- Used above tools and some code to finish up the `flavors` page generation process.
|
||||
- *TODO* Add links to useful tools.
|
||||
- *TODO* Add flavors.
|
||||
- *TODO* Auto-compile SCSS to CSS when generating, copy all `src` to the `docs`.
|
||||
- *TODO* Rebase and release.
|
||||
|
||||
## 20180528
|
||||
|
||||
- Added links to useful tools.
|
||||
|
|
|
|||
|
|
@ -25,9 +25,24 @@
|
|||
</header>
|
||||
<div class="row" id="doc-wrapper">
|
||||
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><a href="#prebuilt-flavors" id="link-to-prebuilt-flavors">Prebuilt flavors</a><hr style="padding:0;"/><a href="#textual-content" id="link-to-textual-content">Textual content</a><a href="#color-palette" id="link-to-color-palette">Color palette</a><a href="#universal-styles" id="link-to-universal-styles">Universal styles</a><a href="#grid" id="link-to-grid">Grid</a><a href="#cards" id="link-to-cards">Cards</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#header" id="link-to-header">Header</a><a href="#navbar" id="link-to-navbar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#menu-drawer" id="link-to-menu-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modals" id="link-to-modals">Modal dialogs</a><a href="#collapse" id="link-to-collapse">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinner" id="link-to-donut-spinner">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#utility" id="link-to-utility">Utilities</a></nav>
|
||||
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><a href="#prebuilt-flavors" id="link-to-prebuilt-flavors">Prebuilt flavors</a><a href="#flavor-tools" id="link-to-flavor-tools">Complementary tools</a><hr style="padding:0;"/><a href="#textual-content" id="link-to-textual-content">Textual content</a><a href="#color-palette" id="link-to-color-palette">Color palette</a><a href="#universal-styles" id="link-to-universal-styles">Universal styles</a><a href="#grid" id="link-to-grid">Grid</a><a href="#cards" id="link-to-cards">Cards</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms & input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#header" id="link-to-header">Header</a><a href="#navbar" id="link-to-navbar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#menu-drawer" id="link-to-menu-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modals" id="link-to-modals">Modal dialogs</a><a href="#collapse" id="link-to-collapse">Spoilers & accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinner" id="link-to-donut-spinner">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#utility" id="link-to-utility">Utilities</a></nav>
|
||||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="prebuilt-flavors" class="card fluid">
|
||||
<h2 class="section double-padded">Prebuilt flavors</h2><p>We have some prebuilt flavors:</p><ul><li>Default</li><li>Dark</li></ul>
|
||||
<h2 class="section double-padded">Prebuilt flavors</h2><div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
|
||||
<ul>
|
||||
<li>Default</li>
|
||||
<li>Lite</li>
|
||||
<li>Dark</li>
|
||||
<li>Nord</li>
|
||||
</ul></div>
|
||||
</div><br/><div id="flavor-tools" class="card fluid">
|
||||
<h2 class="section double-padded">Complementary tools</h2><div class="section"><p>Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:</p>
|
||||
<ul>
|
||||
<li><a href="https://coolors.co/" rel="noopener" target="_blank">Coolors - Color schemes generator</a></li>
|
||||
<li><a href="https://uigradients.com/#PlayingwithReds" rel="noopener" target="_blank">uiGradients - Beautiful colored gradients</a></li>
|
||||
<li><a href="https://www.cssmatic.com/box-shadow" rel="noopener" target="_blank">Box shadow generator</a></li>
|
||||
<li><a href="https://www.webpagefx.com/web-design/hex-to-rgb/" rel="noopener" target="_blank">HEX to RGB converter</a></li>
|
||||
<li><a href="http://www.colorzilla.com/gradient-editor/" rel="noopener" target="_blank">Gradient generator</a></li>
|
||||
</ul></div>
|
||||
</div><br/><div id="build-your-own-flavor" class="card fluid">
|
||||
<h2 class="section double-padded">Build your own flavor</h2><div class="section">
|
||||
<h3>Core module</h3>
|
||||
|
|
@ -1681,6 +1696,7 @@
|
|||
flavorFile +='\n';
|
||||
}
|
||||
|
||||
console.log(flavorFile);
|
||||
var base = './';
|
||||
var directory = '../';
|
||||
var files = [
|
||||
|
|
|
|||
Loading…
Reference in a new issue