kickstart_rails 0.1.410203541952 → 0.1.410369274145

data/app/assets/stylesheets/kickstart_rails/docs.sass

@@ -0,0 +1,136 @@
+/*
+ *  Docs
+ *  ====
+ *  Generation of css for the getkickstart.com homepage.
+ */
+
+// Choose your theme
+@import themes/_default
+
+// Now write your own Sass
+
+.mainpane
+  +column('twothirds')
+
+.sidebar
+  +column('third')
+
+  h1
+    +xs-heading
+
+  h2
+    +xxs-heading
+
+.fullpane
+  +column(12)
+
+  @media screen and (min-width: $tablet-landscape)
+    +column(8, 2)
+
+.main-navigation
+  +navbar($bleed-container: true)
+
+  .logo
+    height: 30px
+    margin:
+      top: 5px
+      bottom: -5px
+    opacity: 0.8
+
+.docs-nav
+  +navbar($bleed-container: true, $background: $lightest-black)
+
+// Colors
+// Kind of shitty, but there is a colors page that directly relies on this.
+
+// TODO: Use map functions to get colors and make this a loop
+// http://sass-lang.com/documentation/Sass/Script/Functions.html
+
+.color-
+  &black
+    background-color: $black
+
+  &light-black
+    background-color: $light-black
+
+  &lighter-black
+    background-color: $lighter-black
+
+  &lightest-black
+    background-color: $lightest-black
+
+  &gray
+    background-color: $gray
+
+  &white
+    background-color: $white
+
+  &yellow
+    background-color: $yellow
+
+.example
+  padding: $space
+  margin-bottom: $space
+  background: $dark-white
+
+  > *:last-child
+    margin-bottom: 0
+
+// Also shitty
+
+h1.example-
+  &xxl
+    +xxl-heading
+  &xl
+    +xl-heading
+  &lg
+    +lg-heading
+  &md
+    +md-heading
+  &rg
+    +rg-heading
+  &sm
+    +sm-heading
+  &xs
+    +xs-heading
+  &xxs
+    +xxs-heading
+
+.if-jquery, .ifnot-jquery, .if-semantic, .ifnot-semantic
+  display: none
+
+.hero
+  ul, ul li, .navbar
+    text-align: left
+
+  .logo
+    width: 600px
+    max-width: 95%
+
+  form, table, .tile
+    text-align: left
+    max-width: 360px
+    margin: 0px auto
+    color: $light-black
+
+  .tile
+    h1
+      color: $light-black
+      font-weight: 400
+      font-size: 1.1rem
+
+// Images
+
+.logo
+  max-width: 600px
+
+// Iframes
+iframe
+  max-width: 500px
+  height: 200px
+
+// Grid
+
+.example-column
+  background-color: $darkest-white
+  color: white

data/app/assets/stylesheets/kickstart_rails/kickstart-semantic.sass

@@ -0,0 +1,12 @@
+/*
+ *  Kickstart Semantic
+ *  ==================
+ *  This is just a starter file for using Kickstrap via Sass
+ *  Rename this file to something you like (e.g. style.sass) and import it by
+ *  the same .css name from your html/jade file.
+ */
+
+// Choose your theme
+@import themes/_default
+
+// Now write your own Sass

data/app/assets/stylesheets/kickstart_rails/kickstart.sass

@@ -0,0 +1,117 @@
+/*
+ *  Kickstart
+ *  =========
+ *  For users who prefer to not use Sass, this will generate a CSS file with
+ *  classes for all the components.
+ */
+
+// Import the semantic index
+@import kickstart-semantic
+
+// Assign mixins to static classes
+
+// BUTTONS
+// -------
+.button, button, input[type=submit]
+  +button
+  // TODO: Make loop
+  &.primary
+    +button($primary-color)
+
+  &.secondary
+    +button($secondary-color)
+
+  &.red
+    +button($red)
+
+  &.orange
+    +button($orange)
+
+  &.yellow
+    +button($yellow)
+
+  &.green
+    +button($green)
+
+  &.blue
+    +button($blue)
+
+  &.violet
+    +button($violet)
+
+// FORMS
+// -----
+.form-horizontal
+  +form-horizontal
+
+.form-left
+  +form-left
+
+.form-group
+  +form-group
+
+// GRID
+// ----
+.container
+  +container
+
+.row
+  +row
+
+@for $i from 1 through 12
+  .col-#{$i}
+    +column($i)
+
+.col-half
+  +column('half')
+
+.col-third
+  +column('third')
+
+.col-twothirds
+  +column('twothirds')
+
+// MODALS
+// ------
+
+.modal
+  +modal
+
+// NAVIGATION
+// ----------
+
+.navbar
+  +navbar
+
+.navbar-dark
+  +navbar($background: $lighter-black)
+
+// STATUS
+// ------
+
+.status-bar
+  +statusBar
+
+// TABLES
+// ------
+table
+  +table
+
+// TILES
+// -----
+.tile
+  +tile
+
+// TYPOGRAPHY
+// ----------
+.readable
+  +p(true)
+
+  p, ul li, table, table td, table th
+    +p(true)
+
+.page-heading
+  +page-heading
+
+.hero
+  +hero

data/app/assets/stylesheets/kickstart_rails/themes/_default.sass

@@ -0,0 +1,209 @@
+/*
+ *  Theme: Default
+ *  ==============
+ *  Theme files wrap Kickstart's mixins into duplicate mixins without the
+ *  "-default". This allows theme artists to insert their own styles by
+ *  extending the default ones. Because the default theme just does direct
+ *  assignment to the final namespaces, it overrides without actually
+ *  changing anything.
+ */
+
+// TODO: This would be the second time importing in rails. prepend this line
+// via gulp.
+
+@import ../core/_normalize
+
+// VARIABLES
+// ---------
+
+// Grayscale
+
+$black:          #111
+$light-black:    #222
+$lighter-black:  #333
+$lightest-black: #444
+$darkest-gray:   #555
+$darker-gray:    #666
+$dark-gray:      #777
+$gray:           #888
+$light-gray:     #999
+$lighter-gray:   #AAA
+$lightest-gray:  #BBB
+$darkest-white:  #CCC
+$darker-white:   #DDD
+$dark-white:     #EEE
+$white:          #FFF
+
+// Rainbow
+
+$red:            #CA3518
+$orange:         darkorange
+$yellow:         rgb(255, 250, 14)
+$green:          #58AA00
+$blue:           cornflowerblue
+$violet:         darkmagenta
+
+// Ten point design variables
+// --------------------------
+// Modifying just these ten variables will take care of 90% of your theme
+
+$primary-color:       $blue
+$secondary-color:     $darker-white
+$space:               25px
+$heading-font-family: 'Lato', helvetica neue, sans-serif
+$body-font-family:    'Lato', helvetica neue, sans-serif
+$base-font-size:      16px
+$black-augment:       0
+$white-augment:       0
+$saturation-augment:  0
+$luminosity-augment:  0
+
+// --------------------------
+
+$scalingFactor: 0.2vw
+
+$rootElement: (paddingV: 5px, paddingH: 12px)
+
+$default-font: $body-font-family
+$default-font-size: $base-font-size
+$default-line-height: 1.4rem
+
+@import ../core/index
+
+// BUTTONS
+// -------
+
+=button($color: transparent)
+  +button-default($color)
+
+// FORMS
+// -----
+
+=form-horizontal()
+  +form-horizontal-default()
+
+=form-left
+  +form-left-default()
+
+=form-group()
+  +form-group-default()
+
+// MODALS
+// ------
+
+=modal()
+  +modal-default()
+
+// NAVIGATION
+// ----------
+
+=navbar($bleed-container: false, $background: $dark-white)
+  +navbar-default($bleed-container, $background)
+
+// STATUSES
+// --------
+
+.status-bar
+  +statusBar()
+
+// TABLE
+// -----
+
+=table()
+  +table-default()
+
+// TILES
+// -----
+
+=tile($color: $dark-gray)
+  +tile-default($color)
+
+// TYPOGRAPHY
+// ----------
+
+=pre
+  +pre-default
+
+pre
+  +pre
+
+=code
+  +code-default
+
+=p($content-optimized)
+  +p-default($content-optimized)
+
+=page-heading
+  +page-heading-default
+  h1, h2, h3, h4, h5, h6
+    // Styles should go here.
+
+=hero
+  +hero-default
+  h1, h2, h3, h4, h5, h6, p
+    color: white
+    font-weight: 300
+
+  h1
+    +xxl-heading
+  h2
+    +xl-heading
+  h3
+    +lg-heading
+  h4
+    +md-heading
+  h5
+    +rg-heading
+  h6
+    +sm-heading
+
+=xxl-heading
+  +xxl-heading-default
+
+=xl-heading
+  +xl-heading-default
+
+=lg-heading
+  +lg-heading-default
+
+=md-heading
+  +md-heading-default
+
+=rg-heading
+  +rg-heading-default
+
+=sm-heading
+  +sm-heading-default
+
+=xs-heading
+  +xs-heading-default
+
+=xxs-heading
+  +xxs-heading-default
+
+h1, h2, h3, h4, h5, h6
+  font-family: $heading-font-family
+
+h1
+  +lg-heading
+
+h2
+  +md-heading
+
+h3
+  +rg-heading
+
+h4
+  +sm-heading
+
+h5
+  +xs-heading
+
+h6
+  +xxs-heading
+
+=html
+  +html-default
+
+html, li, p, table
+  +html