skip to main content

Following on from this post ‘Separate Your Layout and skin Sass files’ I put together a larger working example to further demonstrate the theory.

View demo

Base stylesheet – style.scss

Style.scss is used to pull in all the usual folders for base styles, framework mixins, modules and vendor includes. There is also a folder for each page or section of the website which is broken down into 3 sections, layout, theme and responsive.

/* DEMO STYLESHEET
==========================================================================


/* VENDOR - Default fall backs & external .scss files.
========================================================================== */

	@import 'vendor/_normalize.scss';


/* BASE - Base variable file along with starting point mixins & placeholders.
========================================================================== */

	@import 'base/_base.scss';
	@import 'base/_mixins.scss';
	@import 'base/_placeholders.scss';


/* FRAMEWORK - Structure & layout files including the Maze grid function.
========================================================================== */

	@import 'framework/_grid.scss';
	@import 'framework/_breakpoints.scss';


/* MODULES - Reusable site elements.
========================================================================== */

	@import 'modules/_buttons.scss';
	@import 'modules/_lists.scss';
	@import 'modules/_tabs.scss';


/* PRODUCT PAGE - Unique product page styles
========================================================================== */

	@import 'product-page/_layout.scss';
	@import 'product-page/_theme.scss';
	@import 'product-page/_responsive.scss';


/* CATEGORY PAGE - Unique category page styles
========================================================================== */

	@import 'category-page/_layout.scss';
	@import 'category-page/_theme.scss';
	@import 'category-page/_responsive.scss';


Layout stylesheet – layout.scss

This stylesheet holds all of the structural css for a specific page or section of a website. separating the wireframe from the styling css keeps it clean and easy to edit/maintain.

/* LAYOUT STYLES
==========================================================================

// Seperated layout styles to create the page framework.


/* CONTAINERS
========================================================================== */

.full-width{
	margin: 30px auto;
	padding: 0 10px;
  @include clearfix;
}

.wrapper{
	margin: 30px auto;
	padding: 0 10px;
	@include clearfix;
}


/* 3 COLUMNS
========================================================================== */

.logo {
	@include grid(3);
	@include breakpoint(tablet, 12);
}

.search {
	@include grid(6);
	@include breakpoint(tablet, 6);
}

.contact {
	@include grid(3);
	@include breakpoint(tablet, 6);
}


/* 4 COLUMNS
========================================================================== */

.tab {
	@include grid(3);
	@include breakpoint(desktop, 6);
}


/* EQUAL HEIGHT
========================================================================== */

.equal-height {
	@include grid(4);
	@include breakpoint(tablet, 12);
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}

/* NESTED
========================================================================== */

.nest-left{
	@include grid(6);
	@include breakpoint(desktop, 12);
}

.nest-right{
	@include grid(6);
	@include breakpoint(desktop, 12);
}

.nest-right-one{
	@include grid(6);
	@include breakpoint(tablet, 12);
}

.nest-right-two{
	@include grid(6);
	@include breakpoint(tablet, 12);
}


/* GRID - CENTERED
========================================================================== */

.center-child {
	@include grid(2);
}

.center-child2 {
	@include grid(4);
}

Skin stylesheet – theme.scss

The theme sass file contains all of the styling or theme css for a specific page or section of a website.

/* THEME STYLES
==========================================================================

// Page specific styles and theming.


/* TYPE
========================================================================== */

%header {
	text-align: center;
	font-family: ozBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color:#fff;
}

h1 {
	@extend %header;
	font-size: 36px;
	line-height: 36px;
	margin-bottom:20px;
}

h2,h3, h4 {
	@extend %header;
	font-size: 26px;
	line-height: 26px;
	margin-bottom:20px;
}

h6 {
	@extend %header;
	font-size: 20px;
	line-height: 20px;
	margin-bottom:40px;
	margin-top:0;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size:16px;
}


/* 3 COLUMNS
========================================================================== */

.logo, .search, .contact {
	height:70px;
	background: #fff;
	text-align:center;
}


/* 4 COLUMNS
========================================================================== */

.tab {
	height:70px;
	background: #fff;
	text-align:center;
}


/* EQUAL HEIGHT
========================================================================== */

.equal-height {
	background: #fff;
	text-align:center;
	padding-top:25px;
	padding-right:10px;
	padding-left:10px;
}

/* NESTED
========================================================================== */

.nest-left {
	height:90px;
	background: #fff;
}

.nest-right {
	background: #fff;
	padding:10px;
}

.nest-right-one {
	height:70px;
	background: #f3f3f3;
	border:solid 1px #e3e3e3;
}

.nest-right-two {
	height:70px;
	background: #f3f3f3;
	border:solid 1px #e3e3e3;
}

/* CENTERED
========================================================================== */

.center-child, .center-child2 {
	height: 100px;
	background:#fff;
}

Media query stylesheet – respond.scss

The media query sass file holds all the device dependant css. Keeping this in a separate file to the skin and layout css allows for specific device styles to be located and edited easily.

/* RESPONSIVE STYLES
==========================================================================

// Media queries arranged in size order largest to smallest.


/* WIDE SCREEN
========================================================================== */
@media (min-width:($break-desktop))  {
	body {
		background:#ffa600;
		p {
			color:#ffa600;
		}
	}
}

/* DESKTOP
========================================================================== */

@media (max-width:$break-desktop) and (min-width : $break-tablet) {
	body {
		background:#82d2e5;
		p{
			color:#82d2e5;
		}
	}
}

/* TABLET
========================================================================== */

@media (max-width:$break-tablet) and (min-width : $break-mobile) {
	body {
		background:#c1d72e;
		p{
			color:#c1d72e;
		}
	}
	.equal-height{
		margin-bottom: 0;
		padding-bottom: 0;
	}
}


/* MOBILE
========================================================================== */

@media (max-width:$break-mobile) {
	body {
		background:#333;
		p{
			color:#333;
		}
	}
	.equal-height{
		margin-bottom: 0;
		padding-bottom: 0;
	}
}