Marrakech

Marrakech is a collection of common Sass helper mixins and functions helping you write more maintainable styles ✨

Why

Writing styles can be repetitive and slow. Marrakech's collection of mixins makes it easy and fast to write more DRY code.

Table of Contents

• Requirements
• Documentation
  • aspect-ratio
  • border-radius
  • border-width
  • center
  • center-block
  • circle
  • clearfix
  • hide-visually
  • hide-text
  • margin
  • modular-scale
  • padding
  • position
  • size
  • system-ui-font
  • timing
  • triangle
  • truncate
  • ui-color
  • word-wrap
• Contributors
• License

Requirements

• Sass 3.4+ or LibSass 3.3+

Documentation

Aspect Ratio

Set a aspect ratio for an element

• @mixin aspect-ratio([width], [height]);

Parameters

Parameter	Type	Default	Optional
width	number	-	No
height	number	-	No

Example

/** Usage */
.youtube-fluid {
  width: 100%;
  @include aspect-ratio(16, 9);
}

/** Output */
.youtube-fluid {
  width: 100%;
  position: relative;
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  padding-bottom: 56.25%;
}

Border Radius

A shorhand syntax for adding border radius to different sides of an element

• @mixin border-top-radius([radius]);
• @mixin border-right-radius([radius]);
• @mixin border-bottom-radius([radius]);
• @mixin border-left-radius([radius]);

Parameters

Parameter	Type	Default	Optional
radius	Border radius size	-	No

Example

/** Usage */
.box-1 {
  @include border-top-radius(1px);
}
 
.box-2 {
  @include border-right-radius(1px);
}
 
.box-3 {
  @include border-bottom-radius(3px);
}
 
.box-4 {
  @include border-left-radius(4px);
}

/** Output */
.box-1 {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
}
 
.box-2 {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
 
.box-3 {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
 
.box-4 {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

Border Width

A shorthand syntax for setting different border widths on each side of an element

• @mixin border-width([widths]);

Parameters

Parameter	Type	Default	Optional
widths	List of border width sizes	-	No

Example

/** Usage */
.box {
  @include border-width(2px null 3px 1px);
}

/** Output */
.box {
  border-top-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 1px;
}

Center

Center an element vertically and horizontally relative to closest positioned parent

• @mixin center;

Example

/** Usage */
.box {
  @include center;
}

/** Output */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center Block

Center a block element with a display horizontally

• @mixin center-block;

Example

/** Usage */
.box {
  width: 250px;
  @include center-block;
}

/** Output */
.box {
  width: 250px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Circle

Create a circle shape

• @mixin circle([diameter], [color]);

Parameters

Parameter	Type	Default	Optional
diameter	size	-	No
color	color	#000	Yes

Example

/** Usage */
.circle {
  @include circle(200px, darkred);
}

/** Output */
.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: darkred;
}

Clearfix

Clearfix hack clears floated child elements without extra markup

• @mixin clearfix;

Example

/** Usage */
.clearfix {
  @include clearfix;
}

/** Output */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Hide Visually

Hides element and makes the content only visible to screen readers

• @mixin hide-visually;

Example

/** Usage */
.sr-only {
  @include hide-visually;
}

/** Ouput */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Hide Text

• @mixin hide-text;

Example

/** Usage */
.logo {
  @include hide-text;
}

/** Ouput */
.logo {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

Margin

A shorthand way of adding individual margins

• @mixin margin([margins]);

Parameters

Parameter	Type	Default	Optional
margins	List of sizes (4)	-	No

Example

/** Usage */
.box {
  @include margin(5px 10px null 5%);
}

/** Ouput */
.box {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 5%;
}

Modular Scale

Modular scale calculator for consistent typographical scale http://www.modularscale.com/

• @function modular-scale([increment], [ratio], [value]);

Parameters

Parameter	Type	Default	Optional
increment	integer	-	No
ratio	number	1.25 (4:5)	Yes
value	size	1rem	Yes

Example

/** Usage */
h1 {
  font-size: modular-scale(5);
}
 
h2 {
  font-size: modular-scale(4);
}
 
h3 {
  font-size: modular-scale(3);
}
 
h4 {
  font-size: modular-scale(2);
}
 
h5 {
  font-size: modular-scale(1);
}
 
h6 {
  font-size: modular-scale(0);
}

/** Ouput */
h1 {
  font-size: 3.05176rem;
}
 
h2 {
  font-size: 2.44141rem;
}
 
h3 {
  font-size: 1.95312rem;
}
 
h4 {
  font-size: 1.5625rem;
}
 
h5 {
  font-size: 1.25rem;
}
 
h6 {
  font-size: 1rem;
}

Padding

A shorthand way of adding individual paddings

• @mixin padding([paddings]);

Parameters

Parameter	Type	Default	Optional
paddings	List of sizes (4)	-	No

Example

/** Usage */
.box {
  @include padding(5px 10px null 5%);
}

/** Ouput */
.box {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 5%;
}

Position

A shorthand syntax for defining an elements position and its lenghts

• @mixin position([position], [lengths]);

Parameters

Parameter	Type	Default	Optional
position	CSS position value	-	No
lengths	map of lengths	-	No

Example

/** Usage */
.box {
  @include position(absolute, (top: 10%, right: 250px));
}

/** Ouput */
.box {
  position: absolute;
  top: 10%;
  right: 250px;
}

Size

Set the height and width of an element in one line

• @mixin size([width], [height]);

Parameters

Parameter	Type	Default	Optional
width	unit size	-	No
height	unit size	width	Yes

Example

/** Usage */
.square {
  @include size(200px);
}
 
.rectangle {
  @include size(500px, 300px);
}

/** Ouput */
.square {
  width: 200px;
  height: 200px;
}
 
.rectangle {
  width: 500px;
  height: 300px;
}

System UI Font

Get a list of font list to enable system UI font

• @function system-ui-font;

Example

/** Usage */
body {
  font-family: system-ui-font();
}

/** Ouput */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

Timing

Extra cubic-bezier timing functions for animations and transitions

• @function timing([timing-function]);

Parameters

Parameter	Type	Default	Optional
timing-function	timing function name	-	No

Timing functions

• ease-in-quad
• ease-in-cubic
• ease-in-quart
• ease-in-quint
• ease-in-sine
• ease-in-expo
• ease-in-circ
• ease-in-back
• ease-out-quad
• ease-out-cubic
• ease-out-quart
• ease-out-quint
• ease-out-sine
• ease-out-expo
• ease-out-circ
• ease-out-back
• ease-in-out-quad
• ease-in-out-cubic
• ease-in-out-quart
• ease-in-out-quint
• ease-in-out-sine
• ease-in-out-expo
• ease-in-out-circ
• ease-in-out-back

Example

/** Usage */
.box {
  transition: transform 250ms timing(ease-in-sine);
}

/** Ouput */
.box {
  transition: transform 250ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

Triangle

Create a triangle facing up, down, right, left, up-right, up-left, down-right or down-left

• @mixin triangle([size], [color], [direction]);

Parameters

Parameter	Type	Default	Optional
size	size	-	No
color	color	-	No
direction	up, down, right, left, up-right, up-left, down-right or down-left	-	No

Example

/** Usage */
.triangle {
  @include triangle(30px, #000, right);
}

/** Ouput */
.triangle {
  height: 0;
  width: 0;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #000;
  border-top: 15px solid transparent;
}

Truncate

Truncate overflowing text and add a ellipsis

• @mixin truncate;

Example

/** Usage */
.foo {
  @include truncate;
}

/** Ouput */
.foo {
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

UI Color

Get a UI color from the Open Color scheme https://yeun.github.io/open-color/

• @function ui-color([color], [shade], [opacity]);

Parameters

Parameter	Type	Default	Optional
color	gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow or orange	-	No
shade	0-9	5	Yes
opacity	0-1	1	Yes

Example

/** Usage */
.box {
  color: ui-color(gray, 9);
  background: ui-color(yellow, 3);
}

/** Ouput */
.box {
  color: #212529;
  background: #FFE066;
}

Word wrap

A shorhand way of changing the word-wrap property

• @mixin word-wrap([wrap]);

Parameters

Parameter	Type	Default	Optional
wrap	normal, break-word, initial or inherit	break-word	Yes

Example

/** Usage */
.foo {
  @include word-wrap;
}

/** Ouput */
.foo {
  overflow-wrap: break-word;
  word-break: break-all;
  word-wrap: break-word;
}

Contributors

Tahseen Malik

License

MIT