11. The 7-1 Pattern

Maybe we have good names for our classes using a nomenclature (as we learned with BEM) but we still don't have a pattern when it comes to distributing the styles efficiently. The question would be, how do we organize the CSS files? We need them to have a self-explanatory, effective structure that's easy to understand for other colleagues in the profession. We must move away from spaghetti code or monolithic structures (everything in a single file). The solution is to use a CSS architecture pattern, specifically the famous 7-1 Pattern. A very clear structure, extraordinarily organized that any Web Designer can understand at a glance.

However, before applying it, we'll need to understand how Split Media works. A technique that will let us create pages with an adaptive design (responsive design) in a simple and scalable way.

Split Media

Split Media is a technique based on splitting the styles across several CSS files. Each of them will handle one screen size. This way, if we want to change the design of an element at a specific screen size, we'll only have to modify the CSS file that corresponds to it.

Let's create a simple example with 3 files:

  • base.css: Will contain the general styles that will be applied on all pages.
  • mobile.css: Will contain the styles that will be applied on smartphones.
  • desktop.css: Will contain the styles that will be applied on desktop.

The goal will be to give different styles to a title (<h1>) depending on the resolution. Specifically, it will be red on smartphone and orange on desktop.

First we create a CSS file named base.css, and inside it the general styles that all titles on all pages will have.

h1 {
    font-family: arial;
    text-align: center;
    padding: 1rem;
}

Now a CSS file named mobile.css and inside it the styles it will have only on smartphones.

h1 {
    color: red;
}

Then we'll declare another CSS file named desktop.css with the following content.

h1 {
    color: orange;
}

Now we write the HTML that will call the CSS files. To do this we'll use the <link> tag with the media attribute, which will let us indicate the screen size at which the CSS file will be applied.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Split media example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
        <!-- CSS files -->
        <link href="base.css" rel="stylesheet">
        <link href="mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
        <link href="desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
        <!-- End CSS files -->
    </head>
    <body>
        <h1>Gravida arcu ac tortor.</h1>
    </body>
</html>

In the end we'll get the following result.

Easy, right? Well, now let's complicate it a little more. Imagine we want the title to be red on smartphone and orange on desktop but blue on tablet. To do this we'll need to create a new CSS file named tablet.css and inside it the styles it will have only on tablet.

h1 {
    color: blue;
}

Now we modify the HTML so it calls the new CSS file.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Split media example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
        <!-- CSS files -->
        <link href="base.css" rel="stylesheet">
        <link href="mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
        <link href="tablet.css" rel="stylesheet" media="all and (min-width: 600px) and (max-width: 1024px)">
        <link href="desktop.css" rel="stylesheet" media="all and (min-width: 1024px)">
        <!-- End CSS files -->
    </head>
    <body>
        <h1>Gravida arcu ac tortor.</h1>
    </body>
</html>

Instead of filling our CSS files with media queries, we've created a CSS file for each screen size. This way, if we want to change the design of an element at a specific screen size, we'll only have to modify the CSS file that corresponds to it.

Now let's apply the 7-1 pattern to organize our CSS files using Split Media. We'll start with a reduced version that will help us understand the usefulness of each file.

7-1 Pattern lite

We'll use a reduced version to get familiar with the 7-1 pattern. Although it can perfectly well be used for a small site that doesn't require much effort.

The folder structure will be as follows:

sass/
|
|  |
|– _base.sass
|– _header.sass
|– _footer.sass
|– _mixins.sass
|– _typography.sass
|– _variables.sass
|– pages
|   |– _home.sass
|   |– _contact.sass
|   ...
|– vendors/
|   |– _bootstrap.sass
|   |– _jquery-ui.sass
|   ...
`– main.sass

The main.sass file will be in charge of importing all the Sass files.

@use "base"
@use "header"
@use "footer"
@use "mixins"
@use "typography"
@use "variables"
@use "pages/home"
@use "pages/contact"
@use "vendors/bootstrap"
@use "vendors/jquery-ui"

The rest of the Sass files will be in charge of holding the styles of each section.

  • _base.sass: the styles that all pages will share.
  • _header.sass: the header styles.
  • _footer.sass: the footer styles.
  • _mixins.sass: the Sass mixins.
  • _typography.sass: the font/typography styles.
  • _variables.sass: the variables.
  • _pages/home.sass: the home page styles.
  • _pages/contact.sass: the contact page styles.
  • _vendors: the styles of external frameworks/libraries.

If you want to download templates for this pattern, I'll give you a few options:

7-1 Pattern with Split Media

Now that we know how to create sites with Split Media and with the 7-1 Lite pattern, let's combine them to create a professional website.

The 7-1 pattern only has 2 rules:

  • Everything will be split across 7 folders (hence its name).
  • The main.sass file must sit at the same level as the folders and will import all the project's Sass files.

The folder structure will be as follows:

sass/                    # Folder where all our Sass will be
|
|  |
|– base/                 # Folder with the styles that all pages will share.
|   |– _reset.sass       # Reset/normalize
|   |– _typography.sass  # Fonts/typography
|   ...                  # Etc…
|
|– components/           # Components folder
|   |– _buttons.sass     # Buttons
|   |– _carousel.sass    # Carousels
|   |– _modal.sass       # Modals
|   |– _dropdown.sass    # Dropdowns
|   ...                  # Etc…
|
|– layout/               # Folder with the blocks
|   |– _navigation.sass  # Navigations/Menus
|   |– _grid.sass        # Layout helpers
|   |– _header.sass      # Header
|   |– _footer.sass      # Footer
|   |– _sidebar.sass     # Side menu
|   |– _forms.sass       # Forms
|   ...                  # Etc…
|
|– pages/                # Folder with the styles specific to each page
|   |– _home.sass        # Home page
|   |– _contact.sass     # Contact page
|   ...                  # Etc…
|
|– themes/               # Folder with the themes
|   |– _theme.sass       # Main theme
|   |– _admin.sass       # Admin theme
|   ...                  # Etc…
|
|– utils/                # Folder with utilities and helpers
|   |– _variables.sass   # Variables
|   |– _functions.sass   # Sass functions
|   |– _mixins.sass      # Sass mixins
|   |– _helpers.sass     # Helper classes
|
|– vendors/              # Folder with CSS external to us
|   |– _bootstrap.sass   # Bootstrap
|   |– _jquery-ui.sass   # jQuery UI
|   ...                  # Etc…
|
|
`– main.sass             # The one in charge of importing all the Sass

Our main.sass won't have a single line of CSS, it will only import. It will stay, as in the previous Lite example, importing everything as follows:

@use "base/reset"
@use "base/typography"
@use "components/buttons"
@use "components/carousel"
...

If you need a template you can download the 7-1 template with Sass.

And now that you know the pattern, let's see how to use it with Split Media.

The folder structure will be as follows:

sass/
|
|  |
|– abstracts/
|   |– _mixins.sass
|   |– _variables.sass
|– base/
|   |– _base.sass
|   |– _fonts.sass
|   |– _helpers.sass
|   |– _typography.sass
|– mobile/
|   |– layout/
|   |   |– _footer.sass
|   |   |– _header.sass
|   |– components/
|   |   |– _alert.sass
|   |   |– _button.sass
|   |   |– ...
|   |– pages/
|   |   |– _home.sass
|   |   |– _contact.sass
|   |   |– ...
|– desktop/
|   |– layout/
|   |   |– _footer.sass
|   |   |– _header.sass
|   |– components/
|   |   |– _alert.sass
|   |   |– _button.sass
|   |   |– ...
|   |– pages/
|   |   |– _home.sass
|   |   |– _contact.sass
|   |   |– ...
|– themes/
|   |– _dark.sass
|   |– _light.sass
|– vendors/
|   |– _normalize.sass
|   |– _owl-carousel.sass
|   ...
`– mobile.sass
`– desktop.sass

And the final HTML would be:


<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Split media</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
        <link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
    </head>
    <body>
        <h1>Gravida arcu ac tortor.</h1>
    </body>
</html>

To differentiate the styles of each device, mobile.sass and desktop.sass will import the styles of each device.

mobile.sass:

@charset "UTF-8"

// Vendors

@use "vendors/normalize"

// Base stuff

@use "base/base"
@use "base/fonts"
@use "base/typography"
@use "base/helpers"

// Layout-related sections

@use "mobile/layout/header"
@use "mobile/layout/footer"

// Components

@use "mobile/components/alert"
@use "mobile/components/button"

// Page-specific styles

@use "mobile/pages/home"
@use "mobile/pages/contact"

// Themes

@use "themes/light"
@use "themes/dark"

desktop.sass:

@charset "UTF-8"

// Vendors

@use "vendors/normalize"

// Base stuff

@use "base/base"
@use "base/fonts"
@use "base/typography"
@use "base/helpers"

// Layout-related sections

@use "desktop/layout/header"
@use "desktop/layout/footer"

// Components

@use "desktop/components/alert"
@use "desktop/components/button"

// Page-specific styles

@use "desktop/pages/home"
@use "desktop/pages/contact"

// Themes

@use "themes/light"
@use "themes/dark"

If you want to download templates for this pattern, you can do so at Complete 7-1 Pattern with Split Media.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Desafíos de programación atemporales y multiparadigmáticos

Desafíos de programación atemporales y multiparadigmáticos

Te encuentras ante un librillo de actividades, divididas en 2 niveles de dificultad. Te enfrentarás a los casos más comunes que te puedes encontrar en pruebas técnicas o aprender conceptos elementales de programación.

Buy the book

Will you buy me a coffee?

This is how I keep writing without ads or paywalls.

Ko-fi donationsSure, it's on me!

Comments

There are no comments yet.