krisbulman

docs reference column-break http://compass-style.org/reference/compass/css3/columns/

the columns mixin file in 13.0 alpha does not contain the following. http://rubygems.org/gems/compass/versions/0.13.alpha.0

krisbulman

Turns a standard list into a block list; very useful for touch interfaces. Improvements welcome.

• Codepen: http://codepen.io/krisbulman/pen/zhlrs
• JSFiddle: http://jsfiddle.net/pwRqS/11/
• Ported into a mixin from inuit.css: https://github.com/csswizardry/inuit.css/blob/7dbc892f8d298795e19aeb64d1369ae3271561d1/objects/_block-list.scss

Thanks to Harry Roberts for this awesome technique.

krisbulman

<div id="menu-dropdown"> 
<ul>
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
</ul>
</div>
<div class="psuedo-menu"><a class="closed-box" id="menu-link" href="#">Menu</a></div>

krisbulman

// Thanks to Chris Eppstein for this gem

$base-line-height: 18px !default;
$base-font-size: 13px !default;
$base-em-ratio: 1em / $base-font-size !default; // used by the px-to-em function below

// Converts px to em in case you do need relative units in your output.
@function px-to-em($value, $em-ratio: $base-em-ratio) {
  @return $value * $em-ratio;
}

krisbulman

<XMLtoDB>

<dbinfo dbuser="postgres" dbpass="password" dbsource="dbi:Pg:dbname=peivotes;host=localhost;port=5432" name="peivotesca"/>
<RootElement name="rss"/>
<DocKeyColumn name="guid"/>

	<Table name="Candidates" dbname="peivotes" xpath="./channel/item/electionspei:ballotcount">
		<KeyColumn name="GID" order="1"/>
		<KeyColumn name="Poll" order="2"/>
		<KeyColumn name="Dist_no" order="3"/>

krisbulman

@import "compass/css3/border-radius";
@import "compass/css3/text-shadow";
@import "compass/css3/transition";
@import "compass/css3/images";

$tabs-color: #dedede;
$page-bg: white;
$tabs-text-color: #333333;

ul.primary {

krisbulman

@mixin shorthand-border($border-width: 1px, $border-color: #ccc, $border-style: solid) {
	@if length($border-width) > 1 {
  		border-width: $border-width;
   		border-style: $border-style; 		
  		border-color: $border-color;
  	}
  	@else if length($border-style) > 1 {
  		border-width: $border-width;
  		border-style: $border-style;
  		border-color: $border-color;

krisbulman

<div class="grid-wrapper">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>

krisbulman

<div class="grid-wrapper">
  <div class="grid-item">one</div>
  <div class="grid-item">two</div>
</div>

krisbulman

// ----
// libsass (v3.1.0)
// ----

@import 'susy';

$susy: (columns: 4);
$map: (columns: 4);

// doesn't work