Building a Custom Sass Library for Mobile-first Design

In today's world, it's more important than ever to ensure that your website is optimized for mobile devices. With the majority of internet traffic now coming from smartphones and tablets, it's crucial that your website looks and performs well on these devices. One way to achieve this is through the use of mobile-first design, which prioritizes the design and development for mobile devices before expanding to larger screens. 

In this blog post, we'll be discussing the process of building a custom Sass library for mobile-first design. We'll cover everything from setting up the project to creating a flexible grid system, managing media queries, and creating custom typography. By the end of this post, you'll have the knowledge and tools to create a mobile-first design that is both responsive and user-friendly. This post is aimed for developers of all skill levels who want to improve their mobile-first design skills and create more efficient and maintainable code.

What is mobile-first design

Mobile-first design is a methodology that prioritizes the design and development of a website for mobile devices before expanding to larger screens. This approach is based on the understanding that the majority of internet traffic now comes from mobile devices and that users expect a seamless experience across all devices.

When designing for mobile-first, developers take into consideration the limited screen size, processing power, and network speed of mobile devices. They aim to create a design that is simple, easy to navigate, and optimized for touch-based interactions. This typically involves using a flexible grid system, large fonts, and clear calls to action.

Mobile-first design also means that the website is designed and developed to adapt to different screen sizes, resolutions and orientations through the use of responsive web design techniques, such as media queries, flexbox, and grid layout. This allows the website to look and perform well on a wide range of devices, from smartphones to desktops.

Building a custom Sass library for mobile-first design

Building a custom Sass library for mobile-first design is important for several reasons:

1. Reusability: Creating a custom Sass library allows developers to create reusable components and mixins that can be easily integrated into different projects, saving time and effort in the long run.
2. Consistency: By using a custom Sass library, developers can ensure consistency in the design and development of a website across different pages and devices. This improves the user experience and makes the website more maintainable.
3. Scalability: A custom Sass library can be easily scaled and updated as the website or project grows, making it a more efficient and flexible solution.
4. Performance: A custom Sass library can also be optimized for performance, reducing load times and improving the overall experience for mobile users.
5. Ease of use: Custom Sass libraries are easy to use, which makes it more accessible for developers of all skill levels to work on mobile-first designs.

Setting up the Sass project

Let's set our project up by following these steps:

File Structure: Create a file structure that organizes your Sass files in a logical and easy-to-understand way. This can include folders for mixins, functions, variables, and base styles.

- my-project
  - sass
    - mixins
      - _grid.scss
      - _media-queries.scss
    - functions
      - _typography.scss
    - variables
      - _colors.scss
      - _breakpoints.scss
    - base
      - _reset.scss
      - _typography.scss
    - main.scss

Import dependencies: Import any necessary dependencies such as Sass libraries or frameworks that you will be using in the project. This might include tools like normalize.css.

@import "normalize";

To set up your Sass project for mobile-first design, you'll need to configure the project to use mobile-first media queries and to import the necessary dependencies. This can be done by setting the default breakpoints and including the relevant mixins and functions for creating responsive designs.

$breakpoints: (
  mobile: 320px,
  tablet: 768px,
  desktop: 1024px
);

@mixin breakpoint($point) {
  @if map-has-key($breakpoints, $point) {
    @media (min-width: map-get($breakpoints, $point)) {
      @content;
    }
  }
}

Create a main.scss file: Create a main.scss file that imports all the necessary Sass files and dependencies. This file will act as the entry point for your Sass project.

// Import dependencies
@import "normalize";

// Import variables
@import "variables/colors";
@import "variables/breakpoints";

// Import mixins
@import "mixins/grid";
@import "mixins/media-queries";

// Import functions
@import "functions/typography";

// Import base styles
@import "base/reset";
@import "base/typography";

// Import other styles
@import "layout";
@import "header";
@import "footer";

Compile Sass to CSS: Use a tool like gulp or webpack to compile your Sass files into CSS. This will make your styles available to the browser.

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('sass/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));

Test your website in different devices and browsers to make sure that it looks and performs well on all of them. This can be done manually, by visiting your website on different devices and browsers, or by using automated testing tools such as BrowserStack or Sauce Labs.

It's also important to test your website with different screen sizes and resolutions to ensure that the website looks good and responsive in all the devices. You can use Chrome DevTools, Firefox developer tools or other browser extensions to check the website on different devices and resolutions.

Creating a flexible grid system

A flexible grid system is an essential part of mobile-first design, as it allows developers to create a layout that adapts to different screen sizes and resolutions. Here are the main steps for creating a flexible grid system using Sass:

First, create variables for the number of columns in the grid, the gutter width, and the total width of the grid. These variables will allow you to easily adjust the grid system as needed.

$grid-columns: 12;
$gutter-width: 1rem;
$grid-width: 100%;

Next, create a mixin that generates the CSS for the grid system. This mixin should take in the number of columns and the gutter width as arguments.

@mixin grid($columns, $gutter) {
  width: ($columns * $grid-width) + ($gutter * ($columns - 1));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

Create a mixin that generates the CSS for individual columns in the grid system. This mixin should take in the number of columns that a particular element should span as an argument.

@mixin column($span) {
  flex: 0 0 ($span / $grid-columns * 100%);
  margin-right: $gutter-width;
  &:last-child {
    margin-right: 0;
  }
}

To use the grid and column mixins, apply them to the appropriate elements in your HTML. For example, to create a grid container, you would use the grid mixin and to create columns, you would use the column mixin.

.container {
  @include grid($grid-columns, $gutter-width);
}

.column {
  @include column(3);
}

You can use media queries to adjust the grid system at different breakpoints. For example, you might want to switch to a single column layout at smaller screen sizes.

@include breakpoint(mobile) {
  .container {
    @include grid(1, $gutter-width);
  }
}

Managing media queries

First, create variables for the default breakpoints in your design. These breakpoints will be used to trigger media queries and adjust the layout at different screen sizes.

$breakpoints: (
  mobile: 320px,
  tablet: 768px,
  desktop: 1024px
);

Next, create a mixin that generates the CSS for media queries. This mixin should take in a breakpoint name as an argument and use the corresponding value from the breakpoints variable.

@mixin breakpoint($point) {
  @if map-has-key($breakpoints, $point) {
    @media (min-width: map-get($breakpoints, $point)) {
      @content;
    }
  }
}

To use the media query mixin, apply it to the appropriate elements in your Sass code and include the styles that should be adjusted at that breakpoint inside the mixin.

.container {
  width: 100%;
  @include breakpoint(tablet) {
    width: 80%;
  }
  @include breakpoint(desktop) {
    width: 60%;
  }
}

You can also use the mixin with a mobile-first approach, meaning that you write the styles for the smallest screens first and then override them with media queries for larger screens.

.container {
  width: 100%;
  @include breakpoint(tablet) {
    width: 80%;
  }
  @include breakpoint(desktop) {
    width: 60%;
  }
}

Managing media queries using Sass involves defining breakpoints, creating a media query mixin, using the mixin in Sass code and including the styles that should be adjusted at that breakpoint inside the mixin. Additionally, you can use a mobile-first approach, which means that you write the styles for the smallest screens first and then override them with media queries for larger screens. This allows you to create a responsive design that adapts to different screen sizes and resolutions, providing a seamless experience for users on all devices.

Creating custom typography

Creating custom typography is an important aspect of mobile-first design, as it allows developers to create a consistent and visually appealing design.

First, create variables for the default font family, font sizes, line heights, and colors that will be used in the project. This will allow you to easily adjust the typography as needed.

$default-font-family: 'Open Sans', sans-serif;
$font-sizes: (
  small: 14px,
  medium: 16px,
  large: 18px
);
$line-heights: (
  small: 1.5,
  medium: 1.75,
  large: 2
);
$colors: (
  text: #333,
  headings: #111
);

Next, create a mixin that generates the CSS for typography. This mixin should take in font size and line height as arguments and use the corresponding values from the typography variables.

@mixin typography($size, $line-height) {
  font-family: $default-font-family;
  font-size: map-get($font-sizes, $size);
  line-height: map-get($line-heights, $line-height);
  color: map-get($colors, text);
}

To use the typography mixin, apply it to the appropriate elements in your HTML. For example, to set the typography for a paragraph, you would use the following code:

p {
  @include typography(medium, medium);
}

Similarly create a mixin for headings with different sizes and line-height.

@mixin heading-typography($size, $line-height) {
font-family: $default-font-family;
font-size: map-get($font-sizes, $size);
line-height: map-get($line-heights, $line-height);
color: map-get($colors, headings);
}

You can then use this mixin for different heading elements such as h1, h2, h3 etc. 

h1 {
@include heading-typography(large, large);
}

Conclusion

In conclusion, building a custom Sass library for mobile-first design involves several steps such as setting up the Sass project, creating a flexible grid system, managing media queries, optimizing images, and creating a custom typography. Each step is important in ensuring that the website is optimized for mobile devices and looks good on all the devices. By following these steps, you will have a solid foundation for creating a mobile-first website that is fast, responsive, and visually appealing. Additionally, using Sass allows you to write maintainable and reusable code, which makes it easier to scale and update your website in the future.