The previous version of liquid grid would not take margins into proper
account. With this patch the margins are a correct percentage of the
container, and adding multiple margins / columns together should add up
to just about 100% (not entirely accurate, but very close).
The math is as follows:
With the previous version, you get these numbers:
4.173% grid width * 24 columns = 100.152%, which due to rounding 'fixes'
in the template becomes exactly 100%. However, this is without any margins.
Once you add margins, you exceed 100%, rendering margins unusable. To add
to the confusion, the margins are not a percentage of the width, but instead
in 'em' units, making it very difficult to keep the entire grid from getting
beyond 100% in width once you add margins.
With this patch, you get these numbers:
(3.167% grid width + 1.042% margin) * 24 columns = 101.1016%. Since you
don't use any margin for the last column, you subtract one margin and end up
with 99.974%. Optimally this number would be 100.000%, but the 0.026% error
is difficult to remove, and an acceptable compromise in my opinion.
In summary, this patch enables margins to be used with the liquid grid,
which is the expected behaviour.
* Wrote a description for the CSS3 module.
* Wrote a description for every single import in the CSS3 module.
* Wrote a description for every single mixin in the CSS3 module.
* Updated sass files to reflect parsing through markdown in the docs.
* Added missing inline documentation to certain files e.g. _columns.sass.
* ! Did not modify any mixin
* master:
[Blueprint] Add mixins for +prepend-top and +append-bottom and corresponding grid classes when generating the css grid classes.
Use FSSM by Travis Tilley to monitor for filesystem changes. On mac this will use filesystem events instead of polling. Fixes an infinite looping issue when compilation errors occur.
frameworks by passing a directory that contains those frameworks. Each
framework can choose to adhere to the naming convention of providing a
'stylesheets' directory and a 'templates' directory, or it can register
itself by providing a ruby file at one of the following locations:
<plugin>/compass_init.rb
<plugin>/lib/<plugin>.rb
<plugin>/<plugin>.rb
The first file found in the above order will be required. The framework
should register itself there using the Compass::Frameworks.register method.
Added two rules (':height auto !important' and ':height 100%') to the !root_selector of the sticky-footer mixin so that it also works with IE6.
Tested and working with Firefox 3.5, Safari 4, Chrome 3, and IE6.
to the new compass/utilities/css3 module. If you were explicitly importing
compass/utilities/general, compass/utilities/general/inline_block or
compass/utilities/general/opacity to access the opacity or
inline-block mixins, you'll need to update your imports.
Since this requires the installation of an additional xml file for
firefox support, it is provided as a pattern.
To install:
compass -p ellipsis
To use:
Mix +ellipsis into a selector targeting the textual element that will
truncate via ellipsis. By default, ellipsis text is set tono-wrap. Pass
false as the first argument if you don't want that.
Note:
Firefox is the lame browser in this respect, it requires a lot of bending
over backwards and has many quirky behaviors. Please read the blog post at
http://mattsnider.com/css/css-string-truncation-with-ellipsis/ for a full
explanation of the issues. Also note that ellipsis text is white-space
sensitive in Firefox, an issue that is sure to affect Haml users more than
most.
The new +horizontal-list-container and +horizontal-list-item mixins can
be used to build your horizontal list when you need more control over
the selectors (E.g. when working with nested lists).
Added the following mixins:
+push-base
+push-margins
+pull-base
+pull-margins
The generated css when using presentational class names will be smaller as a result.
This port adds semantic win and color customization to your blueprint button
styles. It also let's you choose whether you want to float them right,
left, or leave them inline-block.
To install this plugin into your project run the following command.
compass -f blueprint -p buttons
Or if you have a rails project:
compass --rails -f blueprint -p buttons
YUI doesn't even consider it part of the reset. With so much
disagreement, I decided to make the compass reset agnostic and let
individual frameworks decide what the body line-height ought to be.
Breakdown of changes:
===
Remove the body scope that is unnecessarily added to many blueprint classes due to the way the mixins were constructed and used. Blueprint mixins that operate on the body tag now follow a pattern where they take the body selector as an argument and must always be mixed into the top level of a stylesheet. The classes will be scoped whenever the selector is not a simple "body" selector which is the default. Mixins affected: +blueprint-ie, +blueprint-print, +blueprint-typography, and +blueprint-scaffolding. All of these mixins use corresponding +[mixin]-body and +[mixin]-defaults mixins in their implementations that you can use directly if you feel constrained by the requirement to mix into the top-level.
===
Made all configurable constants possible to override in a base stylesheet using conditional assignment. Moved many colors that were still hard coded to the colors.sass module so they can be overridden.
===
Restored some blueprint defaults even though I didn't like them. With the exception of the blueprint link urls which are now available as a mixin called +blueprint-show-link-urls (they used to just be commented out.)
===
Grid constants have been renamed in both the grid and liquid grid modules. These constants are now conditionally assigned to make the grid easily configured.
===
The liquid grid now uses the compass clearfix.
===
moved the primary mixin for a module (where one exists) to the top of the file for clarity of readers.
===
blueprint grid classes are now appropriately scoped under the .container class.
To perform a reset, simply @import compass/reset.sass
To perform a selective reset, you should @import compass/utilities/general/reset.sass which will provide
reset mixins without defining any css rules.
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
