create folder and files in rep styl

styl/config/_breakpoints.styl

@@ -0,0 +1,9 @@
+// Responsive breakpoints variables
+
+// Warning : you should use your own values, regardless of the devices
+// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
+tiny         = 543px // or 'em' if you prefer, of course
+small        = 767px
+medium       = 991px
+large        = 1199px
+extra-large  = 1439px

styl/config/_mixins.styl

@@ -0,0 +1,33 @@
+// Additionnal "utility" breakpoints aliases
+// ex. @include respond-to("medium-up") {...}
+breakpoint(bp)
+  if bp == 'tiny'
+    return '(max-width: {tiny})'
+  else if bp == 'small'
+    return '(max-width: {small})'
+  else if bp == 'medium'
+    return '(max-width: {medium})'
+  else if bp == 'large'
+    return '(max-width: {large})'
+  else if bp == 'extra-large'
+    return '(max-width: {extra-large})'
+  else if bp == 'tiny-up'
+    return '(min-width: {tiny + 1})'
+  else if bp == 'small-up'
+    return '(min-width: {small + 1})'
+  else if bp == 'medium-up'
+    return '(min-width: {medium + 1})'
+  else if bp == 'large-up'
+    return '(min-width: {large + 1})'
+  else if bp == 'extra-large-up'
+    return '(min-width: {extra-large + 1})'
+  else if bp == 'retina'
+    return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
+
+
+/*
+respond-to(value)
+  string = breakpoint(value)
+  @media screen and {string}
+    {block}
+*/

styl/config/_variables.styl

@@ -0,0 +1,50 @@
+// Config file and project variables
+
+// font sizes
+base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
+line-height    = 1.5 // equiv line-height 1.5
+h1-size        = 3.2rem // equiv "32px"
+h2-size        = 2.8rem // equiv "28px"
+h3-size        = 2.4rem // equiv "24px"
+h4-size        = 2.0rem // equiv "20px"
+h5-size        = 1.8rem // equiv "18px"
+h6-size        = 1.6rem // equiv "16px"
+
+// font stacks
+font-stack-common    = sans-serif // common font
+font-stack-headings  = sans-serif // headings font
+font-stack-monospace = consolas, courier, monospace // monospace font
+
+// color scheme
+color1    = #000
+color2    = #fff
+color3    = #333
+color4    = #000
+color5    = #6FA939
+
+// colors used in project
+base-color       = color1
+link-color       = color3
+base-background  = color2
+// If you don't want any effect on focused/hovered links,
+// comment variable below or make it equal to either link-color or false or null
+link-hover-color = color4
+brand-primary    = color5
+
+
+// spacings (choose unit you prefer)
+tiny-value             = .5rem // tiny value for margins / paddings
+tiny-plus-value        = .7rem // tiny+ value for margins / paddings
+small-value            = 1rem // small value for margins / paddings
+small-plus-value       = 1.5rem // small+ value for margins / paddings
+medium-value           = 2rem // medium value for margins / paddings
+medium-plus-value      = 3rem // medium+ value for margins / paddings
+large-value            = 4rem // large value for margins / paddings
+large-plus-value       = 6rem // large value for margins / paddings
+extra-large-value      = 8rem // extra large value for margins / paddings
+extra-large-plus-value = 12rem // extra large value for margins / paddings
+ultra-large-value      = 16rem // ultra large value for margins / paddings
+ultra-large-plus-value = 20rem // ultra large value for margins / paddings
+
+//kna-namespace (default : null)
+kna-namespace = null;