Babs Gösgens babsgosgens

🤡

Life’s a parade

babsgosgens / mixin-column-width

Last active December 20, 2015 17:58

	@mixin column-width($fraction: $column-width-default, $persistent: false)
	{
	@if $persistent {
	width: fraction-to-percentage($fraction) !important;
	}
	@else {
	width: fraction-to-percentage($fraction);
	}

	@if $column-breakpoint {

babsgosgens / mixin-container-behavior

Last active December 20, 2015 17:58

	@mixin container-behavior($use-margin: false)
	{
	@if $use-margin {
	margin-left: 0;
	margin-right: 0;
	}
	@else {
	padding-left: 0;
	padding-right: 0;
	}

babsgosgens / mixin-root

Last active December 20, 2015 17:59

	@mixin root($hide-overflow: true, $root-max-width: $root-max-width, $set-display: false)
	{
	@if $set-display {
	display: block;
	}

	@if $hide-overflow {
	overflow: hidden;
	}

babsgosgens / mixin-bleed

Last active December 20, 2015 17:58

Mixin to reverse padding on a container. Is sometimes helpful when nested columns.

	@mixin bleed($fraction: -1/2, $persistent: false)
	{
	@include column-spacing($fraction, true);
	@if $persistent == false {
	@if $column-breakpoint {
	@include breakpoint( $column-breakpoint ) {
	@include column-spacing($fraction/2, true);
	}
	}
	}

babsgosgens / mixin-column-spacing

Last active December 20, 2015 17:59

Mixin column spacing. Uses padding by default, but can be overridden to use margins instead - helpful when assigning backgrounds or borders.

	@mixin column-spacing($fraction: 1/2, $use-margin: false, $persistent: false)
	{
	@if ($use-margin) {
	margin-left: horizontal-rhythm($fraction);
	margin-right: horizontal-rhythm($fraction);
	@if $persistent == false {
	@if $column-breakpoint {
	@include breakpoint( $column-breakpoint ) {
	margin-left: horizontal-rhythm($fraction/2);
	margin-right: horizontal-rhythm($fraction/2);

babsgosgens / mixin-column

Last active December 20, 2015 17:58

Shorthand mixin for column, combines above mixins. Behavior can be overridden with the parameters.

	@mixin column($fraction: 1/1, $persistent: false, $apply-padding: 1/2, $apply-margin: false)
	{
	@include column-behavior();

	@include column-width($fraction, $persistent);

	@if $apply-padding {
	@include column-spacing($apply-padding);
	}

babsgosgens / mixin-move

Last active December 20, 2015 17:59

Helper mixin for source-ordering. Expects a fraction as a value.

	@mixin move($fraction, $persistent: false)
	{
	position: relative;
	left: fraction-to-percentage($fraction);

	@if $persistent and $column-breakpoint {
	@include breakpoint( $column-breakpoint ) {
	position: static;
	position: initial;
	}

babsgosgens / function-horizontal-rhythm

Last active December 20, 2015 17:59

Calculates a value based on the $column-spacing.

	@function horizontal-rhythm($fraction: 1/2)
	{
	$value: return-unitless( $fraction * $column-spacing );

	@if $column-spacing-unit == 1rem {
	@return $value/10*1rem;
	}
	@if $column-spacing-unit == 1em {
	@return $value/$base-font-size*1em;
	}

babsgosgens / function-return-unitless

Created August 7, 2013 09:41

	// Accepts a value and returns it without a value
	@function return-unitless($value)
	{
	@if unitless($value) {
	@return $value;
	}

	$unit: unit($value);

	@if $unit=="px" {

babsgosgens / function-fraction-to-percentage

Created August 7, 2013 09:42

Convert a fraction to a percentage.

	@function fraction-to-percentage($fraction: 1/3) {
	@return $fraction*100%;
	}