Skip to content

Commit 4e27eb4

Browse files
daveberningdaveberning
committed
updated README
1 parent e0042db commit 4e27eb4

3 files changed

Lines changed: 271 additions & 8 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎README.md‎

Lines changed: 271 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,287 @@
1-
# CSS Grid Framework
1+
# Griddle
22

3+
4+
<p align="center">
5+
<img width="500" src="src/griddle-logo.png" />
6+
</p>
7+
8+
Griddle is a CSS framework created with CSS Grid and Flexbox. It's easy to get started with Griddle, especially if
9+
you are familiar with how other CSS Frameworks work. At it's core, is CSS Grid. The CSS specification that is quickly
10+
becoming the new standard when creating UI layouts and grids. If you do not know, CSS Grid, no worries. You can
11+
start creating intrinsic layouts for all modern browsers with just a few classes.
12+
13+
![](https://img.shields.io/website?label=Documentation%20Site&style=for-the-badge&url=https%3A%2F%2Fgriddle.netlify.com%2F)
14+
![](https://img.shields.io/twitter/follow/griddlecss?color=%23EB8A5E&style=for-the-badge)
15+
16+
![GitHub release (latest by date)](https://img.shields.io/github/v/release/daveberning/griddle?style=for-the-badge)
17+
![](https://img.shields.io/maintenance/yes/2020?style=for-the-badge)
18+
19+
![](https://img.shields.io/github/size/daveberning/griddle/dist/main.css?label=Griddle&style=for-the-badge)
20+
![](https://img.shields.io/github/size/daveberning/griddle/dist/grid.css?label=Grid%20Only&style=for-the-badge)
21+
22+
[![NPM License](https://img.shields.io/npm/l/all-contributors.svg?style=for-the-badge)]()
23+
24+
# Overview
25+
26+
## Columns
27+
With Griddle, you can create standard to complex grid layouts with just a few classes. All of Griddle's classes are
28+
prefixed with `.is-` or `.has-`. This is done for two reaosns. 1. For it to read like English and 2. for you to
29+
differentiate your classes and Griddle's.
30+
31+
At a high level, Griddle consists of a grid, column, and rows. To create a grid, just add the `is-grid` class to
32+
any element.
33+
34+
```html
35+
<div class="is-grid">
36+
37+
</div>
38+
```
39+
40+
By default, Griddle will activate with a standard twelve (12) column grid with auto rows. You do not need to add any
41+
additional classes to define a column. It is important to note that any element following the `is-grid` wrapper will
42+
become a grid column. All columns span twelve (12) unless stated otherwise.
43+
44+
Let's create a column. All column classes follow this same structure.
45+
46+
> is-col-{number}-{breakpoint}
47+
48+
There are a total of twelve (12) column classes across five (5) breakpints:`xs`, `sm`, `md`, `lg`, and `xl`.
49+
50+
```html
51+
<div class="is-grid">
52+
<div class="is-col-1">Columnm</div>
53+
</div>
54+
```
55+
56+
Griddle is built wtth a mobile first approach. Meaning that the classes will apply to all breakpoints until
57+
specified at a different point.
58+
59+
The above code will render a column that spans one (1) column across the five (5) breakpoints.
60+
61+
We can overwrite this to make it six (6) columns at the `md` breakpoint:
62+
63+
```html
64+
<div class="is-grid">
65+
<div class="is-col-1 is-col-6-md">Columnm</div>
66+
</div>
67+
```
68+
69+
IF you have columns that span more than twelve (12), then the column will wrap to the row below it.
70+
71+
## Grids With Custom Column Amounts
72+
73+
In Griddle, you can create custom grids. Or grids that have a specific number of columns besides the standard twelve
74+
(12).
75+
76+
To change the grid's column length, just has the class: `has-col-{number}`.
77+
78+
These classes work exactly like the `is-col` classes in that there are up to twelve (12) across the five (5) breakpoints.
79+
80+
```html
81+
<div class="is-grid has-col-2"><!-- note here -->
82+
<div class="is-col-1">Columnm One</div>
83+
<div class="is-col-1">Columnm Two</div>
84+
</div>
85+
```
86+
87+
The grid above now has two (2) columns instead of the standard amount. Now, each column will span 50% of the grid's
88+
width. This would be equivalent to `is-col-6` in the standard grid.
89+
90+
You can of course change the number of columns that a grid has at each breakpoint.
91+
92+
```html
93+
<div class="is-grid has-col-2 has-col-4-lg">
94+
...
95+
</div>
96+
```
97+
98+
### Column Gaps
99+
Each grid with the `is-grid` class will automatically apply add grid column and row gaps. You can change the size of
100+
these gaps to a larger size if you wish.
101+
102+
```html
103+
<div class="is-grid has-col-gap-lg">
104+
...
105+
</div>
106+
```
107+
108+
Or remove them entirely.
109+
110+
```html
111+
<div class="is-grid has-no-col-gap">
112+
...
113+
</div>
114+
```
115+
116+
## Rows
117+
118+
By default, Griddle will activate with auto rows. This is done so grid items will wrap if the span more than the grid
119+
column length.
120+
121+
You do not need to add any
122+
additional classes to define a row. It is important to note that any element following the `is-grid` wrapper will be
123+
contained in a single row. Unless there are more columns than the grid has. Then a new row will be created. You do
124+
not need to add additional classes, Griddle does all that for you.
125+
126+
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`.
127+
128+
All row classes follow this same structure.
129+
130+
> is-row-{number}-{breakpoint}
131+
132+
```html
133+
<div class="is-grid">
134+
<div class="is-col-1 is-row-2">Columnm</div>
135+
</div>
136+
```
137+
138+
Griddle is built wtth a mobile first approach. Meaning that the classes will apply to all breakpoints until
139+
specified at a different point.
140+
141+
The above code will render a column that spans one (1) column and two (2) rows across the five (5) breakpoints.
142+
143+
We can overwrite this to make it six (6) columns at the `md` breakpoint and three (3) rows tall:
144+
145+
```html
146+
<div class="is-grid">
147+
<div class="is-col-1 is-col-6-md is-row-2 is-row-3-md">Columnm</div>
148+
</div>
149+
```
150+
151+
## Grids With Custom Row Amounts
152+
153+
In Griddle, you can create custom grids. Or grids that have a specific number of rows.
154+
155+
To change the grid's row length, just has the class: `has-row-{number}`.
156+
157+
These classes work exactly like the `is-row` classes in that there are up to twelve (12) across the five (5) breakpoints.
158+
159+
```html
160+
<div class="is-grid has-row-3"><!-- note here -->
161+
<div class="is-col-1">Columnm One</div>
162+
<div class="is-col-1">Columnm Two</div>
163+
</div>
164+
```
165+
166+
The grid above explicitly now has three (3) rows instead.
167+
168+
You can of course change the number of columns that a grid has at each breakpoint.
169+
170+
```html
171+
<div class="is-grid has-row-3 has-row-6-lg">
172+
...
173+
</div>
174+
```
175+
176+
### Row Gaps
177+
Each grid with the `is-grid` class will automatically apply add grid column and row gaps. You can change the size of
178+
these gaps to a larger size if you wish.
179+
180+
```html
181+
<div class="is-grid has-row-gap-lg">
182+
...
183+
</div>
184+
```
185+
186+
Or remove them entirely.
187+
188+
```html
189+
<div class="is-grid has-no-row-gap">
190+
...
191+
</div>
192+
```
193+
194+
# Documentation
195+
196+
There are slew of additional utility classes for Griddle's grid as well as other utilities for text and buttons. It's
197+
encouraged to take a lot at the documentation website for a butter understand of Griddle. This is just a quick
198+
overview of Griddle and how the grid works.
199+
200+
# Installation
201+
You can install Griddle with either NPM or Yarn.
202+
203+
```bash
204+
$ yarn add @daveberning/griddle
205+
# or
206+
$ npm install @daveberning/griddle
207+
```
208+
209+
After installation, you can integrate it into your website or application with ESM `import` or through a SASS `@import`
210+
211+
```js
212+
import '@daveberning/griddle;
213+
```
214+
215+
or
216+
217+
```scss
218+
@import '@daveberning/griddle;
219+
```
220+
221+
If you are _not_ using SCSS and would like to use Griddle with plan ol' CSS you can do that as well.
222+
223+
```html
224+
<link rel="stylesheet" href="node_modules/@daveberning/griddle/dist/main.css"
225+
```
226+
227+
If you do not want Griddle's theme, utility classes, or elements, no worries - we get it it. If you want to just use
228+
grid, just import that. It's located in the `dist` directory.
229+
230+
```js
231+
import '@daveberning/griddle/dist/grid.css;
232+
```
233+
234+
or
235+
236+
```scss
237+
@import '@daveberning/griddle/dist/grid.css';
238+
```
239+
240+
or
241+
242+
```html
243+
<link rel="stylesheet" href="node_modules/@daveberning/griddle/dist/grid.css"
244+
```
245+
246+
# Contributing
247+
If you'd like to contribute, fantasic! Please fork and submit pull requests with improvements and new features.
248+
249+
All of the source files are in the `src/scss` directory. Feel free to use the `index.html` in the `src` directory to
250+
view and test Griddle or your new feature or improvement. Only the `.scss` files in the `src/scss` directory gets
251+
bundled up into the `dist` directory.
252+
253+
Here are a few commands for you to know.
3254
## Commands
4255

5256
### Install Dependencies
6257
```bash
7-
$ yarn
8-
# or
258+
$ yarn
259+
# or
9260
$ npm install
10261
```
11262

12-
### Production Build
263+
### Build
264+
265+
Build for **production**.
266+
13267
```bash
14-
$ yarn build
268+
$ yarn build:production
15269
# or
16-
$ npm run build
270+
$ npm run build:production
17271
```
18272

19-
### Development Build
273+
You can build Griddle for development and have Webpack watch for any files changes.
274+
20275
```bash
21276
$ yarn watch
22277
# or
23-
$ npm run watch
278+
$ npm run watch
24279
```
280+
281+
Or you can do a one time build for development.
282+
283+
```bash
284+
$ yarn build:dev
285+
# or
286+
$ npm run build:dev
287+
```

‎src/griddle-logo.png‎

31.3 KB
Loading

0 commit comments

Comments
 (0)