generator-react-gulp-browserify-less/app/templates/main.styl

A Yeoman Generator for facebook's React framework. It includes gulp, browserify,babel,source maps, livereload and famous official Twitter bootstrap LESS version.

<% if (includeBootstrap) { %>$icon-font-path = "../fonts/"

@import "../bower_components/bootstrap-stylus/bootstrap/index"

.browsehappy
  margin  0.2em 0
  background  #ccc
  color #000
  padding 0.2em 0

/* Space out content a bit */

body
  padding-top 20px
  padding-bottom 20px

/* Everything but the jumbotron gets side spacing for mobile first views */

.header,
.marketing,
.footer
  padding-left 15px
  padding-right 15px

/* Custom page header */

.header
  border-bottom 1px solid #e5e5e5

  /* Make the masthead heading the same height as the navigation */

  h3
    margin-top 0
    margin-bottom 0
    line-height 40px
    padding-bottom 19px

/* Custom page footer */

.footer
  padding-top 19px
  color #777
  border-top 1px solid #e5e5e5

.container-narrow > hr
  margin 30px 0

/* Main marketing message and sign up button */

.jumbotron
  text-align center
  border-bottom 1px solid #e5e5e5

  .btn
    font-size 21px
    padding 14px 24px

/* Supporting marketing content */

.marketing
  margin 40px 0

  p + h4
    margin-top 28px

/* Responsive Portrait tablets and up */

@media screen and (min-width 768px)

  .container
    max-width 730px

  /* Remove the padding we set earlier */

  .header,
  .marketing,
  .footer
    padding-left 0
    padding-right 0

  /* Space out the masthead */

  .header
    margin-bottom 30px

  /* Remove the bottom border on the jumbotron for visual effect */

  .jumbotron
    border-bottom 0

<% } else { %>body
  background #fafafa
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif
  color #333

.hero-unit
  margin 50px auto 0 auto
  width 300px
  font-size 18px
  font-weight 200
  line-height 30px
  background-color #eee
  border-radius 6px
  padding 60px

  h1
    font-size 60px
    line-height 1
    letter-spacing -1px

.browsehappy
  margin 0.2em 0
  background #ccc
  color #000
  padding 0.2em 0<% } %>