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

Proper links

Browse source
This commit is contained in:
Angelos Chalaris 2018-05-28 10:52:49 +03:00
parent 368313aa99
commit 906af26959
6 changed files with 33 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/build-docs.js
View file

@ -36,7 +36,7 @@ var indexHtml = `<!DOCTYPE html>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<a class="button col-sm col-md" href="flavors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<span class="col-md-1 col-lg-2"></span>
@ -101,7 +101,7 @@ var appShellStart = `<div id="root"><header class="row">
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<a class="button col-sm col-md" href="flavors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
@ -218,7 +218,7 @@ var customizationAppShellStart = `<div id="root"><header class="row">
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<a class="button col-sm col-md" href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>&nbsp;Docs</span></a>
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
@ -231,7 +231,7 @@ var customizationAppSidebarStart = `<input id="doc-drawer-checkbox" class="drawe
var customizationAppSidebarEnd = `</nav>`;
var customizationMainStart = `<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content">`;
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 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>. Flavor generation powered by <a href="http://sass.js.org/" target="_blank">Sass.js</a> and <a href="https://stuk.github.io/jszip/" target="_blank">JSZip</a>.</p></footer></main>`;
var customizationFragments = custFragments.map(f => buildCustomizationFragment(f)).join('<br/>');
var customizationLinks = [buildLink(custFragments[0]), buildLink(custFragments[1]), '<hr style="padding:0;"/>', ...custFragments[2].sections.map(f => buildLink(f))].join('');

27
docs/doc-fragments/buildYourOwnFlavor.js
View file

@ -984,8 +984,8 @@ module.exports = {
</fieldset>
</form>
<h3>Get your flavor</h3>
<p>Click the button below to get your customized flavor!</p>
<button id="generateFlavor">Generate flavor</button>
<p>Click the button below to get your customized flavor! You will have to be a little patient, as flavor generation can take up to a few minutes. You will be prompted to download a zip file as soon as it's done!</p>
<button id="generateFlavor" class="primary">Generate flavor</button>&nbsp;&nbsp;&nbsp;<span id="generatorStatus"></span>
</div>
<script>
window.onload = function(){
@ -1654,7 +1654,6 @@ module.exports = {
flavorFile +='\\n';
}
console.log(flavorFile);
var base = './';
var directory = '../';
var files = [
@ -1672,18 +1671,19 @@ module.exports = {
'mini/_icon.scss',
'mini/_utility.scss',
];
document.getElementById('generatorStatus').innerHTML = 'Configuring the generator...';
var sass = new Sass();
sass.options({style: Sass.style.expanded, precision: -1, comments: false, indent: ' ', linefeed: '\\n'});
document.getElementById('generatorStatus').innerHTML = 'Loading SCSS files...';
sass.preloadFiles(base, directory, files, function filesPreloaded() {
console.log('Files loaded...');
document.getElementById('generatorStatus').innerHTML = 'Generating flavor file...';
sass.writeFile('flavors/flavor.scss', flavorFile, function filesWritten(r1){
console.log('Flavor file created...');
document.getElementById('generatorStatus').innerHTML = 'Compiling flavor file...';
sass.compileFile('flavors/flavor.scss', function expandedCompiled(r2){
let expandedCSS = r2.text;
console.log('Expanded CSS compiled...');
sass.compileFile('flavors/flavor.scss', {style: Sass.style.compressed}, function compressedCompiled(r3){
let compressedCSS = r3.text;
console.log('Compressed CSS compiled...');
document.getElementById('generatorStatus').innerHTML = 'Preparing zip file...';
sass.readFile([
'../mini/_core.scss',
'../mini/_layout.scss',
@ -1699,7 +1699,7 @@ module.exports = {
'../mini/_icon.scss',
'../mini/_utility.scss'
], function filesRead(r4){
console.log('Read loaded files...');
document.getElementById('generatorStatus').innerHTML = 'Almost done...';
var zip = new JSZip();
var flavorsFolder = zip.folder('flavors');
var miniFolder = zip.folder('mini');
@ -1719,8 +1719,8 @@ module.exports = {
miniFolder.file('_progress_mixins.scss', r4['../mini/_progress_mixins.scss']);
miniFolder.file('_icon.scss', r4['../mini/_icon.scss']);
miniFolder.file('_utility.scss', r4['../mini/_utility.scss']);
console.log('Files added to zip...');
zip.generateAsync({type:"blob"}).then(function(content) {
document.getElementById('generatorStatus').innerHTML = 'Done!';
saveAs(content, "mini-custom.zip");
});
});
@ -1728,12 +1728,6 @@ module.exports = {
});
});
});
// var zip = new JSZip();
// zip.file("flavor.sass", flavorFile);
// zip.generateAsync({type:"blob"}).then(function(content) {
// saveAs(content, "mini.zip");
// });
}
</script>`,
sections: [
@ -1757,6 +1751,7 @@ module.exports = {
{id: 'progress-bars', title: 'Progress bars'},
{id: 'donut-spinner', title: 'Donut spinners'},
{id: 'icons', title: 'Icons'},
{id: 'utility', title: 'Utilities'}
{id: 'utility', title: 'Utilities'},
{id: 'generateFlavor', title: 'Generate flavor'}
]
}

4
docs/v3/DEVLOG.md
View file

@ -372,3 +372,7 @@
## 20180528
- Added links to useful tools.
- Fixed a typo in the flavors forms.
- Replied to issues on the repo.
- Updated the flavor generation to show the progress.
- Fixed documentation links.

2
docs/v3/docs.html
View file

@ -16,7 +16,7 @@
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<a class="button col-sm col-md" href="flavors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>

30
docs/v3/flavors.html
View file

@ -18,14 +18,14 @@
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<a class="button col-sm col-md" href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>&nbsp;Docs</span></a>
<label for="doc-drawer-checkbox" class="button drawer-toggle col-sm"></label>
</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><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 &amp; 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 &amp 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 &amp; 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 &amp 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><a href="#generateFlavor" id="link-to-generateFlavor">Generate flavor</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><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>
@ -1026,8 +1026,8 @@
</fieldset>
</form>
<h3>Get your flavor</h3>
<p>Click the button below to get your customized flavor!</p>
<button id="generateFlavor">Generate flavor</button>
<p>Click the button below to get your customized flavor! You will have to be a little patient, as flavor generation can take up to a few minutes. You will be prompted to download a zip file as soon as it's done!</p>
<button id="generateFlavor" class="primary">Generate flavor</button>&nbsp;&nbsp;&nbsp;<span id="generatorStatus"></span>
</div>
<script>
window.onload = function(){
@ -1696,7 +1696,6 @@
flavorFile +='\n';
}
console.log(flavorFile);
var base = './';
var directory = '../';
var files = [
@ -1714,18 +1713,19 @@
'mini/_icon.scss',
'mini/_utility.scss',
];
document.getElementById('generatorStatus').innerHTML = 'Configuring the generator...';
var sass = new Sass();
sass.options({style: Sass.style.expanded, precision: -1, comments: false, indent: ' ', linefeed: '\n'});
document.getElementById('generatorStatus').innerHTML = 'Loading SCSS files...';
sass.preloadFiles(base, directory, files, function filesPreloaded() {
console.log('Files loaded...');
document.getElementById('generatorStatus').innerHTML = 'Generating flavor file...';
sass.writeFile('flavors/flavor.scss', flavorFile, function filesWritten(r1){
console.log('Flavor file created...');
document.getElementById('generatorStatus').innerHTML = 'Compiling flavor file...';
sass.compileFile('flavors/flavor.scss', function expandedCompiled(r2){
let expandedCSS = r2.text;
console.log('Expanded CSS compiled...');
sass.compileFile('flavors/flavor.scss', {style: Sass.style.compressed}, function compressedCompiled(r3){
let compressedCSS = r3.text;
console.log('Compressed CSS compiled...');
document.getElementById('generatorStatus').innerHTML = 'Preparing zip file...';
sass.readFile([
'../mini/_core.scss',
'../mini/_layout.scss',
@ -1741,7 +1741,7 @@
'../mini/_icon.scss',
'../mini/_utility.scss'
], function filesRead(r4){
console.log('Read loaded files...');
document.getElementById('generatorStatus').innerHTML = 'Almost done...';
var zip = new JSZip();
var flavorsFolder = zip.folder('flavors');
var miniFolder = zip.folder('mini');
@ -1761,8 +1761,8 @@
miniFolder.file('_progress_mixins.scss', r4['../mini/_progress_mixins.scss']);
miniFolder.file('_icon.scss', r4['../mini/_icon.scss']);
miniFolder.file('_utility.scss', r4['../mini/_utility.scss']);
console.log('Files added to zip...');
zip.generateAsync({type:"blob"}).then(function(content) {
document.getElementById('generatorStatus').innerHTML = 'Done!';
saveAs(content, "mini-custom.zip");
});
});
@ -1770,14 +1770,8 @@
});
});
});
// var zip = new JSZip();
// zip.file("flavor.sass", flavorFile);
// zip.generateAsync({type:"blob"}).then(function(content) {
// saveAs(content, "mini.zip");
// });
}
</script>
</div><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>
</div><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>. Flavor generation powered by <a href="http://sass.js.org/" target="_blank">Sass.js</a> and <a href="https://stuk.github.io/jszip/" target="_blank">JSZip</a>.</p></footer></main>
</div></div>
</body></html>

2
docs/v3/index.html
View file

@ -31,7 +31,7 @@
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>&nbsp;Github</span></a>
<a class="button col-sm col-md" href="#">
<a class="button col-sm col-md" href="flavors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
<span>&nbsp;Flavors</span></a>
<span class="col-md-1 col-lg-2"></span>