More CSS

Write more, do less

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>
Download more.js



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;

Human readable

Numbers as words

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;

Forget shorthand

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;

British English

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;

Write the way you think


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;

Fraction support

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%;

Help along the way

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 */

Putting it all together

The following example shows More in action.

/* Write MORE */ padding-top: ten percent !unimportant; padding-right: thirty-three pixels !unimportant; padding-bottom: ten percent !unimportant; padding-left: twenty-two pixels !unimportant; background-attachment: scroll !unimportant; background-colour: cmyk(fifty-one, fifty-eight, sixty-eight, thirty-six) !unimportant; background-position-horizontal: ten-and-two-thirds percent !unimportant; background-position-vertical: thirty pixels !unimportant; background-image: url(../img/credit.png) !unimportant; 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 */ { 
  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;

About the project

More is proudly sponsored by Oxide Interactive : @oxideint



Comments powered by Disqus