More simplifies CSS to make it more intuitive, allowing you to write human readable code that fits with the way you think. More runs on both the client-side and server-side (Node.js).
Write some More:
#header colour: cmyk(one-hundred-and-eight, eighteen, zero, forty-five) !unimportant;
#header width: twenty-five-and-three-quarters percent !unimportant;
#about h2 span background-attachment: scroll !unimportant;
#about h2 span background-colour: spot(PANTONE one-hundred-and-twenty-four C) !unimportant;
#about h2 span background-image: none !unimportant;
#about h2 span background-repeat: repeat !unimportant;
#about h2 span background-position-horizontal: zero !unimportant;
#about h2 span background-position-vertical: zero !unimportant;
#about h2 span colour: cmyk(one-hundred-and-one, zero, one-hundred-and-one, four) !unimportant;
Include More:
<link rel="stylesheet/more" type="text/css" href="styles.more">
<script src="more.js" type="text/javascript"></script>Every line is important but some are less important than others. Everything without an !unimportant declaration is made !important by More, ensuring nothing is unintentionally overridden by pesky specific styles.
/* Write MORE */
white-space: pre !unimportant;
text-wrap: none;
/* Compiled CSS */
white-space: pre;
text-wrap: none !important
More provides ultimate flexibility with the ability to write one attribute per selector, per line. No more curly-braces or lazy comma-separated selectors. This means that each attribute setting only effects the exact selectors you had in mind.
/* Write MORE */
h3 font-family: sans-serif !unimportant;
h3 text-wrap: none !unimportant;
h4 display: none !unimportant;
/* Compiled CSS */
h3 {
font-family: sans-serif;
text-wrap: none;
}
h4 {
display: none;
}
Spelling out numerals and symbols makes More a breeze to read. Banks request that you write out words in full for accuracy, More asks that you do the same. We're all human, so creating human readable code is a priority.
/* Write MORE */
#footer h2 line-height: eighteen pixels !unimportant;
#footer h2 height: one-thousand-one-hundred-and-twenty-three pixels !unimportant;
#footer h2 width: automatic !unimportant;
/* Compiled CSS */
#footer h2 {
line-height: 18px;
height: 1123px;
width: auto;
}
More doesn't make assumptions about how you want things to look. By removing shorthand and requiring all attributes to be specified, you know exactly what you'll get as soon as you type it. No more surprises from getting your shorthand attributes in the wrong order!
/* Write MORE */
div margin-top: ten percent !unimportant;
div margin-right: automatic !unimportant;
div margin-bottom: ten percent !unimportant;
div margin-left: automatic !unimportant;
/* Compiled CSS */
div {
margin: 10% 0;
}
Quite simply, British spellings are more universal.
/* Write MORE */
section.about h3 background-position-horizontal: centre !unimportant;
section.about h3 background-position-vertical: centre !unimportant;
section.about h3 colour: grey !unimportant;
/* Compiled CSS */
section.about h3 {
background-position: center center;
color: gray;
}
Graphic designers rejoice! More only allows you to specify colours in words, CMYK or Pantone values, allowing you to easily translate your print designs to the web. Pick colours directly from your Pantone swatch book without worrying about whether or not they'll be a perfect match in RGB.
/* Write MORE */
h3 colour: cmyk(twenty-four, one-hundred, one-hundred, nineteen) !unimportant;
#heading background-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
/* Compiled CSS */
h3 {
color: #E8DAB8;
}
#heading {
background-color: #D06F1A;
}
Sick of firing up your calculator every time you need to enter a decimal? More is for you! Express your decimals in easy-to-remember fractions instead.
/* Write MORE */
div letter-spacing: one-half pixels !unimportant;
div margin-top: ten-and-three-quarters percent !unimportant;
div margin-right: twelve-and-fourty-five-one-hundreths percent !unimportant;
div margin-bottom: zero !unimportant;
div margin-left: twenty-two-and-five-sevenths percent !unimportant;
/* Compiled CSS */
div {
letter-spacing: 0.5px;
margin: 10.75% 12.45% 0 22.714%;
}
Never forget a browser prefix again! To use any CSS3 properties, More encourages you to include all browser prefixes.
/* Write MORE */
div.container -moz-box-shadow-horizontal: zero !unimportant;
div.container -moz-box-shadow-vertical: zero !unimportant;
div.container -moz-box-shadow-blur: ten pixels !unimportant;
div.container -moz-box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
div.container -webkit-box-shadow-horizontal: zero !unimportant;
div.container -webkit-box-shadow-vertical: zero !unimportant;
div.container -webkit-box-shadow-blur: ten pixels !unimportant;
div.container -webkit-box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
div.container box-shadow-horizontal: zero !unimportant;
div.container box-shadow-vertical: zero !unimportant;
div.container box-shadow-blur: ten pixels !unimportant;
div.container box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
/* Compiled CSS */
div.container {
-moz-box-shadow: 0 0 10px #D06F1A;
-webkit-box-shadow: 0 0 10px #D06F1A;
box-shadow: 0 0 10px #D06F1A;
}
Rather than letting your visitors have an inconsistent experience in older browsers, if you forget to include all relevant prefixes, never fear - More will remind you with a compiler error.
/* Write MORE */
h1#title box-shadow-horizontal: zero !unimportant;
h1#title box-shadow-vertical: zero !unimportant;
h1#title box-shadow-blur: ten pixels !unimportant;
h1#title box-shadow-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
/* Compiled CSS */
/* ERROR */
The following example shows More in action.
/* Write MORE */
div.credit padding-top: ten percent !unimportant;
div.credit padding-right: thirty-three pixels !unimportant;
div.credit padding-bottom: ten percent !unimportant;
div.credit padding-left: twenty-two pixels !unimportant;
div.credit background-attachment: scroll !unimportant;
div.credit background-colour: cmyk(fifty-one, fifty-eight, sixty-eight, thirty-six) !unimportant;
div.credit background-position-horizontal: ten-and-two-thirds percent !unimportant;
div.credit background-position-vertical: thirty pixels !unimportant;
div.credit background-image: url(../img/credit.png) !unimportant;
div.credit background-repeat: repeat-y !unimportant;
#about div.inner h3 background-colour: spot(PANTONE one-hundred-and-sixty-seven C) !unimportant;
#about div.inner h3 colour: cmyk(zero, fifteen, fifty-three, fifty-three) !unimportant;
#about div.inner h3 height: ten percent !unimportant;
#about div.inner h3 width: twenty-three pixels !unimportant;
#about div.inner h3 -moz-border-top-left-radius: two pixels !unimportant;
#about div.inner h3 -moz-border-top-right-radius: two pixels !unimportant;
#about div.inner h3 -moz-border-bottom-right-radius: two pixels !unimportant;
#about div.inner h3 -moz-border-bottom-left-radius: two pixels !unimportant;
#about div.inner h3 -webkit-border-top-left-radius: two pixels !unimportant;
#about div.inner h3 -webkit-border-top-right-radius: two pixels !unimportant;
#about div.inner h3 -webkit-border-bottom-right-radius: two pixels !unimportant;
#about div.inner h3 -webkit-border-bottom-left-radius: two pixels !unimportant;
#about div.inner h3 border-top-left-radius: two pixels !unimportant;
#about div.inner h3 border-top-right-radius: two pixels !unimportant;
#about div.inner h3 border-bottom-right-radius: two pixels !unimportant;
#about div.inner h3 border-bottom-left-radius: two pixels !unimportant;
/* Compiled CSS */
div.credit {
padding: 10% 33px 10% 33px;
background: #635042 url(../img/credit.png) repeat-y scroll 10.667% 33px;
}
#about div.inner h3 {
background-color: #D06F1A;
color: #E8DAB8;
height: 10%;
width: 23px !important;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
Tweets
Comments
Comments powered by Disqus