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:
variableandget_first_chars - Fixed bug in display classes that previously had only displayed as
blockregardless of the display type class you used. - Removed Google Fonts
@importandfont-familydeclaration in the source code - New
grid.cssandgrid-plus.scsscompiled 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!