Sass Utility Mixins that encapsulate many common styling patterns. Using them can significantly speed up the styling of a webpage.
Here's a quick rundown of what's included in this checkin (@ denotes an import file, + denotes a mixin): @ compass/utilities @ compass/utilities/general @ compass/utilities/general/clearfix +clearfix - Clearing floats without extra markup @ compass/utilities/general/tag_cloud +tag-cloud(!base_size = 1em) - Emits styles for a tag cloud @ compass/utilities/links @ compass/utilities/links/hover_link +hover-link - makes a link underlined only when hovered. @ compass/utilities/links/link_colors +link-colors(!normal, [!hover, !active, !visited, !focus]) - specify all the colors of a link with one mixin. Colors not sepecified will not be emitted, this may or may not work out depending on how you've defined your style rules. @ compass/utilities/links/unstyled_link +unstyled-link - A link that looks and acts like the text it is contained within @ compass/utilities/lists @ compass/utilities/lists/bullets +no-bullet - Turns off the bullet for a single list element. +no-bullets - Turns off the bullets for all the list elements in a list. +pretty-bullets(!bullet_icon, !width, !height[, !line_height = 18px, !padding = 14px]) - use an icon for the list elements of a list. @ compass/utilities/lists/horizontal_list +horizontal-list - A list where the elements are floated left. @ compass/utilities/lists/inline_list +inline-list - A list where both the list and the list elements are inlined. +comma-delimited-list - an inline-list that is comma delimited. @ compass/utilities/tables @ compass/utilities/tables/alternating_rows_and_columns +alternating-rows-and-columns(!even_row_color, !odd_row_color, !dark_intersection) - The first colors are the even/odd colors respectively and the last argument is a shade that is subtracted from those colors for the even columns. @ compass/utilities/text @ compass/utilities/text/nowrap +nowrap - Because remembering whether or not there's a hyphen in white-space is too hard
This commit is contained in:
parent
0c6d1f967d
commit
fbceb3fbbc
@ -15,7 +15,7 @@
|
|||||||
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
|
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
|
||||||
// --------------------------------------------------------------
|
// --------------------------------------------------------------
|
||||||
|
|
||||||
@import compass/utilities
|
@import compass/utilities/general/clearfix
|
||||||
|
|
||||||
// Main layout grid, edit these parameters to build your grid and container sizes.
|
// Main layout grid, edit these parameters to build your grid and container sizes.
|
||||||
!layout_grid_columns = 24
|
!layout_grid_columns = 24
|
||||||
|
@ -1,16 +1,5 @@
|
|||||||
// Clearing floats without extra markup
|
@import utilities/general
|
||||||
// Based on How To Clear Floats Without Structural Markup by PiE
|
@import utilities/links
|
||||||
// [http://www.positioniseverything.net/easyclearing.html]
|
@import utilities/lists
|
||||||
// The above article no longer recommends its approach instead
|
@import utilities/tables
|
||||||
// This is recommended now:
|
@import utilities/text
|
||||||
// [http://www.sitepoint.com/examples/clearing_floats/example2.php]
|
|
||||||
=clearfix
|
|
||||||
:overflow auto
|
|
||||||
// This makes ie6 get layout
|
|
||||||
:display inline-block
|
|
||||||
// and this puts it back to block
|
|
||||||
&
|
|
||||||
:display block
|
|
||||||
|
|
||||||
=nowrap
|
|
||||||
:white-space nowrap
|
|
||||||
|
@ -0,0 +1,3 @@
|
|||||||
|
@import general/clearfix
|
||||||
|
@import general/tag_cloud
|
||||||
|
|
@ -0,0 +1,3 @@
|
|||||||
|
@import links/hover_link
|
||||||
|
@import links/link_colors
|
||||||
|
@import links/unstyled_link
|
@ -0,0 +1,3 @@
|
|||||||
|
@import lists/horizontal_list
|
||||||
|
@import lists/inline_list
|
||||||
|
@import lists/bullets
|
@ -0,0 +1 @@
|
|||||||
|
@import tables/alternating_rows_and_columns
|
@ -0,0 +1 @@
|
|||||||
|
@import text/nowrap
|
@ -0,0 +1,10 @@
|
|||||||
|
// Clearing floats without extra markup
|
||||||
|
// Simple Clearing of Floats
|
||||||
|
// [http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/]
|
||||||
|
=clearfix
|
||||||
|
:overflow auto
|
||||||
|
// This makes ie6 get layout
|
||||||
|
:display inline-block
|
||||||
|
// and this puts it back to block
|
||||||
|
&
|
||||||
|
:display block
|
@ -0,0 +1,19 @@
|
|||||||
|
// Emits styles for a tag cloud
|
||||||
|
=tag-cloud(!base_size = 1em)
|
||||||
|
:font-size= !base_size
|
||||||
|
:line-height= 1.2 * !base_size
|
||||||
|
.xxs, .xs, .s, .l, .xl, .xxl
|
||||||
|
:line-height 1.2 !base_size
|
||||||
|
.xxs
|
||||||
|
:font-size= !base_size / 2.0
|
||||||
|
.xs
|
||||||
|
:font-size= 2.0 * !base_size / 3.0
|
||||||
|
.s
|
||||||
|
:font-size= 3.0 * !base_size / 4.0
|
||||||
|
.l
|
||||||
|
:font-size= 4.0 * !base_size / 3.0
|
||||||
|
.xl
|
||||||
|
:font-size= 3.0 * !base_size / 2.0
|
||||||
|
.xxl
|
||||||
|
:font-size= 2.0 * !base_size
|
||||||
|
|
@ -0,0 +1,5 @@
|
|||||||
|
// a link that only has an underline when you hover over it
|
||||||
|
=hover-link
|
||||||
|
:text-decoration none
|
||||||
|
&:hover
|
||||||
|
:text-decoration underline
|
@ -0,0 +1,24 @@
|
|||||||
|
// Set all the colors for a link with one mixin call
|
||||||
|
// Order of arguments is:
|
||||||
|
// normal, hover, active, visited, focus
|
||||||
|
// states not specified will inherit.
|
||||||
|
// Mixin like so:
|
||||||
|
// a
|
||||||
|
// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
|
||||||
|
|
||||||
|
=link-colors(!normal, !hover = false, !active = false, !visited = false, !focus = false)
|
||||||
|
:color= !normal
|
||||||
|
@if !visited
|
||||||
|
&:visited
|
||||||
|
:color= !visited
|
||||||
|
@if !focus
|
||||||
|
&:focus
|
||||||
|
:color= !focus
|
||||||
|
@if !hover
|
||||||
|
&:hover
|
||||||
|
:color= !hover
|
||||||
|
@if !active
|
||||||
|
&:active
|
||||||
|
:color= !active
|
||||||
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
|||||||
|
// A link that looks and acts like the text it is contained within
|
||||||
|
=unstyled-link
|
||||||
|
:color inherit
|
||||||
|
:text-decoration inherit
|
||||||
|
:cursor inherit
|
@ -0,0 +1,21 @@
|
|||||||
|
// Turn off the bullet for an element of a list
|
||||||
|
=no-bullet
|
||||||
|
:list-style-type none
|
||||||
|
:margin-left 0px
|
||||||
|
|
||||||
|
// turns off the bullets for an entire list
|
||||||
|
=no-bullets
|
||||||
|
li
|
||||||
|
+no-bullet
|
||||||
|
|
||||||
|
// Make a list(ul/ol) have an image bullet
|
||||||
|
// mixin should be used like this for an icon that is 5x7:
|
||||||
|
// ul.pretty
|
||||||
|
// +pretty-bullets(/images/my-icon.png, 5px, 7px)
|
||||||
|
=pretty-bullets(!bullet_icon, !width, !height, !line_height = 18px, !padding = 14px)
|
||||||
|
:margin-left 0
|
||||||
|
li
|
||||||
|
:padding-left= !padding
|
||||||
|
:background= url(!bullet_icon) no-repeat ((!padding - !width) / 2) ((!line_height - !height) / 2)
|
||||||
|
:list-style-type none
|
||||||
|
|
@ -0,0 +1,17 @@
|
|||||||
|
// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
|
||||||
|
// This is not an inline list.
|
||||||
|
=horizontal-list
|
||||||
|
:overflow auto
|
||||||
|
:list-style-type none
|
||||||
|
:padding-left 0px
|
||||||
|
:margin 0px
|
||||||
|
li
|
||||||
|
:white-space nowrap
|
||||||
|
:float left
|
||||||
|
:padding
|
||||||
|
:left 4px
|
||||||
|
:right 4px
|
||||||
|
&.first
|
||||||
|
:padding-left 0px
|
||||||
|
&.last
|
||||||
|
:padding-right 0px
|
@ -0,0 +1,29 @@
|
|||||||
|
// makes a list inline.
|
||||||
|
|
||||||
|
=inline-list
|
||||||
|
:list-style-type none
|
||||||
|
:margin 0px
|
||||||
|
:padding 0px
|
||||||
|
:display inline
|
||||||
|
li
|
||||||
|
:margin 0px
|
||||||
|
:padding 0px
|
||||||
|
:display inline
|
||||||
|
|
||||||
|
// makes an inlin list that is comma delimited.
|
||||||
|
// use of this recipe is not recommended at this time due to browser support issues.
|
||||||
|
//
|
||||||
|
// use of :content and :after is not fully supported in all browsers.
|
||||||
|
// See http://www.quirksmode.org/css/contents.html#t15 for the support matrix
|
||||||
|
//
|
||||||
|
// :last-child is not fully supported
|
||||||
|
// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
|
||||||
|
|
||||||
|
=comma-delimited-list
|
||||||
|
+inline-list
|
||||||
|
li
|
||||||
|
&:after
|
||||||
|
:content ", "
|
||||||
|
&:last-child, &.last
|
||||||
|
&:after
|
||||||
|
:content ""
|
@ -0,0 +1,25 @@
|
|||||||
|
=alternating-rows-and-columns(!even_row_color, !odd_row_color, !dark_intersection)
|
||||||
|
td,
|
||||||
|
th
|
||||||
|
:padding 2px
|
||||||
|
&.numeric
|
||||||
|
:text-align right
|
||||||
|
tbody
|
||||||
|
th
|
||||||
|
:text-align center
|
||||||
|
thead
|
||||||
|
:font-size .9em
|
||||||
|
th.even
|
||||||
|
:background-color= #fff - !dark_intersection
|
||||||
|
tfoot
|
||||||
|
:font-size .9em
|
||||||
|
td.even
|
||||||
|
:background-color= #fff - !dark_intersection
|
||||||
|
tr.odd
|
||||||
|
:background-color= !odd_row_color
|
||||||
|
td.even
|
||||||
|
:background-color= !odd_row_color - !dark_intersection
|
||||||
|
tr.even
|
||||||
|
:background-color= !even_row_color
|
||||||
|
td.even
|
||||||
|
:background-color= !even_row_color - !dark_intersection
|
@ -0,0 +1,3 @@
|
|||||||
|
// When remembering whether or not there's a hyphen in white-space is too hard
|
||||||
|
=nowrap
|
||||||
|
:white-space nowrap
|
Loading…
Reference in New Issue
Block a user