Editable .editable

.editable provides style for frontend edit links. This are useful in CMS sites where the site builder wants to provide the admin with an edit link from a specific piece of content on the frontend.

The edit link appears when hovering over the element with an .editable class. The edit link is positioned relative to this element, but if you wish to place it elsewehre, create a <div> with a class of .editable__placer with the edit link inside of that.

This module is for editable content. Put your mouse over this module and you'll see an edit button.

Let's put in another paragraph to make the demo better.

Edit

HTML

<div class="editable">
	<p>This module is for editable content. Put your mouse over this module and you'll see an edit button.</p>
	<p>Let's put in another paragraph to make the demo better.</p>
	<a href="#" class="editable__link">Edit</a>
</div>

SCSS

.editable {
	$block: &;
	position: relative;
	&__link {
		@include transition(opacity .05s ease-in-out);
		position: absolute;
		top: 10px;
		right: 10px;
		opacity: 0;
		pointer-events: none;
		font-size: 0;
		color: transparent;
		z-index: 2;
		&:after {
			@include icon($icon-pencil);
			@include transition(color .1s ease-in-out, border .1s ease-in-out);
			@include border-radius(3px);
			font-size: 16px;
			color: $color-brand;
			padding: 6px;
			border: 1px solid $color-brand;
			background: rgba($color-canvas, .5);
		} // &:after
		&:hover,
		&:focus {
			text-decoration: none;
			&:after {
				background: $color-brand;
				color: $color-canvas;
			}
		} // &:hover
		#{$block}:hover &,
		#{$block}:focus & {
			opacity: 1;
			pointer-events: auto;
		}
	} // &__link
	&__placer {
		position: relative;
	} // &__placer
} // editable

Form layout .form

Form layout code, based on Bootstrap. This module is more complex than others as each variation has more specific markup requirements than simply changing a class on the parent.

Note the included _form-base.scss file used.

.form__group

Each group of inputs need to be wrapped in an element with .form__group. Typically an input/label pair will be wrapped in a .form__group.

Layout options

.form

The most basic form with labels above inputs.

.form--horizontal

A form with the label and input placed beside each other. With this style, each input or other labelless item to be aligned in the main column (submit button, radios, etc), need to be inside a .form__horizontal-input.

.form--inline

This style is useful for forms with few elements (few enough to fit on one line). No additional markup is required.

Checkboxes and radios

These elements should be wrapped in a .form__checkbox or .form__radio.

Inline

Multiple radio or checkbox inputs can be displayed inline by adding a .form__checkbox--inline or .form__radio--inline class.

Example block-level help text here.

Pick one of those options

Available class variations

.form.form--horizontal

Example block-level help text here.

Pick one of those options

.form.form--inline
.form. form__checkbox--inline

HTML

<div class="form">
	<form action="#">
		<div class="form__group">
			<label for="-exampleInputEmail1">Email address</label>
			<div class="">
				<input type="email" class="form__control" id="exampleInputEmail1" placeholder="Email">
			</div>
		</div>
		<div class="form__group">
			<label for="-exampleInputPassword1">Password</label>
			<div class="">
				<input type="password" class="form__control" id="exampleInputPassword1" placeholder="Password">
			</div>
		</div>
		<div class="form__group">
			<label for="-exampleInputFile">File input</label>
			<div class="">
				<input type="file" id="exampleInputFile">
				<p class="form__help">Example block-level help text here.</p>
			</div>
		</div>
		<div class="form__group">
			<div class="">
				<textarea class="form__control" rows="5" placeholder="Textarea"></textarea>
			</div>
		</div>
		<div class="form__group">
			<div class="">
				<select class="form__control form-select">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
		</div>
		<div class="form__group">
			<div class="">
				<select multiple="" class="form__control form-select">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
				<p class="form__help">Pick one of those options</p>
			</div>
		</div>
		<div class="form__group">
			<div class="">
				<div class="form__checkbox form-check">
					<input type="checkbox" class="form-check__control" id="-check1" aria-labelledby="-checklabel1" />
					<label class="form-check__label" for="-check1" id="-checklabel1">Remember me</label>
				</div>
				<div class="form__checkbox form-check">
					<input type="checkbox" class="form-check__control" id="-check2" aria-labelledby="-checklabel2" />
					<label class="form-check__label" for="-check2" id="-checklabel2">Send me spam all the time</label>
				</div>
			</div>
		</div>
		<div class="form__group">
			<div class="">
				<div class="form__radio form-check form-check--radio">
					<input type="radio" name="radios1" class="form-check__control" id="-radio1" aria-labelledby="-radiolabel1" />
					<label class="form-check__label" for="-radio1" id="-radiolabel1">Remember me</label>
				</div>
				<div class="form__radio form-check form-check--radio">
					<input type="radio" name="radios1" class="form-check__control" id="-radio2" aria-labelledby="-radiolabel2" />
					<label class="form-check__label" for="-radio2" id="-radiolabel2">Send me spam all the time</label>
				</div>
			</div>
		</div>
		<div class="">
			<button type="submit" class="button">Submit</button>
		</div>
	</form>
</div>

SCSS

@import 'form-base';

/*
  Form layout
*/

.form {
  @include clearfix;
  $block: &;
  &--inline {
    margin-bottom: -5px;
  } // &--inline
  &__group {
    @include clearfix;
    display: block;
    position: relative;
    margin-bottom: .75em;
    #{$block}--inline & {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 5px;
      margin-right: .5em;
      label {
        margin-right: .25em;
      } // label
      @media (max-width: $breakpoint-mid) {
        display: block;
        width: 100%;
      }
    } // --inline
    #{$block}--horizontal & {
      label {
        @include span(2 first);
        @include small-full;
        text-align: right;
        padding-top: .4em;
        @media (max-width: $breakpoint-small) {
          text-align: left;
          padding-top: inherit;
        }
      } // label
      input[type="checkbox"] + label,
      input[type="radio"] + label {
        padding-top: inherit;
      }
    } // --horizontal
    label {
      margin-bottom: 5px;
    } // label
  } // &__group
  &__control {
    #{$block}--inline & {
      display: inline-block;
      vertical-align: middle;
      width: auto;
      @media (max-width: $breakpoint-mid) {
        display: block;
        width: 100%;
      }
    } // --inline
  } // &__controll
  #{$block}--horizontal &__horizontal-input {
    @include span(10 last);
    @include small-full;
    label {
      float: none;
      width: auto;
      text-align: left;
      padding-left: 0;
      padding-right: 0;
    } // input
  } // &__horizontal-input
  &__help {
    font: {
      size: $font-size-body - 1;
      weight: $font-weight-normal;
    } // font:
    color: lighten($color-base, 30%);
    margin: .5em 0;
  } // &__help
  &__checkbox,
  &__radio {
    &--inline {
      display: inline-block;
      margin-right: 1em;
      &:last-child {
        margin-right: auto;
      } // &:last-child
    } // &--inline
  } // &__checkbox, &__radio
} // form

Checkbox & radio .form-check

CSS only form element replacement for checkbox and radio input types.

Note that the label is immediately after the input as a sibling. The label must use a for attribute, and the input requires an id. This is better for accessibility anyways, and speaking of which, consider adding aria-labelledby to the input and an id to the label.

Available class variations

.form-check.form-check--radio

HTML

<form>
	<div class="form__checkbox form__checkbox--inline form-check">
		<input type="checkbox" name="checkbox-inputs" class="form-check__control" id="checkbox-1" aria-labelledby="checkbox-label-1" />
		<label class="form-check__label" for="checkbox-1" id="checkbox-label-1">Remember me</label>
	</div>
	<div class="form__checkbox form__checkbox--inline form-check">
		<input type="checkbox" name="checkbox-inputs" class="form-check__control" id="checkbox-2" aria-labelledby="checkbox-label-2" />
		<label class="form-check__label" for="checkbox-2" id="checkbox-label-2">Send me spam all the time</label>
	</div>
</form>

SCSS

.form-check {
	$block: &;
	position: relative;
	padding-left: 25px;
	&__control {
		@extend .u-screen-reader;
		&:active + label,
		&:focus + label {
			&:before {
				border-color: darken($color-keyline, 20%);
			} // &:before
		} // &:active + label
		&:checked + label {
			&:after {
				opacity: 1;
			} // &:after
		} // &:checked + label
	} // &__control
	&__label {
		display: inline-block;
		&:before {
			@include transition(border .1s ease-in-out);
			content: '';
			display: block;
			width: 15px;
			height: 15px;
			border: 1px solid $color-keyline;
			position: absolute;
			top: 4px;
			left: 0;
			#{$block}--radio & {
				@include border-radius(8px);
			} // --radio &
		} // &:before
		&:after {
			@include transition(opacity .1s ease-in-out);
			@include icon($icon-check);
			opacity: 0;
			position: absolute;
			left: 1px;
			top: 4px;
			font-size: 15px;
			#{$block}--radio & {
				content: $icon-circle;
				font-size: 9px;
				left: 4px;
				top: 7px;
			} // --radio &
		} // &:after
	} // &__label
} // .form-check

Select .form-select


HTML

<select class="form-select">
	<option value="ipa">IPA</option>
	<option value="lager">Lager</option>
	<option value="saison">Saison</option>
	<option value="stout">Stout</option>
	<option value="american-ale">American pale ale</option>
</select>
<br />
<select class="form-select" multiple>
	<option value="ipa">IPA</option>
	<option value="lager">Lager</option>
	<option value="saison">Saison</option>
	<option value="stout">Stout</option>
	<option value="american-ale">American pale ale</option>
</select>

SCSS

// select,
.form-select {
	$block: &;
	@include border-radius(0);
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid $color-keyline;
	display: block;
	width: 100%;
	background: none;
	padding: .5em;
	&::-ms-expand {
	    display: none;
	}
	&__wrapper {
		position: relative;
		&:after {
			@include icon($icon-sort);
			display: block;
			font-size: 18px;
			line-height: 18px;
			width: 15px;
			height: 15px;
			position: absolute;
			top: 50%;
			right: 5px;
			margin-top: -9px;
		} // &:after
		.lt-ie10 &:after,
		&.form-select--multiple:after {
			content: none;
			display: none;
		} // #{$block}--multiple &
	} // &__wrapper
} // .form-select

JavaScript

/*
* Since you can't use pseduo-elements on `<select>`s, this module creates a wrapper
*/
(function($){
	'use strict';

	function wrapSelects() {

		// Cache 'em!
		var selects = $('.form-select');

		// Wrap them all
		selects.wrap('<div class="form-select__wrapper" />');

		// Loop through each one
		selects.each(function(){

			// Add a class for multiselects
			if ( $(this).attr('multiple') != 'undefined' && $(this).attr('multiple') == 'multiple' ) {
				$(this).parent().addClass('form-select--multiple');
			}

		});
	}

	$(document).on('ready', wrapSelects);

})(jQuery);

Social icons .social

Logo icons for various social media sites. Can be used for "Find us on X site" or sharing links. Logos come from Font Awesome and can be rendered normal or in square versions (using .social--square class).

This module can be used for linking to a site's social accounts, or as sharing links.

When used as sharing links, the js class .js-social-share can be used for the pop. This class has been added to Facebook and Twitter as an example.

A good quick start for creating sare URLs is sharelinkgenerator.com, with more info being available in each site's documentation.

Available class variations

HTML

<ul class="social">
	<li><a href="#" class="social__item social__item--facebook js-social-share">Facebook</a></li>
	<li><a href="#" class="social__item social__item--twitter js-social-share">Twitter</a></li>
	<li><a href="#" class="social__item social__item--google_plus">Google+</a></li>
	<li><a href="#" class="social__item social__item--linkedin">LinkedIn</a></li>
	<li><a href="#" class="social__item social__item--pinterest">Pinterest</a></li>
	<li><a href="#" class="social__item social__item--flickr">Flickr</a></li>
	<li><a href="#" class="social__item social__item--instagram">Instagram</a></li>
	<li><a href="#" class="social__item social__item--youtube">YouTube</a></li>
	<li><a href="#" class="social__item social__item--vimeo">Vimeo</a></li>
</ul>

SCSS

.social {
	$block: &;
	padding: 0; // because of normalize
	margin: 0; // because of normalize
	li {
		@include inline-block;
	}
	&__item {
		@include inline-block;
		font-size: 1px;
		font-size: 0px;
		color: transparent;
		&:hover:after,
		&:focus:after {
			color: $color-brand;
		} // &:hover, &:focus
		&:after {
			@include icon;
			@include transition(color .1s ease-in-out);
			font-size: 26px;
			color: lighten($color-base, 40%);
		} // &:after

		@each $site, $icon in $social_sites {
			&--#{$site}:after {
				content: $icon;
			}
		} // @each $social_sites

		#{$block}--square & {
			@each $site, $icon in $social_sites-square {
				&--#{$site}:after {
					content: $icon;
				}
			} // @each $social_sites-square
		} // .social--square

	} // &-item
} // .social

JavaScript

/*
* This Module provides the popup window functionality for social shares links.
* The class `.js-social-share` is used.
*/
(function($){
	'use strict';

	var socialShare = {

		selector: '.js-social-share',

		init: function() {

			$(socialShare.selector).click(function(event){

				event.preventDefault();

				var href = $(event.target).attr('href'),
					left = (screen.width/2)-(550/2),
					top = (screen.height/2)-(300/2);

				window.open(href, null, "height=300,width=550,resizable=1, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no,top="+top+", left="+left);

			});

		} // init

	};

	$(document).on('ready', socialShare.init());

	return socialShare;

})(jQuery);

Responsive Tables .tables

Column 1 Column 2 Column 3 Column 4
Proin quis tortor orci 134 744 43
Etiam at risus et justo dignissim congue 134 43 2
Donec congue lacinia dui 23 346 33663
This is the table footer with caption!

HTML

<table class="site-table">
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
			<th>Column 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Proin quis tortor orci</td>
			<td>134</td>
			<td>744</td>
			<td>43</td>
		</tr>
		<tr>
			<td>Etiam at risus et justo dignissim congue</td>
			<td>134</td>
			<td>43</td>
			<td>2</td>
		</tr>
		<tr>
			<td>Donec congue lacinia dui</td>
			<td>23</td>
			<td>346</td>
			<td>33663</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="4">This is the table footer with caption!</td>
		</tr>
	</tfoot>
</table>

SCSS

table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 10px;
	border-collapse: collapse;
	border: none;
	line-height: 1.2;
	overflow: visible;
	@media screen and (max-width: $breakpoint-small) {
		@include box-shadow(inset -7px 0 9px -7px rgba(0,0,0,0.4));
		position: relative;
		display: block;
		margin: 10px 0;
		border: 1px solid #EBEEEE;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch; // smoother scrolling
	}// mq:small
	thead, tbody, tfoot {
		@media screen and (max-width: $breakpoint-small) {
			white-space: nowrap;
		}
		th {
			padding: 12px;
			border-bottom: 3px solid $color-keyline;
			border-right: 1px solid $color-keyline;
			text-align: left;
			font-weight: $font-weight-bold;
			&:last-of-type {
				border-right: none;
			}
			.ie8 & {
				border: 1px solid $color-keyline;
				border-bottom: 3px solid $color-keyline;
			}
		}// th
	}// thead, tbody, tfoot
	tfoot {
		margin-bottom: 12px;
		background: $color-canvas-alt;
		background: rgba(darken($color-canvas-alt, 20), .2);
		border-bottom: 1px solid $color-canvas-alt;
		font-size: 12px;
		td {
			padding: 12px;
		}// td
	}// tfoot
	tbody {
		tr {
			border-bottom: 1px solid $color-keyline;
			@media screen and (max-width: $breakpoint-small) {
				white-space: nowrap;
			}// mq:small
		}// tr
		td {
			padding: 12px;
			border-right: 1px solid $color-keyline;
			text-align: left;
			&:last-of-type {
				border-right: none;
			}
			.ie8 & {
				border-left: 1px solid $color-keyline;
				border-right: 1px solid $color-keyline;
			}
		}// td
	}// tbody
}// table

wysiwyg .wysiwyg

Sem Commodo Condimentum

Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Porta Consectetur Adipiscing

Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus.

  • Ullamcorper Fermentum Vestibulum
  • Ornare Ultricies Amet
  • Lorem Mollis Pellentesque Vehicula

Commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Venenatis Dapibus Purus

Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus.

Elit Pharetra Fusce Commodo Euismod

Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Tristique Justo Nibh Mollis

Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus.

  1. Ullamcorper Fermentum Vestibulum
  2. Ornare Ultricies Amet
  3. Lorem Mollis Pellentesque Vehicula

Commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Dapibus Porta Sollicitudin

Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

HTML

<div class="wysiwyg">
	<h2>Sem Commodo Condimentum</h2>
	<img src="https://fillmurray.com/100/100" width="100" height="100" class="alignleft" />
	<p>Etiam porta sem <strong>malesuada magna</strong> mollis euismod. Morbi <em>leo risus</em>, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean <sup>eu</sup> leo quam. Pellentesque <sub>ornare</sub> sem lacinia quam venenatis vestibulum.</p>
	<h3>Porta Consectetur Adipiscing</h3>
	<p>Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus.</p>
	<ul>
		<li>Ullamcorper Fermentum Vestibulum</li>
		<li>Ornare Ultricies Amet</li>
		<li>Lorem Mollis Pellentesque Vehicula</li>
	</ul>
	<p>Commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
	<h4>Venenatis Dapibus Purus</h4>
	<p>Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus.</p>
	<blockquote>Elit Pharetra Fusce Commodo Euismod</blockquote>
	<p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
	<h5>Tristique Justo Nibh Mollis</h5>
	<p>Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus.</p>
	<ol>
		<li>Ullamcorper Fermentum Vestibulum</li>
		<li>Ornare Ultricies Amet</li>
		<li>Lorem Mollis Pellentesque Vehicula</li>
	</ol>
	<p>Commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
	<h6>Dapibus Porta Sollicitudin</h6>
	<img src="https://fillmurray.com/100/100" width="75" height="75" class="alignright" />
	<p>Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>