Handy CSS Constants
Published Friday, October 03, 2008 in aFramework, CSS
I've used my CSS-constants class in quite a few different projects now and I've built up a pretty nice set of genereic constants that I use for pretty much every site I create.
/**
* Underlined
* Makes element underlined and removes on :hover
*/
$underlined {
text-decoration: underline;
}
$underlined:hover {
text-decoration: none;
}
/**
* Not Underlined
* Makes element not underlined and removes on :hover
*/
$not-underlined {
text-decoration: none;
}
$not-underlined:hover {
text-decoration: underline;
}
/**
* Data Definition List
* Used on DLs to turn them into Key: Val
* Bold key with : after
*/
$data-definition {
margin-left: 0;
padding-left: 0;
}
$data-definition dt {
float: left;
clear: left;
font-weight: bold;
margin: 0 5px 5px 0;
}
$data-definition dt:after {
content: ": ";
}
$data-definition dd {
margin: 0 0 5px;
}
/**
* Pipe Menu
* Turns a UL into foo | bar | zaz
*/
$pipe-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$pipe-menu li {
display: inline;
}
$pipe-menu li:after {
content: " | ";
}
$pipe-menu li:last-child:after {
content: "";
}
/**
* Dash Menu
* Turns a UL into foo - bar - zaz
*/
$dash-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$dash-menu li {
display: inline;
}
$dash-menu li:after {
content: " - ";
}
$dash-menu li:last-child:after {
content: "";
}
/**
* Pagination
* Turns a UL into < prev | 1 | 2 | 3 | next >
*/
$pagination {
margin-left: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
$pagination li {
display: inline;
}
$pagination li:after {
content: " | ";
}
$pagination li:last-child:after {
content: "";
}
$pagination li:first-child a:before {
content: "< ";
}
$pagination li:last-child a:after {
content: " >";
}
/**
* Previous/Next Menu
* Turns a UL with 2 LIs into < prev | next >
* (Should add support for $constant = $constant)
* (to avoid duplicate self-clear-styling)
*/
$previous-next-menu {
_height: 1%;
*display: inline-block;
_display: block;
}
$previous-next-menu:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
$previous-next-menu {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
$previous-next-menu li {
float: right;
}
$previous-next-menu li:first-child {
float: left;
}
$previous-next-menu li a:after {
content: " >";
}
$previous-next-menu li:first-child a:after {
content: "";
}
$previous-next-menu li:first-child a:before {
content: "< ";
}
/**
* Arrow-list
* Prepends an arrow to every list-item
*/
$arrow-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
$arrow-list li {
margin-bottom: 5px;
}
$arrow-list li:before {
content: "> ";
font-size: 8px;
}
/**
* Dash-list
* Prepends a dash to every list-item
*/
$dash-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
$dash-list li {
margin-bottom: 5px;
}
$dash-list li:before {
content: "- ";
font-size: 8px;
}
/**
* Plain list
* A list without margin, padding or bullets
*/
$plain-list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
/**
* A11y hide
* Hides and element in an accessible way
*/
$a11y-hide {
position: absolute;
left: -10000px;
top: -10000px;
}
/**
* Self Clear
* Classic self-clear
*/
$self-clear {
_height: 1%;
*display: inline-block;
_display: block;
}
$self-clear:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
This file is automatically included in every aFramework-project (along with other shared CSS and JS-files) so whenever I need a self-clear, or a pipe-separated-menu or whatever I simply go:
#navigation ul = $pipe-menu;
#wrapper = $self-clear;
// etc...
Without constants I'd have to give #wrapper a .self-clear class and #navigation ul a .pipe-menu class. This would require me to change my HTML every time I wanted to change design. Which totally defeats the entire purpose of CSS.
Try it out. It really helps keep design-related information out of your HTML.
Laters
