<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.