Flexya

Flexya is a super simple CSS grid system based on flex and heavily inspired by Bootstrap's grid system.

It features a configurable amount of columns, a configurable grid-based implementation and easy-to-modify breakpoints.

Installation

npm i flexya

Usage

To include Flexya, just import the flexya.scss file in your SCSS.

@import "variables";
@import "~flexya/src/flexya.scss";

Helpers

Flexya ships with some helpful mixins to help keep your code maintainable.

breakpoint-up($breakpoint)

A mixin media query that applies for the given breakpoint and above.

@include breakpoint-up("desktop") {
    .row {
        color: red;
    }
}

Translates into:

@media (min-width: 1200px) {
    .row {
        color: red;
    }
}

breakpoint-down($breakpoint)

A mixin media query that applies for the given breakpoint and below.

@include breakpoint-down("desktop") {
    .row {
        color: red;
    }
}

Translates into:

@media (max-width: 1199.99px) {
    .row {
        color: red;
    }
}

breakpoint-only($breakpoint)

A mixin media query that applies only for the given breakpoint.

@include breakpoint-only("desktop") {
    .row {
        color: red;
    }
}

Translates into:

@media (min-width: 1200px) and (max-width: 1399.99px) {
    .row {
        color: red;
    }
}

breakpoint-between($lowerBreakpoint, $upperBreakpoint)

A mixin media query that applies only between the two given breakpoints.

@include breakpoint-between("tablet", "desktop") {
    .row {
        color: red;
    }
}

Translates into:

@media (min-width: 768px) and (max-width: 1199.99px) {
    .row {
        color: red;
    }
}

Breakpoint Modes

All of the breakpoints above support a mode argument as the second (or third in the case of breakpoint-between) argument which allows you to define if rules should only apply for touch enabled or non-touch enabled devices. If this argument is omitted, default styling will apply.

@include breakpoint-up("desktop", "touch") {
    .row {
        color: red;
    }
}
@include breakpoint-up("desktop", "notouch") {
    .row {
        color: blue;
    }
}

Translates into:

@media (min-width: 1200px) and (hover: none) and (pointer: coarse) {
    .row {
        color: red;
    }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .row {
        color: blue;
    }
}

Customization

Changing the breakpoints

You can alter any of the breakpoints used by Flexya as well as the class names generated by adding the following to your SCSS file before importing Flexya:

// Breakpoints
$breakpoints: (
    "mobile":           ("min-width": 0,      "prefix": false),
    "large-mobile":     ("min-width": 576px,  "prefix": "lm"),
    "tablet":           ("min-width": 768px,  "prefix": "t"),
    "landscape-tablet": ("min-width": 992px,  "prefix": "lt"),
    "desktop":          ("min-width": 1200px, "prefix": "d"),
    "large-desktop":    ("min-width": 1400px, "prefix": "ld")
);

// Base column class name
$columnClass: "col";

// Base offset class name
$offsetClass: "offset";

You are welcome to rename any of the breakpoints, as well as the prefixes as these will correctly update the next time you build your CSS. You can also add or remove breakpoints as you see fit!

Changing the column count

Need more columns, or want to remove some to reduce file size? Simply include the following above where you import Flexya.

// How many columns to put into .row and .grid
$columnCount: 12;

Enable CSS Grid

Want to use the CSS grid? Enable it with the following:

// Enable grid class generation
$enableGrid: true;

Note that CSS grid is disabled by default.

Utilities

Utilities are useful classes that you can generate to provide you with handy, breakpoint specific layout functions throughout your project. You can add a utility by modifying the $utilities map before including flexya:

$utilities: (
    "text-align": (
        property: text-align,
        class: text,
        values: (
            start:  left,
            end:    right,
            center: center
        )
    )
);

This utility system replaces the one that was previously present in v1.6.0 and below.