Skip to content

New Native CSS Variables, Bug Fixes, and Improvements

Latest
Latest
Compare
Choose a tag to compare
@daveberning daveberning released this 31 Jan 07:07
· 7 commits to master since this release
v0.3.0
0392ed4

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!

Assets 2
Loading