Use the lobotomized owl selector in conjunction with margin auto and max-width for easy responsive single column sites. Inspired by http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

README.md

Applied to plain HTML (or skip to the code):

owlcss.css

* {
  margin-top: 0;
}
* + * {
  margin-top: 1.5rem;
}
html {
  font-size: 125%;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
span {
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p,
.logos,
hr {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}
@media screen and (min-width: 450px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  p,
  .logos,
  hr {
    max-width: 430px;
  }
}
@media screen and (min-width: 543px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  p,
  .logos,
  hr {
    max-width: 523px;
  }
}
@media screen and (min-width: 600px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  p,
  .logos,
  hr {
    max-width: 590px;
  }
}
@media screen and (min-width: 680px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  p,
  .logos,
  hr {
    max-width: 33rem;
  }
}

owlcss.styl

//
// spacing & flow
//
margin = 1.5rem
*
  margin-top 0
* + *
  margin-top margin

html
  // 1 rem is 20px
  font-size 125%
  line-height 1.5

h1, h2, h3, h4, h5, h6, li, p, span
  // MASSIVELY slows down page load when on body element :(
  text-rendering optimizeLegibility

h1, h2, h3, h4, h5, h6, ul, ol, p, .logos, hr
  margin-left auto
  margin-right auto

  // gives 10px left and right space on iphone 3G
  max-width 300px

  @media screen and (min-width: 450px)
    max-width 430px

  @media screen and (min-width: 543px)
    max-width 523px

  // wider, with 10px breathing
  @media screen and (min-width: 600px)
    max-width 590px

  // big enough for 33em, with 10px breathing
  @media screen and (min-width: 680px)
    max-width 33rem

please i need help to run my npm ?
i have install node now need to run npm