Browse files

Huge update, Finally pulled all the evolutions that have taken place …

…throughout the past year
  • Loading branch information...
1 parent bdab1ff commit f4a17e577a039b289b99d793e9b7693bbbd513fe @KrisHedges committed Sep 20, 2012
View
2 .npmignore
@@ -1 +1,3 @@
node_modules
+Cakefile
+.coffee
View
2 index.styl
@@ -1 +1 @@
-@import 'fluidity/fluidity'
+@import 'lib/fluidity'
View
13 lib/fluidity.styl
@@ -1,13 +1,10 @@
@import "fluidity/reset"
@import "fluidity/grid"
-@import "fluidity/colors"
@import "fluidity/type"
@import "fluidity/css3"
-@import "fluidity/forms"
-@import "fluidity/elements"
-// Feel Free to remove those pieces which you do not need.
-// They are in order here based on dependency.
-// * Also Remember, There are 2 small images in the included images
-// sub-directory that are used by forms.styl, if you're not using
-// forms.styl, you don't need this directory.
+// These are in order here based on dependency.
+// if you'd like to use forms or elements use a seperate @import in your .styl file
+// such as:
+// @import "fluidity/elements"
+// @import "fluidity/forms"
View
15 lib/fluidity/color.styl
@@ -0,0 +1,15 @@
+//Colors
+color = #111111
+
+darkgray1 = #212121
+darkgray2 = #313131
+darkgray3 = #353535
+
+lightgray1 = #c1c1c1
+lightgray2 = #dadada
+lightgray3 = #fafafa
+
+btngray1 = #e1e1e1
+btngray2 = #d1d1d1
+btngray3 = #a1a1a1
+
View
20 lib/fluidity/colors.styl
@@ -1,20 +0,0 @@
-color = #111111
-bgcolor = #bbbbbb
-
-darkgray1 = #212121
-darkgray2 = #313131
-darkgray3 = #353535
-
-lightgray1 = #b1b1b1
-lightgray2 = #c1c1c1
-lightgray3 = #d1d1d1
-
-btngray1 = #e1e1e1
-btngray2 = #d1d1d1
-btngray3 = #a1a1a1
-
-//epcolors
-burple = #603F7C
-green = #3B9646
-orange = #FF8734
-red = #DF0012
View
174 lib/fluidity/css3.styl
@@ -1,63 +1,129 @@
-border-radius(n)
- -webkit-border-radius n
- -moz-border-radius n
- -o-border-radius n
- border-radius n
-
-border-top-left-radius(n)
- -webkit-border-top-left-radius- n
- -moz-border-topleft-radius n
- -o-border-top-left-radius n
- border-top-left-radius n
-
-border-top-right-radius(n)
- -webkit-border-top-right-radius- n
- -moz-border-topright-radius n
- -o-border-top-right-radius n
- border-top-right-radius n
-
-border-bottom-left-radius(n)
- -webkit-border-bottom-left-radius- n
- -moz-border-bottomleft-radius n
- -o-border-bottom-left-radius n
- border-bottom-left-radius n
-
-border-bottom-right-radius(n)
- -webkit-border-bottom-right-radius- n
- -moz-border-bottomright-radius n
- -o-border-bottom-right-radius n
- border-bottom-right-radius n
+@import "vendorize"
-// Box Shadow
+// Opacity
+opacity()
+ vendorize 'opacity', arguments
+ opacity arguments
+
+// Border Radius
+border-radius()
+ vendorize 'border-radius', arguments
+ border-radius arguments
-//An implicit box shadow helper for more than one shadow if necessary
+// Box Shadow
box-shadow()
- -moz-box-shadow arguments
- -webkit-box-shadow arguments
- -o-box-shadow arguments
+ vendorize 'box-shadow', arguments
box-shadow arguments
-// A single outset shadow
-shadow(x,y,b,c)
- -moz-box-shadow x y b c
- -webkit-box-shadow x y b c
- -o-box-shadow x y b c
- box-shadow x y b c
-
-// Inset Shadow
-inshadow(x,y,b,s,c)
- -webkit-box-shadow inset x y b s c
- -moz-box-shadow inset x y b s c
- -o-box-shadow inset x y b s c
- box-shadow inset x y b s c
-
-// Smooth 3 color linear gradients from the top to bottom
+// Border Image
+border-image()
+ vendorize 'border-image', arguments
+ border-image arguments
+
+// Background Size
+background-size()
+ vendorize 'background-size', arguments
+ background-size arguments
+
+//Background Origin
+background-origin()
+ vendorize 'background-origin', arguments
+ background-origin arguments
+
+// Transforms 2D/3D whichever
+transform()
+ vendorize 'transform', arguments
+ transform arguments
+
+backface-visibilty()
+ vendorize 'backface-visibilty', arguments
+ backface-visibilty arguments
+
+perspective()
+ vendorize 'perspective', arguments
+ perspective arguments
+
+// Animations @keyframe support is part of Stylus
+
+animation()
+ vendorize 'animation', arguments
+ animation arguments
+
+animation-name()
+ vendorize 'animation-name', arguments
+ animation-name arguments
+
+animation-duration()
+ vendorize 'animation-duration', arguments
+ animation-duration arguments
+
+animation-timing-function()
+ vendorize 'animation-timing-function', arguments
+ animation-timing-function arguments
+
+animation-delay()
+ vendorize 'animation-timing-function', arguments
+ animation-timing-function arguments
+
+animation-iteration-count()
+ vendorize 'animation-iteration-count', arguments
+ animation-iteration-count arguments
+
+animation-direction()
+ vendorize 'animation-direction', arguments
+ animation-direction arguments
+
+animation-play-state()
+ vendorize 'animation-play-state' arguments
+ animation-play-state arguments
+
+animation-fill-mode()
+ vendorize 'animation-fill-mode', arguments
+ animation-fill-mode arguments
+
+// Transitions
+transition()
+ vendorize 'transition', arguments
+ transition arguments
+
+//Multi-Column Text
+
+columns()
+ vendorize 'columns', arguments
+ columns arguments
+
+column-count()
+ vendorize 'column-count', arguments
+ column-count arguments
+
+column-gap()
+ vendorize 'column-gap', arguments
+ column-gap arguments
+
+column-rule()
+ vendorize 'column-rule', arguments
+ column-rule arguments
+
+// CSS3 UI Properties
+
+appearance()
+ vendorize 'appearance', arguments
+ appearance arguments
+
+box-sizing()
+ vendorizing 'box-sizing', arguments
+ box-sizing arguments
+
+
+// Background Gradients
+// Create a Smooth 3 color linear gradient from top to bottom
+
gradient(beginning, middle, end)
- background-color end
background-image -webkit-gradient(linear, left bottom, left top, color-stop(0.19,end), color-stop(0.64,middle), color-stop(1,beginning))
background-image -moz-linear-gradient(center bottom, end 19%, middle 64%, beginning 100%)
background-image -o-linear-gradient(top,beginning,end)
background-image linear-gradient(center bottom, end 19%, middle 64%, beginning 100%)
+ background-color end
// Smooth 3 color linear gradients from the left to right
hgradient(beginning, middle, end)
@@ -77,10 +143,4 @@ rgradient(x,y,r,e)
background-image -o-radial-gradient(x y, circle farthest-side, r, e 100%)
background-image radial-gradient(x y, circle farthest-side, r, e 100%)
-// Opacity
-opacity(a)
- opacity a
- -webkit-opacity a
- -moz-opacity a
- -o-opacity a
- filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(a * 100) + ')')
+
View
136 lib/fluidity/elements.styl
@@ -5,14 +5,14 @@
position fixed
top 0
left 0
- border 1px solid color
- gradient(darkgray3,darkgray2,darkgray1)
+ border 1px solid darken(lightgray1, 90%)
+ gradient lightgray3, lightgray2, lightgray1
color lightgray3
- z-index 10
+ z-index 15 !important
opacity(1.0)
- shadow 0 0 16px color
+ box-shadow 0 0 16px darken(lightgray1, 60%)
.topbar-inner
- grid()
+ grid(100%,grid-min-width)
overflow visible
p
margin 1.5em
@@ -22,79 +22,79 @@
float left
border 0
small()
- .pills li a
- border 0
- &:active
- &.current
- border 0
.pills
display block
width 100%
height 50px
clear both
- margin-left 0.5em
-
-.pills li a
- float left
- padding 7px 8px 8px 9px
- margin 1.1em 0.20em
- border-radius (13px)
- color white
- border none
- outline none
- text-align center
- text-decoration none
- color black
- font-weight normal
- letter-spacing 0.06em
- text-shadow 0px 1px 0px btngray1
- gradient(btngray1,btngray2,btngray3)
- border 1px solid darkgray1
- shadow 0 1px 1px color
- &:hover
- inshadow 0 0 6px 0px darken(darkgray1, 20%)
- &.current
- &:active
- padding 7px 7px 8px 9px
- margin 1.1em 0.20em
- inshadow 0 0 10px 1px darken(darkgray1, 40%)
- color white
- text-shadow 0px 0px 8px color, 0 0 1px color
- border 1px solid color
- gradient(darken(darkgray3,50%),darkgray2,darkgray1)
+ margin 0 0 0 0.5em
+ list-style-type none
+ li
+ margin 0
+ padding 0
+ a
+ float left
+ padding 7px 8px 7px 9px
+ margin 0.85em 0.20em
+ border-radius 4px
+ outline none
+ text-align center
+ text-decoration none
+ text-transform capitalize
+ font-weight bold
+ color darkgray2
+ letter-spacing 0.05em
+ text-shadow 0px 1px 1px lightgray3, 0px -1px 0px lightgray1
+ gradient lightgray3, lightgray2, lightgray1
+ border 1px solid darken(lightgray1, 20%)
+ box-shadow 0 1px 1px darkgray2
+ &:hover
+ gradient lighten(lightgray1,10%), darken(lightgray2,10%), lighten(lightgray2,5%)
+ box-shadow inset 0 1px 10px 0px lighten(darkgray3,30%), 0 0 1px lightgray1
+ text-shadow 0px 1px 1px lighten(lightgray3,15%), 0px -1px 0px lightgray1
+ border 1px solid darken(lightgray1, 40%)
+ color darken(darkgray2, 20%)
+ &:active
+ .current
+ gradient darkgray3, darkgray2, darkgray1
+ background-color darkgray1
+ box-shadow inset 0 0 10px 1px darken(darkgray1, 40%)
+ color white
+ text-shadow 0px 0px 8px color, 0 0 1px color
.tabs
display block
margin auto 0
width 100%
height 50px
clear both
-
-
-.tabs li a
- float left
- padding 8px
- margin 1.1em 0.30em 1.1em 0em
- border-top-left-radius (8px)
- border-top-right-radius (8px)
- color white
- border none
- outline none
- text-align center
- text-decoration none
- color black
- font-weight normal
- letter-spacing 0.06em
- text-shadow 0px 1px 0px btngray1
- gradient(btngray1,btngray2,btngray3)
- border 1px solid darkgray1
- inshadow 0 0 6px 0px darken(darkgray1, 20%)
- &:hover
- &.current
- &:active
- inshadow 0 0 10px 1px darken(darkgray1, 40%)
- color white
- text-shadow 0px 0px 8px color, 0 0 1px color
- border 1px solid color
- gradient(darkgray3,darkgray2,darkgray1)
+ list-style-type none
+ li
+ margin 0
+ a
+ float left
+ padding 8px
+ margin 1.1em 0.30em 1.1em 0em
+ border-top-left-radius (8px)
+ border-top-right-radius (8px)
+ color white
+ border none
+ outline none
+ text-align center
+ text-decoration none
+ color black
+ font-weight normal
+ letter-spacing 0.06em
+ text-shadow 0px 1px 0px btngray1
+ gradient(btngray1,btngray2,btngray3)
+ border 1px solid darkgray1
+ box-shadow inset 0 0 6px 0px darken(darkgray1, 20%)
+ &:hover
+ &.current
+ &:active
+ box-shadow inset 0 0 10px 1px darken(darkgray1, 40%)
+ color white
+ text-shadow 0px 0px 8px color, 0 0 1px color
+ border 1px solid color
+ gradient(darkgray3,darkgray2,darkgray1)
View
17 lib/fluidity/forms.styl
@@ -1,11 +1,3 @@
-@import 'colors'
-@import 'css3'
-
-fieldset
- position relative
- clear both
- margin 0
-
legend
width 100%
float left
@@ -106,17 +98,11 @@ textarea
select
background-color lighten(lightgray3,5%)
inshadow(0,0,9px,1px, lighten(darkgray3,50%))
- background-image url('./lib/images/select.png')
- background-repeat no-repeat
- background-position right center
cursor pointer
&:focus
&:hover
background-color lighten(lightgray3,10%)
inshadow(0,0,9px,1px, lighten(darkgray3,70%))
- background-image url('./lib/images/select.png')
- background-repeat no-repeat
- background-position right center
select[multiple]
display inline-block
@@ -151,12 +137,9 @@ input[type=radio]
border-radius 2em
input[type=checkbox]:checked
- background-image url('./lib/images/checkbox.png')
- background-repeat no-repeat
background-color color
input[type=radio]:checked
- background-image none
background-color color
input[type=file]
View
140 lib/fluidity/grid.styl
@@ -1,125 +1,57 @@
-// Set the width of the grid in %
-// Set the minwidth of the grid in px
+@import "vendorize"
-gridWidth = 100%
-minWidth = 960px
+grid-width = 100% unless grid-width is defined
+grid-min-width = 960px unless grid-min-width is defined
-// Apply the grid() Mixin to any container element in your CSS.
-// Or
-// Create a parent div using the .grid convenience class.
-
-grid()
+grid(width = grid-width, min-width = grid-min-width)
position relative
- width gridWidth
- min-width minWidth
+ width width
+ min-width min-width
margin 0 auto
overflow hidden
+space()
+ display block
+ position relative
+ float left
+ height 100%
+ margin 0
+ padding 0
+ vendorize "box-sizing", border-box
+ box-sizing border-box
+
+grid-space(width)
+ space()
+ width width
+
+center-space()
+ float none
+ margin 0 auto
+
.grid
grid()
-body
- min-width minWidth
- width 100%
- height 100%
+for width in 1..100
+ .grid-space-{width}
+ grid-space(1% * width)
+
+.center-space
+ center-space()
header
+.header
footer
-feildset
+.footer
+fieldset
section
.section
- position relative
display block
+ position relative
float left
width 100%
height 100%
margin 0
padding 0
clear both
-
-column()
- position relative
- float left
- display block
- height 100%
- margin 0
- padding 0
-
-// Custom Column Widths
-
-grid_custom(width) // You can also choose an arbitray percentage width for your column but, REMEMBER: Your columns must add up to 100%.
- column()
- width width
-
-// Use these Mixins with your semantic ids & classes to create
-// a grid without any additional classes in your HTML.
-// ** Remember ** These columns must be within a section element.
-
-grid_10() // 96px - Maximum container Width at min-width 960px
- column()
- width 10%
-grid_20() // 192px - Maximum container Width at min-width 960px
- column()
- width 20%
-grid_25() // 240px - Maximum container Width at min-width 960px
- column()
- width 25%
-grid_30() // 288px - Maximum container Width at min-width 960px
- column()
- width 30%
-grid_33() // 319px - Maximum container Width at min-width 960px
- column()
- width 33.3%
-grid_40() // 384px - Maximum container Width at min-width 960px
- column()
- width 40%
-grid_50() // 480px - Maximum container Width at min-width 960px
- column()
- width 50%
-grid_60() // 576px - Maximum container Width at min-width 960px
- column()
- width 60%
-grid_70() // 672px - Maximum container Width at min-width 960px
- column()
- width 70%
-grid_75() // 720px - Maximum container Width at min-width 960px
- column()
- width 75%
-grid_80() // 768px - Maximum container Width at min-width 960px
- column()
- width 80%
-grid_90() // 864px - Maximum container Width at min-width 960px
- column()
- width 90%
-grid_100() // 960px - Maximum container Width at min-width 960px
- column()
- width 100%
-
-// You can also use these convenience classes in your HTML to quickly build a grid without worrying about semantics.
-
-.grid_10
- grid_10()
-.grid_20
- grid_20()
-.grid_25
- grid_25()
-.grid_30
- grid_30()
-.grid_33
- grid_33()
-.grid_40
- grid_40()
-.grid_50
- grid_50()
-.grid_60
- grid_60()
-.grid_70
- grid_70()
-.grid_75
- grid_75()
-.grid_80
- grid_80()
-.grid_90
- grid_90()
-.grid_100
- grid_100()
+ vendorize "box-sizing", border-box
+ box-sizing border-box
View
9 lib/fluidity/reset.styl
@@ -1,21 +1,22 @@
html, body
+ position relative
margin 0
padding 0
+ width 100%
height 100%
-h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, ul, ol
margin 0
padding 0
border 0
font-weight normal
font-style normal
font-size 100%
- line-height 1
font-family inherit
table
border-collapse collapse
border-spacing 0
-ul
- list-style none
+
html
overflow-y scroll
font-size 100%
View
102 lib/fluidity/type.styl
@@ -1,14 +1,19 @@
-body
- font-size 100%
- line-height 1.8em
- font-family "Helvetica Neue", Helvetica, Verdana, Arial
+@import "color"
+
+base-font-size = 1em unless base-font-size is defined
+base-line-height = 1.35em unless base-line-height is defined
+margins = 16px * base-font-size
+
+body
+ font-size base-font-size
+ line-height base-line-height
+ font-family Helvetica, Verdana, Arial
p
- margin 1.8em
- line-height 1.2em
+ margin 1em 1em 0.5em 1.5em
h1, h2, h3, h4, h5, h6
- margin .625em 24px
+ margin .825em margins
h1
font-size 1.8em
h2
@@ -27,32 +32,101 @@ h6
b
strong
font-weight bold
-
i
em
font-style italic
letter-spacing 0.065em
-address
+address, blockquote
display block
- margin 1.5em
- line-height 1.3em
+ margin margins*2
+ line-height base-line-height
+
+
+blockquote
+ font-size 1.15em
+ text-align right
+ p
+ text-align center
+ cite
+ font-style italic
+ margin 0
+ &:before
+ content "\2014\00a0"
+ &:after
+ content ""
+ p:before
+ content "\201C\00a0"
+ p:after
+ content "\00a0\201D"
+q
+ quotes none
+ &:before
+ content "\201C\00a0"
+ &:after
+ content "\00a0\201D"
+
+cite, cite a
+ font-style italic
+cite
+ &:before
+ content "("
+ &:after
+ content ")"
pre
code
display block
- margin 1em
- border-radius 5px
+ margin 0.5em margins margins margins
+ border-radius 0
padding 1em
background-color lightgray3
+ border 1px solid lightgray2
white-space pre-wrap
white-space -moz-pre-wrap
white-space -pre-wrap
white-space -o-pre-wrap
word-wrap none
- font-size .875em
+ font-size .975em
font-family "Courier New", Courier, monospace, sans-serif
overflow auto
+ color darkgray3
+
+ul, ol, dl
+ margin 0 margins*3 base-line-height margins*2
+ font-weight normal
+ font-style normal
+ font-size 100%
+ font-family inherit
+ul ul,
+ol ol,
+dl dl
+ margin 0 (margins*2) 0 margins*1.15
+ul
+ list-style-type disc
+ ul
+ list-style-type circle
+ol
+ list-style-type decimal
+ ol
+ list-style-type lower-alpha
+dl
+ margin 0.5em margins
+ font-weight normal
+ font-style normal
+ font-size 100%
+ font-family inherit
+ list-style-type none
+ dt
+ font-weight bold
+ dd
+ margin (margins/1.25) margins
+
+
+
+
+
+
// Mixins for Small, Medium, Large, and XLarge Font-sizes
View
5 lib/fluidity/vendorize.styl
@@ -0,0 +1,5 @@
+vendorize(prop, args)
+ if vendors is defined
+ for browser in vendors
+ -{browser}-{prop} args
+

0 comments on commit f4a17e5

Please sign in to comment.