skins/website/en/accessories/sass/...
Utilities
The sass/utils-folder contains a collection of useful helper mixins and functions for many areas of application.
Basic helpers
sass/utils/_helpers.scss
@mixin x-rem
@include x-rem ( string $property , string $values [, string $main-font-size] );
This mixin enables you to use the CSS3 value `rem`, which lets you define property sizes based on the root element's font-size. It outputs properties that use rem with a px fallback.
It assumes that you use html { font-size: 62.5%; } to set up a root font-size of 10px.
.selector {
@include x-rem(font-size, 1.3);
@include x-rem(padding, 20px 40px);
}
.selector {
font-size: 13px;
font-size: 1.3rem;
padding: 20px 40px;
padding: 2rem 4rem;
}
Utilities for layout
sass/utils/_layout.scss
@mixin clearfix
@include clearfix;
@include cf;
The inevitable. Use class .clearfix, @include clearfix or the shorthand @include cf.
.wrapper {
@include clearfix;
}
.wrapper:after {
content: '';
display: table;
clear: both;
}
@function z
z-index Management
z ( string $layer );
Like managing responsive breakpoints, keeping track of your website's z-layers can be far easier and much more convenient if you gather all z-indexes into a single map. Instead of assigning the z-index values directly, write z-index: z(). This is especially helpful when you need to debug your code.
$z-layers: (
header: 30,
content: 10,
footer: 20
);
.header { z-index: z(header); }
.content { z-index: z(content); }
.footer { z-index: z(footer); }
- sass/variables/_layout.scss (z-index configuration)
- sass/utils/_layout.scss (the function)
@mixin absolute / @mixin relative / @mixin fixed
Positioning mixins
@include absolute ( list $args );
@include fixed ( list $args );
@include relative ( list $args );
The Sass-mixins @mixin absolute, @mixin fixed and @mixin relative offer a convenient way to position your website's elements by shorthand. Each mixin takes one argument consisting of up to four values that match the four offset properties. If you want to leave out a property, just use the value null. Use the value auto to reset an already set property.
.example-pos1
.example-pos2
.example-pos3
.example-pos4
.example-pos1 {
/*
top: 10px
right: 20px
bottom: null
left: 40px
*/
@include absolute(10px 20px null 40px);
}
.example-pos2 {
/*
top: null
right & left: 50px
bottom: 20px
*/
@include absolute(null 50px 20px);
}
.example-pos3 {
/*
top & bottom: 120px
right & left: 0
*/
@include absolute(120px 0);
}
.example-pos4 {
/*
top & bottom & right & left: 70px
*/
@include absolute(70px);
}
.example-pos1 {
top: 10px;
right: 20px;
left: 40px;
position: absolute;
}
.example-pos2 {
right: 50px;
bottom: 20px;
left: 50px;
position: absolute;
}
.example-pos3 {
top: 120px;
right: 0;
bottom: 120;
left: 0;
position: absolute;
}
.example-pos4 {
top: 70px;
right: 70px;
bottom: 70px;
left: 70px;
position: absolute;
}
@mixin center-vertical
@include center-vertical;
For vertically centering inline-block-elements with a dynamic size. Doesn’t require an extra, non-semantic HTML element.
http://hackingui.com/front-end/10-best-scss-utilities/
I am a lonely div inside another lonely div. But at least I am a vertically centered div!
<div class="example-center-vert">
<div class="example-center-vert-item">
I am a lonely div inside another lonely div. But at least I am a vertically centered div!
</div>
</div>
.example-center-vert {
@include center-vertical;
[...]
}
.example-center-vert-item {
@include inline-block;
[...]
}
@mixin center-both
@include center-both;
Horizontally and vertically center elements with a dynamic size. Works only in modern Browsers.
I am a lonely div inside another lonely div. But at least I am a perfectly centered div!
<div class="example-center-both">
<div class="example-center-both-item">
I am a lonely div inside another lonely div. But at least I am a perfectly centered div!
</div>
</div>
.example-center-both {
position: relative;
[...]
}
.example-center-both-item {
@include center-both;
[...]
}
Utilities for sizing
sass/utils/_sizing.scss
@mixin size
@include size ( string $width , string $height );
A shorthand for width and height.
.card {
@include size(100px, 200px);
}
.icon {
@include size(40px);
}
.card {
width: 100px;
height: 200px;
}
.icon {
width: 40px;
height: 40px;
}
@mixin size-rem
@include size-rem ( string $width , string $height );
A shorthand for width and height with rem units and px-fallback.
.card {
@include size-rem(100px, 200px);
}
.icon {
@include size-rem(40px);
}
.card {
width: 100px;
width: 10rem;
height: 200px;
height: 20rem;
}
.icon {
width: 40px;
width: 4rem;
height: 40px;
height: 4rem;
}
- sass/utils/_sizing.scss
- sass/utils/_helpers.scss (dependency @mixin x-rem)
Shorthands for @mixin x-rem
Size, margin and padding specifications with REM
These mixins build upon @mixin x-rem (see above) and enable you to use the CSS3 value `rem` - which lets you define property sizes based on the font-size of the root element - and still think in pixels.
Please keep in mind to use html { font-size: 62.5%; } to set up a root font-size of 10px (therefore 10px equals 1rem, 24px equals 2.4rem and so on).
@mixin margin($values) { @include x-rem(margin, $values); }
@mixin margin-top($value) { @include x-rem(margin-top, $value); }
@mixin margin-right($value) { @include x-rem(margin-right, $value); }
@mixin margin-bottom($value) { @include x-rem(margin-bottom, $value); }
@mixin margin-left($value) { @include x-rem(margin-left, $value); }
@mixin padding($values) { @include x-rem(padding, $values); }
@mixin padding-top($value) { @include x-rem(padding-top, $value); }
@mixin padding-right($value) { @include x-rem(padding-right, $value); }
@mixin padding-bottom($value) { @include x-rem(padding-bottom, $value); }
@mixin padding-left($value) { @include x-rem(padding-left, $value); }
@mixin width($value) { @include x-rem(width, $value); }
@mixin height($value) { @include x-rem(height, $value); }
@mixin min-width($value) { @include x-rem(min-width, $value); }
@mixin min-height($value) { @include x-rem(min-height, $value); }
@mixin max-width($value) { @include x-rem(max-width, $value); }
@mixin max-height($value) { @include x-rem(max-height, $value); }
p {
@include margin(16px 0);
}
.container {
@include min-width(320px);
@include max-width(1300px);
}
p {
margin: 16px 0;
margin: 1.6rem 0;
}
.container {
min-width: 320px;
min-width: 32rem;
max-width: 1300px;
max-width: 130rem;
}
- sass/utils/_sizing.scss
- sass/utils/_helpers.scss (dependency @mixin x-rem)
@mixin aspect-ratio
@include aspect-ratio ( [ string $width-factor , string $height-factor ] );
Creates CSS for a flexible element that remains its aspect ratio when resized.
.video-wrapper {
@include aspect-ratio;
}
.photo-35mm-wrapper {
@include aspect-ratio(3, 2);
}
.video-wrapper {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.photo-35mm-wrapper {
width: 100%;
height: 0;
padding-bottom: 66.6666667%;
}
Utilities for typography
sass/utils/_typography.scss
@mixin font-size
REM font-size and line-height
@include font-size ( list $args );
Taken from http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/.
Especially when dealing with responsive web design, it is recommended using relative values like em or rem for your font-size and line-height-allocations. By sticking to this principle you are able to change the size of your entire website's typography by editing only the font-size value of the <html>-Element. While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size, making using the latter easier to scale type across the entire page.
You can use this mixin to set your font-sizes and line-heights the old way - with pixel values (with or without the "px"-units) - and still write code that is fit for responsive web design.
It assumes that you use html { font-size: 62.5%; } to set up a base font-size of 10px.
Of course this mixin has a px-fallback for legacy browsers.
p {
@include font-size(16px 24px);
}
p {
font-size: 16px;
font-size: 1.6rem;
line-height: 24px;
line-height: 2.4rem;
}
- sass/utils/_typography.scss
- sass/utils/_helpers.scss (dependency @mixin x-rem)
@mixin rwd-font-size
Responsive Typography
@include rwd-font-size ( map $definition );
@mixin rwd-font-size is an extension of @mixin font-size (see above). It helps you setting individual font-size and line-height values tied to specific breakpoints.
Consult the next chapter "Responsive Web Design" for an explanation of the breakpoint-configuration.
$p-font-size: (
null: (18px 26px), // "null" is the default size
sm: (16px 24px), // breakpoint "sm" (600px)
lg: (14px 20px) // breakpoint "lg" (980px)
);
p {
@include rwd-font-size($p-font-size);
}
p {
font-size: 18px;
font-size: 1.8rem;
line-height: 26px;
line-height: 2.6rem;
}
@media(min-width: 600px) {
p {
font-size: 16px;
font-size: 1.6rem;
line-height: 24px;
line-height: 2.4rem;
}
}
@media(min-width: 980px) {
p {
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
line-height: 2.0rem;
}
}
- sass/utils/_typography.scss
- sass/utils/_helpers.scss (dependency @mixin x-rem)
@mixin font-family
@include font-family ( string $key );
@include ff ( string $key );
Set a font-family-stack from $font-families,which can be configured in variables/_typography.scss.
@include ff can be used as a shorthand.
Text font-family
Heading font-family
Code font-family
.example-family-text {
@include font-family('text'); // regular mixin
}
.example-family-heading {
@include ff('heading'); // shorthand mixin
}
.example-family-code {
@include ff('code', $font-families); // second parameter is optional
}
- sass/utils/_typography.scss
- sass/variables/_typography.scss ($font-families configuration)
@mixin truncate-text
@include truncate-text;
Taken from http://hackingui.com/front-end/10-best-scss-utilities/.
A small mixin ensuring that your text element doesn’t overflow its container and breaks nicely. It takes one parameter, which is any of the valid text-overflow values (the default value "ellipsis", "clip", or a string).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in posuere orci. Nam euismod gravida nunc. Ut accumsan vitae dolor interdum ullamcorper. Ut luctus, lacus quis finibus bibendum, tortor nisl tristique mauris, eu efficitur nisi felis sit amet lacus.
.example-truncate {
@include truncate-text; // parameter is optional
}
- sass/utils/_typography.scss
@mixin remove-whitespace
@include remove-whitespace;
@include remove whitespace removes the gaps between inline-block elements by zeroing font-size and adjusting word-spacing. Use @include reset-text to set your text styles back to normal thereafter.
<div class="rw-example">
<div class="rw-example__item">These</div>
<div class="rw-example__item">are</div>
<div class="rw-example__item">inline-block</div>
</div>
.rw-example {
@include remove-whitespace;
}
.rw-example__item {
@include inline-block;
border: 1px solid #f66;
padding: 10px;
@include rwd-font-size($p-font-size);
@include reset-text;
}
- sass/utils/_typography.scss
@mixin hide-text
@include hide-text;
Hide the text inside an element by using this mixin.
<p class="example-hidetext">This text is hidden</p>
.example-hidetext {
background-color: #ccf;
width: 200px;
height: 50px;
@include hide-text;
}
- sass/utils/_typography.scss
Utilities for color
sass/utils/_color.scss
@function color
color ( string $color [, string $tone , map $map ] );
Set a predefined color from $colors or another map with color definitions.
Text color
Background color
.example-color {
color: color('primary');
}
.example-bgcolor {
background-color: color('greyscale', 'light');
}
- sass/utils/_colors.scss
- sass/variables/colors.scss ($color definitions)
@function black / @function white
black ( float $opacity );
white ( float $opacity );
Returns an rgba value with the chosen opacity.
.example-black {
background-color: black(0.3);
}
.example-white {
background-color: white(0.6);
}
@function shade / @function tint
shade ( string $color , float $percentage );
tint ( string $color , float $percentage );
//$percentage: percentage of `$color` in returned color
Slightly darken or lighten a color, mixing it with either black or white.
shade(#00ff00, 30);
tint(#ff0000, 50);
.example-shade {
background-color: shade(#00ff00, 30);
}
.example-tint {
background-color: tint(#ff0000, 50);
}
@mixin gradient-transition
@include gradient-transition ( string $start-color , string $end-color , string $duration );
@mixin gradient-transition creates a :hover-transition-effect with a gradient.
.button {
@include gradient-transition($grey5, $grey4, 0.25s);
[...]
}
@mixin link-colors
@include link-colors ( string $link [ , string $visited , string $hover , string $active ] );
Set the color values for :link, :visited, :hover and :active states.
.example-linkcolors {
@include link-colors(#00f, #00c, #009, #000);
}
JavaScript features
Columns with synced heights
This feature makes use of the syncHeight Plugin for YAML, which automatically syncs the height properties of the elements that match the given selector.
The code is further extended in js/utils/syncheight.js for responsive web design. There you can define the breakpoints at which your synced columns will become unsynced by editing the array unSyncAtBreakpoints. In the example below, the breakpoints called mobile and xs are elements of this array. Therefore, the heights of the columns will only be synced if the width of the screen is high enough to activate at least the min-width-breakpoint sm.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a ligula vitae risus vulputate venenatis. Donec luctus, sapien non maximus interdum, risus elit condimentum enim, a commodo metus ipsum vel erat.
Maecenas ac purus vitae leo pellentesque congue a id nisi. Phasellus ultrices interdum tellus eget auctor. Morbi tristique lectus sed mi malesuada, in sagittis massa consequat. Sed sed accumsan nisl. Sed bibendum gravida lorem eu tristique. Aliquam facilisis congue venenatis. Proin dui neque, commodo eget leo eget, pretium ornare lacus.
Ut pretium orci arcu, vitae pharetra neque pharetra sed.
<div class="sync-height">
<div class="sync-me">
...
</div>
<div class="sync-me">
...
</div>
</div>
- js/vendor/jquery.syncheight.js
- js/utils/syncheight.js
Objects
@mixin accordion
@include accordion ( [ string $color , string $hover-color ] );
Styles for an accordion ui-element. See section Accordion for more information.
- sass/utils/objects/_accordion.scss
@mixin alert-message
@include alert-message ( string $text-color , string $bg-color , string $border-color);
Styles for an alert message ui-element. See section Alert Messages for more information.
- sass/utils/objects/_alert.scss
@mixin carousel
@include carousel ( [ percentage $aspect-ratio , string $caption-color, string $caption-bg-color ] );
Styles for a carousel ui-element. See section Carousel for more information.
- sass/utils/objects/_carousel.scss
@mixin dropdown-content
@mixin dropdown-content-list
@mixin dropdown
@include dropdown-content ( [ string $content-padding , string $bg-color , string $border , string $border-color , string $box-shadow ] );
@include dropdown-content-list ( [ string $padding , string $option-padding , string $color , string $hover-color , string $active-color , string $hover-bg-color , string $active-bg-color ] );
@include dropdown ( [ map $params ] );
Styles for a dropdown ui-element. See section Dropdowns for more information.
- sass/utils/objects/_dropdown.scss
@mixin reset-list
@include reset-list;
Resets list styles (list-style-type, padding).
<ul class="example-reset-list">
<li>This</li>
<li>list</li>
<li>is</li>
<li>resetted</li>
</ul>
.example-reset-list {
@include reset-list;
}
- sass/utils/objects/_list.scss
@mixin no-list
@mixin comma-separated-list
@include no-list;
@include comma-separated-list;
While @mixin no-list removes all list-specific styles from an <ul> or <ol>, @mixin comma-separated-list makes the style-resetted list items look like a real, comma-separated list.
- This
- list
- is
- comma
- separated
<ul class="example-comma-separated">
<li>This</li>
<li>list</li>
<li>is</li>
<li>comma</li>
<li>separated</li>
</ul>
.example-comma-separated {
@include no-list;
@include comma-separated-list;
}
- sass/utils/objects/_list.scss
@mixin embed-container
@include embed-container ( [ string $width-factor , string $height-factor ] );
@mixin embed-container makes use of @mixin aspect-ratio (see above) to output CSS for an element containing a video or another element that has to be resized proportionally.
<div class="example-embedcontainer">
<iframe src="https://www.youtube.com/embed/IBMKyNJvNV8" frameborder="0" allowfullscreen></iframe>
</div>
.example-embedcontainer {
@include embed-container;
}
- sass/utils/objects/_embed-container.scss
@mixin hamburger
@include hamburger ( [ map $params ] );
@mixin hamburger outputs styles for a pure-CSS hamburger icon. See tab "SCSS" for an explanation of the parameters.
<div class="example-hamburgericon" role="button">
<div class="example-hamburgericon__bar"></div>
<div class="example-hamburgericon__bar"></div>
<div class="example-hamburgericon__bar"></div>
</div>
.example-hamburgericon {
@include hamburger((
height: 16px, // height of icon
width: 22px, // width of icon
bar-height: 2px, // thickness of bars
color: #333, // icon color
));
}
- sass/utils/objects/_hamburger.scss
@mixin loading-spinner
@include loading spinner ( [ map $params ] );
Creates CSS for a loading animation. See tab "SCSS" for an explanation of the parameters.
<div class="example-spinner"></div>
.example-spinner {
@include loading-spinner((
size: 40px, // size of spinner
border-width: 4px, // thickness of spinner
color1: rgba($black, 0.1), // base color
color2: color('primary'), // highlight color
duration: 1s // duration of a single animation passing
));
}
- sass/utils/objects/_loading.scss
@mixin triangle
@include triangle ( [ string $direction , string $size , string $color ] );
@include triangle-absolute ( [ string $direction , string $size , string $color ] );
@mixin triangle creates a right angled triangle pointing to a direction specified by $direction. @mixin triangle-absolute further provides styles for absolute positioning of pseudo-elements.
<span class="triangled">What a pretty triangle!</span>
.triangled {
position: relative;
[...]
&:before {
@include triangle-absolute(bottom, 10px, $blue1);
bottom: -10px;
left: 50%;
transform: translate(-50%, 0);
}
}
- sass/utils/objects/_triangle.scss
Responsive Web Design
Mixins, functions and classes that may help you building a responsive website can be found in utils/_responsive.scss.
$breakpoints
Global breakpoint configuration
When creating a responsive site, use the Sass-map $breakpoints in sass/variables/_layout.scss to map names to the values, making breakpoint management easier. By sticking to this map you are able to keep track of your breakpoint values and to change your media queries globally without accidently overlooking one.
Add more breakpoints as you like or change the names and values entirely. But make sure to order the values in an upward direction, starting with the smallest one, followed by the second smallest one and so on. You may benefit from the following mixins and classes that rely on $breakpoints.
$breakpoints: (
xs: 400px, /* iPhone 6 Plus */
sm: 600px, /* Nexus 7 */
md: 730px, /* iPad */
lg: 980px, /* Desktop 1024 */
xl: 1200px /* Widescreen */
);
- sass/variables/_layout.scss
@mixin bp-min
min-width breakpoint mixin
Dynamic breakpoint mixin for responsive webdesign. Use it to create min-width media queries tied to your $breakpoints (see above).
Lazy people (like me) can also use @mixin bp which is a shorthand for @mixin bp-min.
$breakpoints: (
xs: 400px,
sm: 600px,
md: 730px,
lg: 980px,
xl: 1200px
);
.wrapper {
/* Styles for mobile resolution */
@include bp(xs) {
/* Styles for extra-small resolution */
}
@include bp(sm) {
/* Styles for small resolution */
}
@include bp(md) {
/* Styles for medium resolution */
}
@include bp(lg) {
/* Styles for large resolution */
}
@include bp(xl) {
/* Styles for extra large resolution */
}
}
.wrapper {
/* Styles for mobile resolution */
}
@media (min-width: 400px) {
.wrapper {
/* Styles for extra-small resolution */
}
}
@media (min-width: 600px) {
.wrapper {
/* Styles for small resolution */
}
}
@media (min-width: 730px) {
.wrapper {
/* Styles for medium resolution */
}
}
@media (min-width: 980px) {
.wrapper {
/* Styles for large resolution */
}
}
@media (min-width: 1200px) {
.wrapper {
/* Styles for extra large resolution */
}
}
- sass/variables/_layout.scss (breakpoint configuration)
- sass/utils/_responsive.scss (the mixin)
@mixin bp-max
max-width breakpoint mixin
Another dynamic breakpoint mixin creating max-width media queries instead. It will minus off 1px from the max-width query to ensure that your breakpoints don't overlap each other.
$breakpoints: (
xs: 400px,
sm: 600px,
md: 730px,
lg: 980px,
xl: 1200px
);
.wrapper {
/* Styles for extra large resolution */
@include bp-max(xl) {
/* Styles for large resolution */
}
@include bp-max(lg) {
/* Styles for medium resolution */
}
@include bp-max(md) {
/* Styles for small resolution */
}
@include bp-max(sm) {
/* Styles for extra-small resolution */
}
@include bp-max(xs) {
/* Styles for mobile resolution */
}
}
.wrapper {
/* Styles for extra large resolution */
}
@media (max-width: 1199px) {
.wrapper {
/* Styles for large resolution */
}
}
@media (max-width: 979px) {
.wrapper {
/* Styles for medium resolution */
}
}
@media (max-width: 729px) {
.wrapper {
/* Styles for small resolution */
}
}
@media (max-width: 599px) {
.wrapper {
/* Styles for extra-small resolution */
}
}
@media (max-width: 399px) {
.wrapper {
/* Styles for mobile resolution */
}
}
- sass/variables/_layout.scss (breakpoint configuration)
- sass/utils/_responsive.scss (the mixin)
@mixin bp-min-max
min-width and max-width breakpoint mixin
Dynamic breakpoint mixin creating min- and max-width media queries. It will minus off 1px from the max-width query to ensure that your breakpoints don't overlap each other.
You may also use @mixin bp-both as a shorthand.
$breakpoints: (
xs: 400px,
sm: 600px,
md: 730px,
lg: 980px,
xl: 1200px
);
.wrapper {
/* General styles */
@include bp-min-max(xs, sm) {
/* Styles for between extra small and small resolution */
}
@include bp-min-max(sm, md) {
/* Styles for between small and medium resolution */
}
@include bp-min-max(md, lg) {
/* Styles for between medium and large resolution */
}
@include bp-min-max(sm, xl) {
/* Styles for between small and extra large resolution */
}
}
.wrapper {
/* General styles */
}
@media (min-width: 400px) and (max-width: 599px) {
.wrapper {
/* Styles for between extra small and small resolution */
}
}
@media (min-width: 600px) and (max-width: 729px) {
.wrapper {
/* Styles for between small and medium resolution */
}
}
@media (min-width: 730px) and (max-width: 979px) {
.wrapper {
/* Styles for between medium and large resolution */
}
}
@media (min-width: 600px) and (max-width: 1199px) {
.wrapper {
/* Styles for between small and extra large resolution */
}
}
- sass/variables/_layout.scss (breakpoint configuration)
- sass/utils/_responsive.scss (the mixin)
@mixin hd
"Retina" mixin.
.logo {
background: url('logo-100x50.png');
@include hd {
background: url('logo-200x100.png');
background-size: 100px 50px;
}
}
.logo {
background: url('logo-100x50.png');
}
@media (-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.logo {
background: url('logo-200x100.png');
background-size: 100px 50px;
}
}
- sass/utils/_responsive.scss
Responsive helper classes
Based on the names and values of your $breakpoints-map (see above), helper classes are generated that help you letting block-level-elements appear or vanish at specific min-width breakpoints.
Currently visible (.block- and .inline-classes are set to display: none by default for the purpose of this example):
.hide-xs
.hide-sm
.hide-md
.hide-lg
.hide-xl
.block-xs
.block-sm
.block-md
.block-lg
.block-xl
.inline-xs
.inline-sm
.inline-md
.inline-lg
.inline-xl
(Resize browser window to change values)
/*
breakpoint configuation
*/
$breakpoints: (
xs: 400px,
sm: 600px,
md: 730px,
lg: 980px,
xl: 1200px
);
/*
The following classes are generated according to the breakpoint configuation above:
*/
.hide-xs {...} /* hidden at 400px and above */
.hide-sm {...} /* hidden at 600px and above */
.hide-md {...} /* hidden at 730px and above */
.hide-lg {...} /* hidden at 980px and above */
.hide-xl {...} /* hidden at 1200px and above */
.block-xs {...} /* display: block at 400px and above */
.block-sm {...} /* display: block at 600px and above */
.block-md {...} /* display: block at 730px and above */
.block-lg {...} /* display: block at 980px and above */
.block-xl {...} /* display: block at 1200px and above */
.inline-xs {...} /* display: inline at 400px and above */
.inline-sm {...} /* display: inline at 600px and above */
.inline-md {...} /* display: inline at 730px and above */
.inline-lg {...} /* display: inline at 980px and above */
.inline-xl {...} /* display: inline at 1200px and above */
- sass/variables/_layout.scss (breakpoint configuration)
- sass/base/_standards.scss (the generator)
#responsive status
This feature allows you to add jQuery code to your responsive web design, such as - for example - programming a menu that not only looks and but also behaves differently in various screen resolutions. Once again the editable Sass-map $breakpoints (see above) is the starting point for this feature.
The HTML-element <span id="responsive-status"></span> has to be placed inside your main layout file. Its css-attribute font-family will be set to the name of the currently active min-width breakpoint. This attribute can be read via JavaScript-Code, so your scripts can react to specific screen resolutions. The jQuery-Code below is located in the file js/utils/responsive.js. You may have to change the function checkResponsiveStatus or more specifically the switch(status)-expression so that the cases match the names of your breakpoints in $breakpoints which your jQuery code should react to.
As an additional gimmick, the class-attribute of the <body>-tag will be set to a value being the name of the currently active min-width breakpoint, prefixed with "responsive-". For example it says <body class="responsive-md"> for the breakpoint called "md". This helps you to make your responsive site compatible to legacy browsers if necessary.
Current status:
<body>-classname: responsive-
(Resize browser window to change values)
<span id="responsive-status"></span>
$breakpoints: (
xs: 400px,
sm: 600px,
md: 730px,
lg: 980px,
xl: 1200px
);
#responsive-status {
display: none;
font-family: "mobile";
}
@each $breakpoint in $breakpoints {
$name: nth($breakpoint, 1);
$width: nth($breakpoint, 2);
@media (min-width: $width) {
#responsive-status {
font-family: "#{$name}";
}
}
}
function checkResponsiveStatus() {
var currBreakpoint = $('#responsive-status').css('font-family');
if (currBreakpoint != lastBreakpoint) {
// Set <body> classname to responsive-{name of current breakpoint}
$('body').removeClass (function (index, css) {
return (css.match (/(^|\s)responsive-\S+/g) || []).join(' ');
});
$('body').addClass("responsive-" + currBreakpoint);
// Just for presentation (may be deleted)
$('.example-rs').html(currBreakpoint);
// Call functions tied to current breakpoint
// Add your own cases if you like
switch(currBreakpoint) {
case "mobile":
console.log("JavaScript-Code for mobile resolution");
break;
case "xs":
console.log("JavaScript-Code for extra small (xs) resolution");
break;
case "sm":
console.log("JavaScript-Code for small (sm) resolution");
break;
case "md":
console.log("JavaScript-Code for medium (md) resolution");
break;
case "lg":
console.log("JavaScript-Code for large (lg) resolution");
break;
case "xl":
console.log("JavaScript-Code for extra large (xl) resolution");
break;
}
}
lastBreakpoint = currBreakpoint;
return currBreakpoint;
}
var lastBreakpoint = false,
currBreakpoint = false;
$(document).ready(function() {
// Groessenaenderung des Browserfensters abfangen
$( window ).bind( "resize", function(){
currBreakpoint = checkResponsiveStatus();
});
// Seite initialisieren
currBreakpoint = checkResponsiveStatus();
});
- sass/variables/_layout.scss (breakpoint configuration)
- sass/base/_standards.scss (SCSS-code)
- templates/layout_main.html (HTML-code)
- js/responsive.js (jQuery-Code)
Forms
Best practice forms
Based on Form Kitchen Sink
This example meets the following requirements:
- Container independent, flexible widths in percent
- Responsive, linearizable, mobile-ready
- Browser support: IE9 and up, Chrome latest, Safari latest, Firefox latest, Opera latest, major mobile browsers
- 2 variants: labels left (for most forms) and labels above (small or narrow forms)
- Doesn't break with multi-line labels
- Client-side validation via HTML5 input types and JavaScript support
- Inline error messages
- Backend/templating friendly
- Suitable for using label/input/error includes/snippets
- Slim and flexible markup
Update 05/07/2016: Included styles from formalize CSS to achieve consistent styling of form elements across all major browsers.
<form>
<fieldset class="wideform">
<div class="formrow">
<label class="label req" for="firstname">First/last name</label>
<div class="formitem col-1of2">
<label class="label req" for="firstname">First name</label>
<input class="formfield" type="text" name="firstname" id="firstname" placeholder="Placeholder" required="required" x-autocompletetype="given-name"/>
</div>
<div class="formitem col-1of2">
<label class="label req" for="firstname">Last name</label>
<input class="formfield" type="text" name="lastname" id="lastname" placeholder="... with polyfill" required="required" x-autocompletetype="family-name"/>
</div>
</div>
<div class="formrow">
<div class="formitem col-1of3">
<label class="label" for="zip">Zip</label>
<input class="formfield" type="text" name="zip" id="zip" pattern="[0-9]" x-autocompletetype="postal-code"/>
</div>
<div class="formitem col-2of3">
<label class="label" for="zip">City</label>
<input class="formfield" type="text" name="city" id="city" x-autocompletetype="city"/>
</div>
</div>
</fieldset>
</form>
- sass/atoms/_form-field.scss
- sass/atoms/_form-error.scss
- sass/atoms/_form-placeholder.scss
- sass/molecules/_form-item.scss
- sass/molecules/_form-row.scss
- sass/molecules/_form-ticks.scss
- sass/molecules/_fieldset.scss
- sass/organisms/_form.scss
- (sass/molecules/_form-rating.scss)
- js/components/form.js
Easygrid
Very basic, selfmade grid. Classes are mandatory for "form kitchen sink" (see above).
<div class="grid">
<div class="col-1of5">
...
</div>
<div class="col-4of5">
...
</div>
</div>
- sass/organisms/_form.scss
Custom radiobuttons and checkboxes
Use <div class="custom-ticks"> or <div class="ticks custom-ticks"> as a wrapper around a group of checkboxes and radiobuttons to activate custom styling.
<form action="#" method="get">
<div class="formrow">
<div class="formitem">
<div class="ticks custom-ticks">
<label>
<input type="radio" name="salutation" id="salutation-mrs" value="mrs">
<span>Mrs.</span>
</label>
[...]
</div>
</div>
</div>
<div class="formrow">
<div class="formitem">
<div class="ticks custom-ticks">
<label>
<input type="checkbox" name="newsletter" id="custom-newsletter">
<span>Subscribe to newsletter</span>
</label>
</div>
</div>
</div>
</form>
- sass/molecules/_form-ticks-custom.scss
Custom select boxes
Use <div class="custom-select"> as a wrapper around a single select box to activate custom styling.
By default it is styled similar to the regular (non-custom-) select box.
<form action="#" method="get">
<div class="formrow">
<div class="formitem">
<div class="custom-select">
<select class="formfield">
<option value="cocacola">Coca Cola</option>
<option value="pepsicola">Pepsi Cola</option>
<option value="africola">Afri Cola</option>
<option value="rivercola">River Cola</option>
<option value="lidlcola">Die unleckere Cola vom Lidl</option>
</select>
</div>
</div>
</div>
</form>
- sass/atoms/_form-field-custom.scss
- javascript/components/_form-custom.js
Custom text inputs
Use <div class="custom-input"> as a wrapper around a single input (text, password, number, tel, email, url, date, time, month, week, datetime, datetime-local) or textarea to activate custom styling.
By default it is styled like the regular (non-custom-) form fields.
<form action="#" method="get">
<div class="formrow">
<div class="formitem">
<label class="label" for="custominput">Custom input</label>
<div class="custom-input">
<input class="formfield" type="text" id="custominput">
</div>
</div>
</div>
<div class="formrow">
<div class="formitem">
<label class="label" for="customarea">Custom textarea</label>
<div class="custom-input">
<textarea class="formfield" cols="40" rows="5" id="customarea"></textarea>
</div>
</div>
</div>
</form>
- sass/atoms/_form-field-custom.scss
- javascript/components/_form-custom.js
Floating labels
Add class .floatlabel to the .formitem-Element to have its label floated. Doesn't work within forms or fieldsets with class .wideform.
<form action="#" method="get" id="form2">
<div class="formrow">
<div class="formitem col-1of2 floatlabel">
<label class="label req" for="firstname2">First name</label>
<input class="formfield" type="text" name="firstname" id="firstname2" required="required" x-autocompletetype="given-name"/>
</div>
<div class="formitem col-1of2 floatlabel">
<label class="label req" for="lastname2">Last name</label>
<input class="formfield" type="text" name="lastname" id="lastname2" required="required" x-autocompletetype="family-name"/>
</div>
</div>
</form>
- sass/atoms/_form-floatlabel.scss
- js/components/form-floatlabels.js
Password helper
Wrap your <input type="password"> into a div with class .password-helper to create a button that can switch the type of the password-field to "text" and back to "password" when clicked.
This not only helps clueless people to master the password field but makes it just a little bit more convenient for everyone.
<form action="#" method="get" id="form2">
<div class="formrow">
<div class="formitem col-1of2">
<label class="label req" for="password1">Password</label>
<div class="password-helper">
<input class="formfield" type="password" name="password" id="password1" required="required" />
</div>
</div>
<div class="formitem col-1of2">
<label class="label req" for="password2">Password again</label>
<div class="password-helper">
<input class="formfield" type="password" name="password2" id="password2" required="required" />
</div>
</div>
</div>
</form>
- sass/molecules/_form-password-helper.scss
- js/components/form-password-helper.js
Form notice
You can use two kinds of notices to aid the user filling out your forms.
The first helps setting a password in two password text inputs, the latter being a confirmation field that has to be filled out exactly like the first. Add class .form-notice-password to the first field and .form-notice-password-again to the second. Both fields have to be followed by two corresponding message-elements, possessing the classes .form-notice .form-notice--incomplete and .form-notice .form-notice--success. See the HTML-Tab for details.
The second king of notice displays while the corresponding field is focused and will be hidden as soon as the focus is lost. Use class .form-notice-focused on the input field, followed by the message-element having class .form-notice.
Wrap your <fieldset> in <div class="form-notices"> to make space for the notices.
<div class="form-notices">
<fieldset>
<form action="#" method="get" id="form2">
<div class="formrow">
<div class="formitem">
<label class="label req" for="password1">Password</label>
<input class="formfield form-notice-password" type="password" name="password" id="password1" required="required" />
<div class="form-notice form-notice--incomplete">Your password must contain six or more characters</div>
<div class="form-notice form-notice--success">✔</div>
</div>
</div>
<div class="formrow">
<div class="formitem">
<label class="label req" for="password2">Password again</label>
<input class="formfield form-notice-password-again" type="password" name="password2" id="password2" required="required" />
<div class="form-notice form-notice--incomplete">Please repeat your password in this field</div>
<div class="form-notice form-notice--success">✔</div>
</div>
</div>
</form>
</fieldset>
<fieldset>
<div class="formrow">
<div class="formitem">
<label class="label" for="notice-salutation">Please focus this field</label>
<input class="formfield form-notice-focused">
<div class="form-notice">This notice is shown as long as the field is focused</div>
</div>
</div>
</fieldset>
</div>
- sass/molecules/_form-password-helper.scss
- js/components/form-password-helper.js
Form field groups
Taken from Bootstrap.
Spice up your forms by adding text or buttons before, after or on both sides of any text-based <input> field. Use .formgroup with .formgroup__addon or .formgroup__btn to prepend or append elements to a single textual <input>.
<form action="#" method="get" id="form2">
<div class="formrow">
<div class="formitem">
<label class="label" for="email3">Basic formgroup-addons</label>
<div class="formgroup">
<div class="formgroup__addon">Type your E-Mail-Address here:</div>
<input class="formfield" type="email" name="email3" id="email3" />
<div class="formgroup__addon">@gmail.com</div>
</div>
</div>
</div>
<div class="formrow">
<div class="formitem col-1of2">
<label class="label" for="addoncheck">With checkbox</label>
<div class="formgroup">
<div class="formgroup__addon">
<input type="checkbox" />
</div>
<input class="formfield" type="text" name="addoncheck" id="addoncheck" />
</div>
</div>
<div class="formitem col-1of2">
<label class="label" for="addonradio">With radio button</label>
<div class="formgroup">
<div class="formgroup__addon">
<input type="radio" />
</div>
<input class="formfield" type="text" name="addonradio" id="addonradio" />
</div>
</div>
</div>
<div class="formrow">
<div class="formitem col-1of2">
<label class="label" for="addonbtn">Button</label>
<div class="formgroup">
<input class="formfield" type="text" name="addonbtn" id="addonbtn" placeholder="Suchbegriff" />
<div class="formgroup__btn">
<button class="btn">Los!</button>
</div>
</div>
</div>
<div class="formitem col-1of2">
<label class="label" for="addonbtngrp">Button group</label>
<div class="formgroup">
<div class="formgroup__btn">
<button class="btn">A</button>
<button class="btn">B</button>
<button class="btn">C</button>
</div>
<input class="formfield" type="text" name="addonbtngrp" id="addonbtngrp" />
</div>
</div>
</div>
</form>
- sass/molecules/_form-group.scss
