<section class="container">
<form action="/" method="post" class="form">
<h1>Form title</h1>
<div class="grid-row">
<div class="grid-row__col grid-row__col--sm-6">
<label for="input-username" class="form__label">Username</label>
<input type="text" id="input-username" class="form__input" placeholder='Your Nick'/>
</div>
</div>
<div class="grid-row">
<div class="grid-row__col grid-row__col--sm-6">
<label for="input-name" class="form__label">Name</label>
<input type="text" id="input-name" class="form__input" placeholder='Jon'/>
</div>
<div class="grid-row__col grid-row__col--sm-6">
<label for="input-surname" class="form__label form__label--error">surname</label>
<input type="text" id="input-surname" class="form__input form__input--error" placeholder='Doe'/>
</div>
</div>
<div class="grid-row">
<div class="grid-row__col grid-row__col--sm-6">
<label for="input-email" class="form__label">E-mail</label>
<input type="email" id="input-email" class="form__input" placeholder='your-email@example.com'/>
</div>
<div class="grid-row__col grid-row__col--sm-6">
<label for="input-reemail" class="form__label">Confirm e-mail</label>
<input type="email" id="input-reemail" class="form__input" placeholder='your-email@example.com'/>
</div>
</div>
<div class="form__button">
<button class="button--submit">Send</button>
</div>
</form>
</section>
// Variables
$breakpoint-x-small: 480px;
$breakpoint-smaller: 640px;
$breakpoint-small: 768px;
$breakpoint-medium: 992px;
$breakpoint-large: 1200px;
$breakpoints: (
'x-small': (min-width: $breakpoint-x-small),
'x-small-max': (max-width: $breakpoint-x-small - 1),
'smaller': (min-width: $breakpoint-smaller),
'smaller-max': (max-width: $breakpoint-smaller - 1),
'small': (min-width: $breakpoint-small),
'small-max': (max-width: $breakpoint-small - 1),
'medium': (min-width: $breakpoint-medium),
'medium-max': (max-width: $breakpoint-medium - 1),
'large': (min-width: $breakpoint-large),
'large-max': (max-width: $breakpoint-large - 1),
'landscape': (orientation: landscape),
'portrait': (orientation: portrait),
);
$breakpoints-grid: (
'xsm': 'x-small',
'sml': 'smaller',
'sm': 'small',
'md': 'medium',
'lg': 'large'
);
$grid-col-count: 12;
$global-glutter: 20px;
// Colors
$color-black: #000000;
$color-white: #111111;
$color-grey: #666666;
$color-blue-navy: #314159;
$color-blue: #007aff;
$color-red: #E31415;
// Mixins
@mixin respond-to($breakpoint) {
$raw-query: map-get($breakpoints, $breakpoint);
@if $raw-query {
$query: if(type-of($raw-query) == 'string', unquote($raw-query), inspect($raw-query));
@media #{$query} {
@content;
}
} @else {
@error 'No value found for `#{$breakpoint}`. '
+ 'Please make sure it is defined in `$breakpoints` map.';
}
}
@mixin clearfloat {
&:after {
content: '';
clear: both;
display: table;
}
}
// Box sizing reset
* {
box-sizing: border-box;
&:before,
&:after {
box-sizing: inherit;
}
}
// Container
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: #{$global-glutter/2};
padding-right: #{$global-glutter/2};
@include respond-to('small') {
width: calc(#{$breakpoint-small});
}
@include respond-to('medium') {
width: calc(#{$breakpoint-medium});
}
@include respond-to('large') {
width: calc(#{$breakpoint-large});
}
&--full {
width: 100%;
}
}
// Grid styles
.grid-row {
@include clearfloat();
margin-left: #{-1*$global-glutter/2};
margin-right: #{-1*$global-glutter/2};
width: auto;
&__col {
float: left;
padding-left: #{$global-glutter/2};
padding-right: #{$global-glutter/2};
width: 100%;
@each $name, $breakpoint in $breakpoints-grid {
@include respond-to($breakpoint) {
@for $i from 1 through $grid-col-count {
&--#{$name}-#{$i} {
width: #{($i/$grid-col-count)*100%};
}
}
&--#{$name}-hidden {
display: none;
}
}
}
}
}
.button {
&--submit {
display: inline-block;
margin: 5px 0;
padding: 5px 10px;
}
}
// Register form styles
.form {
&__label {
display: block;
font-weight: bold;
&--error {
color: $color-red;
}
}
&__input {
border: 1px solid $color-grey;
width: 100%;
padding: 5px;
margin-bottom: $global-glutter;
outline: 0;
&:hover {
box-shadow: 0 1px 2px 0 rgba($color-blue, 0.2);
}
&:focus {
box-shadow: 0 1px 3px 0 rgba($color-blue, 0.5);
}
&--error {
border-color: $color-red;
}
}
&__button {
text-align: right;
&--center {
text-align: center;
}
&--left {
text-align: left;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.