adanmoses / flex-grid-system

Grid system using Flex and SASS.

flex-grid-system

This SCSS library is designed to create a flexible, responsive grid system.

Codepen here!

The elements

Variables

• $max-columns-per-row: This variable sets the maximum number of columns per row in the grid system.

• $flex-class-selectors: An array of CSS class selectors used within the library. These selectors are important for styling and layout.

• $breakpoints: A map of breakpoints and their corresponding screen sizes. These breakpoints are used to define responsive layouts.

• $flex-gap-flags: A map of the gap spacing flags and their associated spacing values. These flags control the vertical and horizontal spacing between flex items.

Placeholder Selectors

• %grid-item: This placeholder selector sets the default styles for elements with the class .grid-item. It ensures that these columns take up the correct width within the grid. This is where the main formula resides:

%grid-item {
  .grid-item {
    width: 100% !important;
    flex: 0 1 calc(var(--fb-row, 25%) * var(--fb-mod, 1) - (var(--fb-space, 1rem) * var(--fb-columns-1, 1) / var(--fb-columns, 1))) !important;
  }
}

• %grid-parent: Placeholder selector that defines the gap between columns within a row.

• %grid-wrapper: Placeholder selector for elements with the class .grid-wrapper. It defines the gap between groups of columns.

Mixins

• @mixin breakpoints($exclude-default): This mixin generates media queries for each breakpoint defined in the $breakpoints map. It takes an optional parameter to exclude the default breakpoint.

• @mixin flex-spacing($breakpoint-name): This mixin sets spacing values for grid items based on the $flex-gap-flags map. It allows users to control the spacing between columns and groups of columns.

• @mixin flex-col($breakpoint-name): This mixin generates styles for creating flex columns with varying numbers of columns per row. It uses a loop to generate CSS for different column configurations based on the $max-columns-per-row variable.

Body

• @include breakpoints using ($breakpoint-name): This code block utilizes the @mixin breakpoints to define responsive column layouts and spacing for different breakpoints. It calls the @mixin flex-col and @mixin flex-spacing to generate the CSS for these layouts.

The breakdown

imports

We begin by importing the sass:list and sass:map modules.

Additionally, we require the sass:list library to enable the dynamic generation of classes and values through lists and functions, similar to JavaScript arrays and array functions. In the realm of Sass:

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
	.icon-#{$size} {
		font-size: $size;
		height: $size;
		width: $size;
	}
}

breakpoints Mixin

breakpoints Mixin

The breakpoints mixin is a utility that generates media queries for different screen sizes based on the $breakpoints map. It takes an optional argument, $exclude-default, which controls whether the default rules (those not inside a media query) should be generated.

• Conditional Check: If $exclude-default is not set to true, the mixin executes the content block with false as an argument. This generates the default CSS rules that apply when none of the media queries match.

• Iterations and Media Queries: The mixin iterates over the $breakpoints map. For each breakpoint, it generates a media query for screens with a minimum width of the breakpoint size. Inside the media query, it executes the content block with the breakpoint name as an argument. This generates the CSS rules that apply when the media query matches.

• Content Injection: The @content directive is used to inject the content passed into the mixin. This allows you to pass a block of SCSS code when including the mixin, which will be inserted wherever @content appears in the mixin. The argument passed to @content can be used inside the passed block to generate different CSS rules for different breakpoints.

• Responsive Design: This mixin is a powerful tool for generating responsive CSS rules. It allows you to define your breakpoints in one place and then easily generate media queries for those breakpoints. This promotes DRY (Don't Repeat Yourself) principles and makes your SCSS code more maintainable.

flex-col Mixin

The flex-col mixin plays a central role in defining the flex-col class, which is used to create flexible columns within the grid. It takes an optional argument, $breakpoint-name, which represents the viewport breakpoint where this column configuration should apply.

• Iterations and Calculations: Within this mixin, we iterate through each possible number of columns per row, which is controlled by the $max-columns-per-row variable (defaulting to 8). For each iteration, we calculate the width of each column by dividing 100% by the number of columns.
• Selectors: The $selector variable is constructed based on the number of columns, and if a $breakpoint-name is provided, it's also incorporated into the selector. This approach ensures that the generated CSS classes are responsive and specific to the desired viewport.
• Mobile-First Design: It's worth noting that this library follows a mobile-first design approach. The base flex-col class is generated first, and subsequent classes for different viewports (based on min-width) overwrite the base class.
• Conditional Check: To prevent code repetition, we check for the presence of $breakpoint-name and use the breakpoints mixin to conditionally include the base styles (when $exclude-default is not set). This way, each flex-col class only updates the CSS custom property --fb-row.

flex-spacing Mixin

The flex-spacing mixin complements the grid system by allowing users to control the spacing between columns and groups of columns. Like flex-col, it also accepts the $breakpoint-name argument.

• Iteration and Custom Properties: This mixin iterates through the $flex-gap-flags map, which defines spacing flags and their associated values. For each spacing flag, it constructs a $selector, incorporating the $breakpoint-name if provided. This results in class names like flex-spacing--xs--no--gutters.
• Custom Properties: Within each generated class, the mixin sets two custom properties, --flex-gap and --fb-space, both with the same value obtained from $item-spacing. These custom properties control the spacing between grid elements.