github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sass Utility Mixins that encapsulate many common styling patterns. Using them can significantly speed up the styling of a webpage.

Browse Source 
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:
Chris Eppstein 2008-09-28 16:13:03 -07:00
parent 0c6d1f967d
commit fbceb3fbbc
17 changed files with 175 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass
View File

@ -15,7 +15,7 @@
// * 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.
!layout_grid_columns = 24

21
frameworks/compass/stylesheets/compass/_utilities.sass
View File

@ -1,16 +1,5 @@
// Clearing floats without extra markup
// Based on How To Clear Floats Without Structural Markup by PiE
// [http://www.positioniseverything.net/easyclearing.html]
// The above article no longer recommends its approach instead
// This is recommended now:
// [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
@import utilities/general
@import utilities/links
@import utilities/lists
@import utilities/tables
@import utilities/text

3
frameworks/compass/stylesheets/compass/utilities/_general.sass Normal file
View File

@ -0,0 +1,3 @@
@import general/clearfix
@import general/tag_cloud

3
frameworks/compass/stylesheets/compass/utilities/_links.sass Normal file
View File

@ -0,0 +1,3 @@
@import links/hover_link
@import links/link_colors
@import links/unstyled_link

3
frameworks/compass/stylesheets/compass/utilities/_lists.sass Normal file
View File

@ -0,0 +1,3 @@
@import lists/horizontal_list
@import lists/inline_list
@import lists/bullets

1
frameworks/compass/stylesheets/compass/utilities/_tables.sass Normal file
View File

@ -0,0 +1 @@
@import tables/alternating_rows_and_columns

1
frameworks/compass/stylesheets/compass/utilities/_text.sass Normal file
View File

@ -0,0 +1 @@
@import text/nowrap

10
frameworks/compass/stylesheets/compass/utilities/general/_clearfix.sass Normal file
View File

@ -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

19
frameworks/compass/stylesheets/compass/utilities/general/_tag_cloud.sass Normal file
View File

@ -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

5
frameworks/compass/stylesheets/compass/utilities/links/_hover_link.sass Normal file
View File

@ -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

24
frameworks/compass/stylesheets/compass/utilities/links/_link_colors.sass Normal file
View File

@ -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

5
frameworks/compass/stylesheets/compass/utilities/links/_unstyled_link.sass Normal file
View File

@ -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

21
frameworks/compass/stylesheets/compass/utilities/lists/_bullets.sass Normal file
View File

@ -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

17
frameworks/compass/stylesheets/compass/utilities/lists/_horizontal_list.sass Normal file
View File

@ -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

29
frameworks/compass/stylesheets/compass/utilities/lists/_inline_list.sass Normal file
View File

@ -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 ""

25
frameworks/compass/stylesheets/compass/utilities/tables/_alternating_rows_and_columns.sass Normal file
View File

@ -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

3
frameworks/compass/stylesheets/compass/utilities/text/_nowrap.sass Normal file
View File

@ -0,0 +1,3 @@
// When remembering whether or not there's a hyphen in white-space is too hard
=nowrap
:white-space nowrap