Sass structure and layout and theme files

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

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

Share on Twitter