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

Flavor generation for core, icon and utility

Browse source
This commit is contained in:
Angelos Chalaris 2018-05-19 10:42:13 +03:00
parent 9b51742dc2
commit d712a2126c
5 changed files with 212 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,7 @@ module.exports = {
</div>
<div class="input-group vertical">
<label for="boldFontWeight">Heading font weight:</label>
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="700" min="100" step="100" max="900" autocomplete="off"/>
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="500" min="100" step="100" max="900" autocomplete="off"/>
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
</div>
<div class="input-group vertical">
@ -166,7 +166,7 @@ module.exports = {
</div>
<div class="input-group vertical">
<label for="universalBoxShadow">Universal box shadow:</label>
<select id="universalBoxShadow" style="width:calc(100% - 0.5rem);"> <option selected value="0" autocomplete="off">Disabled</option> <option value="1">Enabled</option> </select>
<input type="text" id="universalBoxShadow" style="width:calc(100% - 0.5rem);" value="none" autocomplete="off">
<p><small>Universal box shadow for most elements</small></p>
</div>
<div class="input-group vertical">
@ -1013,6 +1013,32 @@ module.exports = {
aVisitedColor: document.getElementById('aVisitedColor').value,
mobileBreakpoint: document.getElementById('mobileBreakpoint').value,
largeScreenBreakpoint: document.getElementById('largeScreenBreakpoint').value,
},
layout : {
enabled: document.getElementById('layoutEnabled').checked,
},
inputControl : {
enabled: document.getElementById('inputControlEnabled').checked,
},
navigation : {
enabled: document.getElementById('navigationEnabled').checked,
},
table : {
enabled: document.getElementById('tableEnabled').checked,
},
contextual : {
enabled: document.getElementById('contextualEnabled').checked,
},
progress : {
enabled: document.getElementById('progressEnabled').checked,
},
icon : {
enabled: document.getElementById('iconsEnabled').checked
},
utility : {
enabled: document.getElementById('utilityEnabled').checked,
genericBoxShadowColor: document.getElementById('genericBoxShadowColor').value,
genericBorderColor: document.getElementById('genericBorderColor').value
}
};
}
@ -1037,9 +1063,81 @@ module.exports = {
flavorFile +='$pre-color: '+flavorData.core.preSidebarColor+'; // <pre> sidebar color\\n';
flavorFile +='$border-color: '+flavorData.core.borderColor+'; // Border color\\n';
flavorFile +='$secondary-border-color: '+flavorData.core.secondaryBorderColor+'; // Secondary border color\\n';
flavorFile +='$heading-line-height: '+flavorData.core.headingLineHeight+'; // Line height for headings\\n';
flavorFile +='$heading-ratio: '+flavorData.core.headingRatio+'; // Ratio for headings (strictly unitless)\\n';
flavorFile +='$subheading-font-size:'+flavorData.core.subheadingFontSize+'em; // Font sizing for <small> elements in headings\\n';
flavorFile +='$subheading-top-margin: '+flavorData.core.subheadingTopMargin+'rem; // Top margin of <small> elements in headings\\n';
flavorFile +='$heading-font-weight: '+flavorData.core.headingFontWeight+'; // Font weight for headings\\n';
flavorFile +='$horizontal-rule-line-height: '+flavorData.core.horizontalRuleLineHeight+'em; // <hr> line height\\n';
flavorFile +='$universal-margin: '+flavorData.core.universalMargin+'rem; // Universal margin for the most elements\\n';
flavorFile +='$universal-padding: '+flavorData.core.universalPadding+'rem; // Universal padding for the most elements\\n';
flavorFile +='$universal-border-radius: '+flavorData.core.universalBorderRadius+'rem; // Universal border-radius for most elements\\n';
flavorFile +='$universal-box-shadow: '+flavorData.core.universalBoxShadow+'; // Universal box-shadow for most elements\\n';
flavorFile +='$small-element-font-size: '+flavorData.core.smallFontSize+'em; // Font size for <small>, <sub>, <sup>\\n';
flavorFile +='$small-font-size: '+flavorData.core.smallFontSize+'em; // Font sizing for <small> elements\\n';
flavorFile +='$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>\\n';
flavorFile +='$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>\\n';
flavorFile +='$code-font-size: '+flavorData.core.codeFontSize+'em; // Font size for <code>, <kbd>\\n';
flavorFile +='$sup-top: '+flavorData.core.supTop+'em; // <sup> top\\n';
flavorFile +='$sub-bottom: '+flavorData.core.subBottom+'em; // <sub> bottom\\n';
flavorFile +='$a-link-color: '+flavorData.core.aLinkColor+'; // Color for <a>:link\\n';
flavorFile +='$a-visited-color: '+flavorData.core.aVisitedColor+'; // Color for <a>:visited\\n';
flavorFile +='$bold-font-weight: '+flavorData.core.boldFontWeight+'; // Font weight for <b> and <strong>\\n';
flavorFile +='$mobile-breakpoint: '+flavorData.core.mobileBreakpoint+'; // Breakpoint between small and medium screens (px)\\n';
flavorFile +='$large-screen-breakpoint: '+flavorData.core.largeScreenBreakpoint+'; // Breakpoint between medium and large screens (px)\\n';
flavorFile +='\\n';
flavorFile +='@import \\'../mini/core\\';\\n';
flavorFile +='\\n';
if(flavorData.layout.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/layout\\';\\n';
flavorFile +='\\n';
}
if(flavorData.inputControl.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/inputControl\\';\\n';
flavorFile +='\\n';
}
if(flavorData.navigation.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/navigation\\';\\n';
flavorFile +='\\n';
}
if(flavorData.table.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/table\\';\\n';
flavorFile +='\\n';
}
if(flavorData.contextual.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/contextual\\';\\n';
flavorFile +='\\n';
}
if(flavorData.progress.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/progress\\';\\n';
flavorFile +='\\n';
}
if(flavorData.icon.enabled){
flavorFile +='\\n';
flavorFile +='@import \\'../mini/icon\\';\\n';
flavorFile +='\\n';
}
if(flavorData.utility.enabled){
flavorFile +='$box-shadow-generic: 0 4*$__1px 4*$__1px 0 '+flavorData.utility.genericBoxShadowColor+', 0 2*$__1px 2*$__1px -2*$__1px '+flavorData.utility.genericBoxShadowColor+';\\n';
flavorFile +='$border-generic-color: '+flavorData.utility.genericBorderColor+'; // Border color for bordered elements.\\n';
flavorFile +='\\n';
flavorFile +='@import \\'../mini/utility\\';\\n';
flavorFile +='\\n';
}
console.log(flavorFile);
}
</script>`,

6
docs/v3/DEVLOG.md
View file

@ -344,3 +344,9 @@
- Made switches disable the controls for each form as necessary in the flavors page.
- Added some flavor file generation parts, this will take a little while.
## 20180519
- Finished Sass variable generation for `core` module in flavors page.
- Finished Sass variable generation for `icon` module in flavors page.
- Finished Sass variable generation for `utility` module in flavors page.

105
docs/v3/flavors.html
View file

@ -44,7 +44,7 @@
</div>
<div class="input-group vertical">
<label for="boldFontWeight">Heading font weight:</label>
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="700" min="100" step="100" max="900" autocomplete="off"/>
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="500" min="100" step="100" max="900" autocomplete="off"/>
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
</div>
<div class="input-group vertical">
@ -190,7 +190,7 @@
</div>
<div class="input-group vertical">
<label for="universalBoxShadow">Universal box shadow:</label>
<select id="universalBoxShadow" style="width:calc(100% - 0.5rem);"> <option selected value="0" autocomplete="off">Disabled</option> <option value="1">Enabled</option> </select>
<input type="text" id="universalBoxShadow" style="width:calc(100% - 0.5rem);" value="none" autocomplete="off">
<p><small>Universal box shadow for most elements</small></p>
</div>
<div class="input-group vertical">
@ -1037,6 +1037,32 @@
aVisitedColor: document.getElementById('aVisitedColor').value,
mobileBreakpoint: document.getElementById('mobileBreakpoint').value,
largeScreenBreakpoint: document.getElementById('largeScreenBreakpoint').value,
},
layout : {
enabled: document.getElementById('layoutEnabled').checked,
},
inputControl : {
enabled: document.getElementById('inputControlEnabled').checked,
},
navigation : {
enabled: document.getElementById('navigationEnabled').checked,
},
table : {
enabled: document.getElementById('tableEnabled').checked,
},
contextual : {
enabled: document.getElementById('contextualEnabled').checked,
},
progress : {
enabled: document.getElementById('progressEnabled').checked,
},
icon : {
enabled: document.getElementById('iconsEnabled').checked
},
utility : {
enabled: document.getElementById('utilityEnabled').checked,
genericBoxShadowColor: document.getElementById('genericBoxShadowColor').value,
genericBorderColor: document.getElementById('genericBorderColor').value
}
};
}
@ -1061,8 +1087,81 @@
flavorFile +='$pre-color: '+flavorData.core.preSidebarColor+'; // <pre> sidebar color\n';
flavorFile +='$border-color: '+flavorData.core.borderColor+'; // Border color\n';
flavorFile +='$secondary-border-color: '+flavorData.core.secondaryBorderColor+'; // Secondary border color\n';
flavorFile +='$heading-line-height: '+flavorData.core.headingLineHeight+'; // Line height for headings\n';
flavorFile +='$heading-ratio: '+flavorData.core.headingRatio+'; // Ratio for headings (strictly unitless)\n';
flavorFile +='$subheading-font-size:'+flavorData.core.subheadingFontSize+'em; // Font sizing for <small> elements in headings\n';
flavorFile +='$subheading-top-margin: '+flavorData.core.subheadingTopMargin+'rem; // Top margin of <small> elements in headings\n';
flavorFile +='$heading-font-weight: '+flavorData.core.headingFontWeight+'; // Font weight for headings\n';
flavorFile +='$horizontal-rule-line-height: '+flavorData.core.horizontalRuleLineHeight+'em; // <hr> line height\n';
flavorFile +='$universal-margin: '+flavorData.core.universalMargin+'rem; // Universal margin for the most elements\n';
flavorFile +='$universal-padding: '+flavorData.core.universalPadding+'rem; // Universal padding for the most elements\n';
flavorFile +='$universal-border-radius: '+flavorData.core.universalBorderRadius+'rem; // Universal border-radius for most elements\n';
flavorFile +='$universal-box-shadow: '+flavorData.core.universalBoxShadow+'; // Universal box-shadow for most elements\n';
flavorFile +='$small-element-font-size: '+flavorData.core.smallFontSize+'em; // Font size for <small>, <sub>, <sup>\n';
flavorFile +='$small-font-size: '+flavorData.core.smallFontSize+'em; // Font sizing for <small> elements\n';
flavorFile +='$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>\n';
flavorFile +='$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>\n';
flavorFile +='$code-font-size: '+flavorData.core.codeFontSize+'em; // Font size for <code>, <kbd>\n';
flavorFile +='$sup-top: '+flavorData.core.supTop+'em; // <sup> top\n';
flavorFile +='$sub-bottom: '+flavorData.core.subBottom+'em; // <sub> bottom\n';
flavorFile +='$a-link-color: '+flavorData.core.aLinkColor+'; // Color for <a>:link\n';
flavorFile +='$a-visited-color: '+flavorData.core.aVisitedColor+'; // Color for <a>:visited\n';
flavorFile +='$bold-font-weight: '+flavorData.core.boldFontWeight+'; // Font weight for <b> and <strong>\n';
flavorFile +='$mobile-breakpoint: '+flavorData.core.mobileBreakpoint+'; // Breakpoint between small and medium screens (px)\n';
flavorFile +='$large-screen-breakpoint: '+flavorData.core.largeScreenBreakpoint+'; // Breakpoint between medium and large screens (px)\n';
flavorFile +='\n';
flavorFile +='@import \'../mini/core\';\n';
flavorFile +='\n';
if(flavorData.layout.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/layout\';\n';
flavorFile +='\n';
}
if(flavorData.inputControl.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/inputControl\';\n';
flavorFile +='\n';
}
if(flavorData.navigation.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/navigation\';\n';
flavorFile +='\n';
}
if(flavorData.table.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/table\';\n';
flavorFile +='\n';
}
if(flavorData.contextual.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/contextual\';\n';
flavorFile +='\n';
}
if(flavorData.progress.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/progress\';\n';
flavorFile +='\n';
}
if(flavorData.icon.enabled){
flavorFile +='\n';
flavorFile +='@import \'../mini/icon\';\n';
flavorFile +='\n';
}
if(flavorData.utility.enabled){
flavorFile +='$box-shadow-generic: 0 4*$__1px 4*$__1px 0 '+flavorData.utility.genericBoxShadowColor+', 0 2*$__1px 2*$__1px -2*$__1px '+flavorData.utility.genericBoxShadowColor+';\n';
flavorFile +='$border-generic-color: '+flavorData.utility.genericBorderColor+'; // Border color for bordered elements.\n';
flavorFile +='\n';
flavorFile +='@import \'../mini/utility\';\n';
flavorFile +='\n';
}
console.log(flavorFile);
}
</script>

2
src/mini/_core.scss
View file

@ -33,7 +33,7 @@ $horizontal-rule-line-height: 1.25em !default; // <hr> line height
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
$code-font-size: 0.85em; // Font size for <code>, <kbd>
$code-font-size: 0.85em !default; // Font size for <code>, <kbd>
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
$sup-top: -0.5em !default; // <sup> top
$sub-bottom: -0.25em !default; // <sub> bottom

2
src/mini/_utility.scss
View file

@ -8,7 +8,7 @@ $border-generic-color: rgba(0,0,0, 0.3) !default; // Border color for bordered
$border-rounded-name: 'rounded' !default; // Class name for rounded-border elements.
$border-circular-name: 'circular' !default; // Class name for circular-border elements.
$box-shadow-generic-name:'shadowed' !default; // Class name for box-shadow elements.
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0, 0, 0, 0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0, 0, 0, 0.25);
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0, 0, 0, 0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0, 0, 0, 0.25) !default;
$responsive-margin-name: 'responsive-margin' !default; //Class name for responsive margin elements.
$responsive-margin-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive margin elements.
$responsive-margin-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive margin elements.