Griddle v0.3.0 comes with a number of bug fixes and improvements! More native CSS variables have been added for you to configure Griddle without using SCSS! You can configure things like the heading sizes, column/row gaps, spacing, and more by overwriting Griddle's variables by creating :root{ ... } declaration in a .css file in your project.

The new variables are:

:root {
  /* Typography */
  --h1: 4rem;
  --h2: 3.5rem;
  --h3: 3rem;
  --h4: 2.5rem;
  --h5: 2rem;
  --h6: 1.5rem;
  --root-font-size: 16px; /* REM values are based on this */
  --root-line-height: 2rem;

  /* Misc */
  --container-width: 1400px;
  --border-radius: .25rem;
  --border-radius-md: .5rem;
  --border-radius-lg: .75rem;
  --spacing: 1rem;           /* Used for .has-m and .has-p classes */
  --spacing-md: 1.5rem; /* Used for .has-m-md and .has-p-md classes */
  --spacing-lg: 2rem;      /* Used for .has-m-lg and .has-p-lg classes */

  /* Grid Gaps */
  --col-gap: 1rem;
  --col-gap-md: 1.5rem;
  --col-gap-lg: 2rem;

  --row-gap: 1rem;
  --row-gap-md: 1.5rem;
  --row-gap-lg: 2rem;
}

• Refactored code with a new file structure
• New documentation in README
• New SCSS functions: variable and get_first_chars
• Fixed bug in display classes that previously had only displayed as block regardless of the display type class you used.
• Removed Google Fonts @import and font-family declaration in the source code
• New grid.css and grid-plus.scss compiled files
• Upgraded dependencies to work with the latest version of Node.js.
• Removed _config.yml file for GitHub Pages

New Compiled Files

Grid Plus

Version 0.3.0 comes with a new compiled .css file in the dist directory. Grid plus is Griddle's grid plus additional utility classes like is-rtl, etc. It is the old dist/grid.css file from v0.2.2.

Grid

This is the core of Griddle. Its the grid itself. No extra utility classes just all your is-grid, is-col-, and is-row- classes. Just an option for you if you want to use the grid and nothing else.

Thank you all for the support so far. If you'd like to contribute, please fork and PR your improvements!

Version 0.2.2 ships with some bug fixes and improvements.

• Rearranged the grid loop in grid.scss to fix is-col classes overwriting each other.
• Updated the default stacking breakpoint to accomodate for the new xxl breakpoint from the last release.

Griddle v0.2.1 comes with small grid bug fixes and improvements. Most notably the .is-rtl and .is-ltr classes. Dependencies were updated per GitHub suggestions; these are development dependencies and will not affect Griddle in production.

• .is-ltr class now has the correct value
• New breakpoint xxl for extra extra large devices (min-width: 1400px).
• Updated development dependencies per GitHub suggestions.

Theme Improvements

A few improvements have been made to make configuration of Griddle possible for CSS users. All SASS variables have been replaced with CSS variables.

You are now able to import the entire Griddle library and configure the theme colors used. To configure the color variables: add the following to the top of your project's CSS file(s) and modify the HEX values as you see fit.

:root {
  --primary: #016575;
  --secondary: #03414b;
  --tertiary: #003242;
  --cta: #EB8A5E;
  --white: #ffffff;
  --black: #000000;
  --grey: #ececec;
  --success: #48C774;
  --warning: #FFDD57;
  --danger: #F14668;
  --info: #3298DC;
}

Grid Improvements

In version v0.1.0 grid items defaulted to twelve (12) columns unless defined otherwise. In v0.2.0, grid items default to twelve (12) columns wide on xs and sm. When resized to lg and xl, grid items will now span to one (1) column. Unless specified otherwise, of course.

Griddle

Griddle is a CSS framework created with CSS Grid and Flexbox. It's easy to get started with Griddle, especially if you are familiar with how other CSS Frameworks work. At it's core, is CSS Grid. The CSS specification that is quickly becoming the new standard when creating UI layouts and grids. If you do not know, CSS Grid, no worries. You can start creating intrinsic layouts for all modern browsers with just a few classes.

Overview

Columns

With Griddle, you can create standard to complex grid layouts with just a few classes. All of Griddle's classes are prefixed with .is- or .has-. This is done for two reaosns. 1. For it to read like English and 2. for you to differentiate your classes and Griddle's.

At a high level, Griddle consists of a grid, column, and rows. To create a grid, just add the is-grid class to any element.

<div class="is-grid">

</div>

By default, Griddle will activate with a standard twelve (12) column grid with auto rows. You do not need to add any additional classes to define a column. It is important to note that any element following the is-grid wrapper will become a grid column. All columns span twelve (12) unless stated otherwise.

Let's create a column. All column classes follow this same structure.

is-col-{number}-{breakpoint}

There are a total of twelve (12) column classes across five (5) breakpints:xs, sm, md, lg, and xl.

<div class="is-grid">
  <div class="is-col-1">Columnm</div>
</div>

Griddle is built wtth a mobile first approach. Meaning that the classes will apply to all breakpoints until specified at a different point.

The above code will render a column that spans one (1) column across the five (5) breakpoints.

We can overwrite this to make it six (6) columns at the md breakpoint:

<div class="is-grid">
  <div class="is-col-1 is-col-6-md">Columnm</div>
</div>

IF you have columns that span more than twelve (12), then the column will wrap to the row below it.

Grids With Custom Column Amounts

In Griddle, you can create custom grids. Or grids that have a specific number of columns besides the standard twelve (12).

To change the grid's column length, just has the class: has-col-{number}.

These classes work exactly like the is-col classes in that there are up to twelve (12) across the five (5) breakpoints.

<div class="is-grid has-col-2"><!-- note here -->
  <div class="is-col-1">Columnm One</div>
  <div class="is-col-1">Columnm Two</div>
</div>

The grid above now has two (2) columns instead of the standard amount. Now, each column will span 50% of the grid's width. This would be equivalent to is-col-6 in the standard grid.

You can of course change the number of columns that a grid has at each breakpoint.

<div class="is-grid has-col-2 has-col-4-lg">
  ...
</div>

Column Gaps

Each grid with the is-grid class will automatically apply add grid column and row gaps. You can change the size of these gaps to a larger size if you wish.

<div class="is-grid has-col-gap-lg">
...
</div>

Or remove them entirely.

<div class="is-grid has-no-col-gap">
...
</div>

Rows

By default, Griddle will activate with auto rows. This is done so grid items will wrap if the span more than the grid column length.

You do not need to add any additional classes to define a row. It is important to note that any element following the is-grid wrapper will be contained in a single row. Unless there are more columns than the grid has. Then a new row will be created. You do not need to add additional classes, Griddle does all that for you.

However, you can tell a column how many rows it should span. There are a total of twelve (12) column classes across five (5) breakpints:xs, sm, md, lg, and xl.

All row classes follow this same structure.

is-row-{number}-{breakpoint}

<div class="is-grid">
  <div class="is-col-1 is-row-2">Columnm</div>
</div>

Griddle is built wtth a mobile first approach. Meaning that the classes will apply to all breakpoints until specified at a different point.

The above code will render a column that spans one (1) column and two (2) rows across the five (5) breakpoints.

We can overwrite this to make it six (6) columns at the md breakpoint and three (3) rows tall:

<div class="is-grid">
  <div class="is-col-1 is-col-6-md is-row-2 is-row-3-md">Columnm</div>
</div>

Grids With Custom Row Amounts

In Griddle, you can create custom grids. Or grids that have a specific number of rows.

To change the grid's row length, just has the class: has-row-{number}.

These classes work exactly like the is-row classes in that there are up to twelve (12) across the five (5) breakpoints.

<div class="is-grid has-row-3"><!-- note here -->
  <div class="is-col-1">Columnm One</div>
  <div class="is-col-1">Columnm Two</div>
</div>

The grid above explicitly now has three (3) rows instead.

You can of course change the number of columns that a grid has at each breakpoint.

<div class="is-grid has-row-3 has-row-6-lg">
  ...
</div>

Row Gaps

Each grid with the is-grid class will automatically apply add grid column and row gaps. You can change the size of these gaps to a larger size if you wish.

<div class="is-grid has-row-gap-lg">
...
</div>

Or remove them entirely.

<div class="is-grid has-no-row-gap">
...
</div>

Documentation

There are slew of additional utility classes for Griddle's grid as well as other utilities for text and buttons. It's encouraged to take a lot at the documentation website for a butter understand of Griddle. This is just a quick overview of Griddle and how the grid works.

Installation

You can install Griddle with either NPM or Yarn.

$ yarn add @daveberning/griddle
# or
$ npm install @daveberning/griddle

After installation, you can integrate it into your website or application with ESM import or through a SASS @import

import '@daveberning/griddle;

or

@import '@daveberning/griddle;

If you are not using SCSS and would like to use Griddle with plan ol' CSS you can do that as well.

<link rel="stylesheet" href="node_modules/@daveberning/griddle/dist/main.css"

If you do not want Griddle's theme, utility classes, or elements, no worries - we get it it. If you want to just use grid, just import that. It's located in the dist directory.

import '@daveberning/griddle/dist/grid.css;

or

 @import '@daveberning/griddle/dist/grid.css';

or

<link rel="stylesheet" href="node_modules/@daveberning/griddle/dist/grid.css"

Contributing

If you'd like to contribute, fantasic! Please fork and submit pull requests with improvements and new features.

All of the source files are in the src/scss directory. Feel free to use the index.html in the src directory to view and test Griddle or your new feature or improvement. Only the .scss files in the src/scss directory gets bundled up into the dist directory.

Here are a few commands for you to know.

Commands

Install Dependencies

$ yarn
# or 
$ npm install

Build

Build for production.

$ yarn build:production
# or
$ npm run build:production

You can build Griddle for development and have Webpack watch for any files changes.

$ yarn watch
# or
$ npm run watch 

Or you can do a one time build for development.

$ yarn build:dev
# or
$ npm run build:dev