Sass structure – layout and theme files

Friday, June 13th, 2014

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;
	}
}

Posted by Cathy Dutton