Lesson 9: Final Project & Best Practices

Your Final Project

You are going to build a complete grid framework that you can use in real projects. This combines everything you have learned across all 9 lessons.

Project Structure

your-grid-system/
├── scss/
│   ├── _config.scss          # Configuration & variables
│   ├── _functions.scss       # Helper functions
│   ├── _mixins.scss          # Reusable mixins
│   ├── _container.scss       # Container utilities
│   ├── _grid.scss            # Grid utilities
│   ├── _columns.scss         # Column utilities
│   ├── _gaps.scss            # Gap utilities
│   ├── _responsive.scss      # Responsive utilities
│   └── grid-system.scss      # Main import file
├── dist/
│   └── grid-system.css       # Compiled CSS
└── package.json

Step 1: Configuration

// _config.scss
// =============

// Grid Settings
$grid-columns: 12 !default;
$container-padding: 16px !default;

// Breakpoints
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px
) !default;

// Spacing Scale
$spacing: (
  0: 0,
  1: 4px,
  2: 8px,
  3: 12px,
  4: 16px,
  5: 20px,
  6: 24px,
  8: 32px,
  10: 40px,
  12: 48px
) !default;

// Container Max Widths
$containers: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px
) !default;

// Features to Enable/Disable
$enable-container: true !default;
$enable-grid: true !default;
$enable-columns: true !default;
$enable-gaps: true !default;
$enable-responsive: true !default;

Step 2: Helper Functions

// _functions.scss
// ===============

@function breakpoint($name) {
  @return map-get($breakpoints, $name);
}

@function spacing($key) {
  @return map-get($spacing, $key);
}

@function container($name) {
  @return map-get($containers, $name);
}

Step 3: Essential Mixins

// _mixins.scss
// ============

@mixin container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: $container-padding;
  padding-right: $container-padding;
}

@mixin grid($columns: 1, $gap: 0) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

@mixin responsive($breakpoint-name) {
  @media (min-width: breakpoint($breakpoint-name)) {
    @content;
  }
}

Step 4: Core Components

// _container.scss
// ===============

@if $enable-container {
  .container {
    @include container;
    
    @each $name, $width in $containers {
      @include responsive($name) {
        max-width: $width;
      }
    }
  }
  
  .container-fluid {
    @include container;
  }
}

// _grid.scss
// ==========

@if $enable-grid {
  .grid {
    display: grid;
  }
  
  // Generate grid-cols-* classes
  @each $cols in (1, 2, 3, 4, 6, 12) {
    .grid-cols-#{$cols} {
      grid-template-columns: repeat($cols, 1fr);
    }
  }
  
  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

// _columns.scss
// =============

@if $enable-columns {
  @for $i from 1 through $grid-columns {
    .col-span-#{$i} {
      grid-column: span $i / span $i;
    }
  }
  
  .col-span-full {
    grid-column: 1 / -1;
  }
}

// _gaps.scss
// ==========

@if $enable-gaps {
  @each $name, $size in $spacing {
    .gap-#{$name} {
      gap: $size;
    }
  }
}

// _responsive.scss
// ================

@if $enable-responsive {
  @each $bp-name, $bp-value in $breakpoints {
    @media (min-width: $bp-value) {
      @each $cols in (1, 2, 3, 4) {
        .#{$bp-name}\:grid-cols-#{$cols} {
          grid-template-columns: repeat($cols, 1fr);
        }
      }
      
      .#{$bp-name}\:hidden {
        display: none;
      }
    }
  }
}

Step 5: Main Import File

// grid-system.scss
// ================

@import 'config';
@import 'functions';
@import 'mixins';
@import 'container';
@import 'grid';
@import 'columns';
@import 'gaps';
@import 'responsive';

Step 6: Build Scripts

// package.json
{
  "name": "my-grid-system",
  "version": "1.0.0",
  "scripts": {
    "dev": "sass --watch scss:dist",
    "build": "sass --style=compressed scss/grid-system.scss:dist/grid-system.min.css",
    "size": "ls -lh dist/grid-system.min.css"
  },
  "devDependencies": {
    "sass": "^1.69.0"
  }
}

Professional Best Practices

1. File Organization

• Separate concerns into different files
• Use underscore prefix for partials (_file.scss)
• Group related utilities together
• Keep configuration separate from logic

2. Naming Conventions

• Use $variable-names in kebab-case
• Prefix mixins with action: @mixin create-grid
• Function names describe what they return: @function get-spacing
• Class names follow BEM or utility pattern

3. Documentation

// Good documentation example
/// Creates a responsive grid container
/// @param {Number} $columns - Number of columns
/// @param {String} $gap - Gap size from spacing scale
/// @example
///   .gallery {
///     @include responsive-grid(3, 'md');
///   }
@mixin responsive-grid($columns, $gap: 4) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: spacing($gap);
}

4. Default Values

// Always use !default for config variables
$grid-columns: 12 !default;
$enable-responsive: true !default;

// This allows users to override:
// _my-overrides.scss
$grid-columns: 16;
@import 'grid-system';

5. Performance Checklist

• Generate only needed utilities
• Use compression in production
• Limit responsive breakpoints
• Keep compiled CSS under 50KB
• Use PurgeCSS if needed

Testing Your Grid System

<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/grid-system.min.css">
</head>
<body>
  <div class="container">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="col-span-1">Column 1</div>
      <div class="col-span-1">Column 2</div>
      <div class="col-span-1">Column 3</div>
    </div>
  </div>
</body>
</html>

Next Steps

You have completed the SCSS Grid course. Here is what to do next:

1. Build the project from this lesson
2. Test it in a real website
3. Share it on GitHub
4. Try the Gridlock Holmes generator with the SCSS format
5. Explore advanced SCSS features (maps, modules, partials)
6. Join the community and share your work

Resources for Continued Learning

• Sass documentation (sass-lang.com)
• CSS Grid reference on MDN
• Grid by Example, a library of CSS Grid patterns
• Can I Use, for checking browser support