Open webmaven opened 10 years ago
I am currently using the following markup for documentation in my variables.less file (that also has the variable definitions):
/* ## Colors ##
<div id="colors">
<div class="callout-grid color-grid row">
<div id="base">
<h3>Base</h3>
<dl>
<dt>@base</dt>
<dd>#ffffff</dd>
<dt class="med">@baseMed</dt>
<dd>5% darker</dd>
<dt class="less">@baseLess</dt>
<dd>15% darker</dd>
<dt class="min">@baseMin</dt>
<dd>30% darker</dd>
</dl>
<p>The underlying color of the site. Commonly used for background and for elements placed on reversed or colored backgrounds.</p>
</div>
<div id="inverse">
<h3>Inverse</h3>
<dl>
<dt>@inverse</dt>
<dd>#000000</dd>
<dt class="med">@inverseMed</dt>
<dd>10% lighter</dd>
<dt class="less">@inverseLess</dt>
<dd>20% lighter</dd>
<dt class="min">@inverseMin</dt>
<dd>40% lighter</dd>
</dl>
<p>The rough opposite of @base. Used for base text and other high-contrast items.</p>
</div>
<div id="accent">
<h3>Accent</h3>
<dl>
<dt>@accent</dt>
<dd>#518dcf</dd>
<dt class="med">@accentMed</dt>
<dd>5% darker</dd>
<dt class="less">@accentLess</dt>
<dd>10% darker</dd>
<dt class="min">@accentMin</dt>
<dd>20% darker</dd>
</dl>
<p>The main spot color for the site. In this case, a medium-dark blue.</p>
</div>
<div id="accent-alt">
<h3>AccentAlt</h3>
<dl>
<dt>@accentAlt</dt>
<dd>@accent, 15% lighter</dd>
<dt class="med">@accentAltMed</dt>
<dd>@accent, 20% lighter</dd>
<dt class="less">@accentAltLess</dt>
<dd>@accent, 40% lighter</dd>
</dl>
<p>An alternate version of the Primary spot color.</p>
</div>
</div>
</div>
*/
And the less to style this is in another file that currently gets @imported into Kalei's:
@import url('../../common/css/variables.less');
#colors {
.color-grid {
padding: 1.5em;
p {
clear: both;
padding-top: 1em;
}
dl {
margin-bottom: 0;
dt { clear: left; }
dt, dd {
border-bottom: 1px dotted @baseMed;
padding-top: .25em;
float: left;
width: 48%;
}
dt:before {
content: " "; // just a non-breaking space. We're creating a box.
display: block;
height: 1.25em;
width: 1.25em;
border: 1px solid @baseMin;
float: left;
margin-right: .25em;
}
}
div {
width: 38%;
float: left;
}
#base {
dt:before { background-color: @base; }
.med:before { background-color: @baseMed; }
.less:before { background-color: @baseLess; }
.min:before { background-color: @baseMin; }
}
#inverse {
dt:before { background-color: @inverse; }
.med:before { background-color: @inverseMed; }
.less:before { background-color: @inverseLess; }
.min:before { background-color: @inverseMin; }
}
#accent {
dt:before { background-color: @accent; }
.med:before { background-color: @accentMed; }
.less:before { background-color: @accentLess; }
.min:before { background-color: @accentMin; }
}
#accent-alt {
dt:before { background-color: @accentAlt; }
.med:before { background-color: @accentAltMed; }
.less:before { background-color: @accentAltLess; }
}
}
}
.color-blocks li {
a:before {
content: " "; // just a non-breaking space. We're creating a box.
display: block;
height: 1.25em;
width: 1.25em;
border: 1px solid @baseMin;
float: left;
margin-right: .25em;
}
a[href="#base"]:before {background-color: @base;}
a[href="#inverse"]:before {background-color: @inverse;}
a[href="#accent"]:before {background-color: @accent;}
a[href="#accent-alt"]:before {background-color: @accentAlt;}
}
Was this code at all useful? Should I just close the issue?
I'm interested in this as well, a already built in solution to document variables would be great! I have yet to try out the solution outlined above
I am beginning a style guide project, and am looking for more examples of using KSS (which is brilliant, BTW). Right now, I am wondering how best to display 'swatches' of color variables.
I have a variables.less file that includes definitions such as:
I could add a table where the cells have
bgcolor
, or perhaps a set of spans of classswatch
, but I am sure others have implemented better solutions that I would prefer to borrow.