{"id":13490845,"url":"https://github.com/daveberning/griddle","last_synced_at":"2025-04-07T06:05:41.976Z","repository":{"id":52850185,"uuid":"168053826","full_name":"daveberning/griddle","owner":"daveberning","description":"A CSS Grid Framework","archived":false,"fork":false,"pushed_at":"2022-10-31T18:22:58.000Z","size":244,"stargazers_count":249,"open_issues_count":3,"forks_count":11,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-31T05:02:55.120Z","etag":null,"topics":["css","css-frameworks","css-grid","css3","flexbox","grid","hacktoberfest","hacktoberfest2021","sass","scss"],"latest_commit_sha":null,"homepage":"https://daveberning.github.io/griddle-demo/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daveberning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["daveberning"],"patreon":"daveberning","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-01-28T23:16:40.000Z","updated_at":"2025-03-20T14:14:34.000Z","dependencies_parsed_at":"2023-01-20T13:01:53.074Z","dependency_job_id":null,"html_url":"https://github.com/daveberning/griddle","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fgriddle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fgriddle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fgriddle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daveberning%2Fgriddle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daveberning","download_url":"https://codeload.github.com/daveberning/griddle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601447,"owners_count":20964864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-frameworks","css-grid","css3","flexbox","grid","hacktoberfest","hacktoberfest2021","sass","scss"],"created_at":"2024-07-31T19:00:51.481Z","updated_at":"2025-04-07T06:05:41.958Z","avatar_url":"https://github.com/daveberning.png","language":"CSS","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"500\" src=\"https://raw.githubusercontent.com/daveberning/griddle/master/src/griddle-logo.png\" /\u003e\n\u003c/p\u003e\n\n \u003c!-- ![](https://img.shields.io/website?label=Documentation%20Site\u0026style=for-the-badge\u0026url=https%3A%2F%2Fgriddle.netlify.com%2F) --\u003e\n [![](https://img.shields.io/github/package-json/v/daveberning/griddle?color=eb8a5e\u0026style=for-the-badge)](https://www.npmjs.com/package/@daveberning/griddle)\n [![](https://img.shields.io/npm/dm/@daveberning/griddle?style=for-the-badge)](https://www.npmjs.com/package/@daveberning/griddle)\n [![](https://img.shields.io/maintenance/yes/2020?style=for-the-badge)](https://github.com/daveberning)\n [![](https://img.shields.io/github/size/daveberning/griddle/dist/main.css?label=Griddle\u0026style=for-the-badge)](https://github.com/daveberning/griddle/blob/master/dist/main.css)\n [![](https://img.shields.io/github/size/daveberning/griddle/dist/grid.css?label=Grid%20Only\u0026style=for-the-badge)](https://github.com/daveberning/griddle/blob/master/dist/grid.css)\n [![](https://img.shields.io/static/v1?label=PRs\u0026message=Welcome\u0026color=success\u0026style=for-the-badge)](https://github.com/daveberning/griddle/blob/master/CONTRIBUTING.md)\n [![](https://img.shields.io/twitter/follow/griddlecss?color=%23EB8A5E\u0026style=for-the-badge)](https://twitter.com/griddlecss)\n [![NPM License](https://img.shields.io/npm/l/all-contributors.svg?style=for-the-badge)](https://github.com/daveberning/griddle/blob/master/LICENSE)\n\nGriddle is a CSS framework created with CSS Grid and Flexbox. It's easy to get started with Griddle, especially if\nyou are familiar with how other CSS Frameworks work. At its 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 designs for all modern browsers with just a few classes.\n \n# Overview\n\n## Columns\nWith Griddle, you can create standard to complex grid layouts with just a few classes. Every one of Griddle's classes is prefixed with `.is-` or `.has-`. This was done for two reasons. 1. For it to read like English and 2. for you to differentiate your classes and Griddle's.\n \nAt a high level, Griddle consists of a grid, column, and rows. To create a grid, just add the `is-grid` class to any HTML node.\n \n```html\n\u003cdiv class=\"is-grid\"\u003e\n\n\u003c/div\u003e\n```\n\nBy 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.\n\nIt is important to note that any element following the `is-grid` wrapper will become a grid column. *All columns stack on the `xs` and `sm` breakpoints.* Starting at the **md** breakpoint, the column will span the number of grid columns specified by the class that is used.\n \nLet's create a column. All column classes follow this same structure.\n \n \u003e is-col-{number}-{breakpoint}\n\nThere are a total of twelve (12) column classes across six (6) breakpoints:`xs`, `sm`, `md`, `lg`, `xl` and `xxl`.\n \n```html\n\u003cdiv class=\"is-grid\"\u003e\n \u003cdiv class=\"is-col-1\"\u003eColumn\u003c/div\u003e\n\u003c/div\u003e\n```\n \nGriddle is built with a mobile-first approach. Meaning that the classes will apply to all breakpoints until specified at a different breakpoint.\n \nFor example, the above code will render a column that spans one (1) column across the six (6) different breakpoints.\n \nWe can overwrite this to have it span six (6) columns at the `md` breakpoint: \n \n```html\n\u003cdiv class=\"is-grid\"\u003e\n \u003cdiv class=\"is-col-1 is-col-6-md\"\u003eColumn\u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you have columns that span more than twelve (12), then the column will wrap to a new row *below* it.\n\n## Custom Column Lengths\n\nIn Griddle, you can create grids that do not adhere to the standard twelve (12) column grid. You can easily create grids that have anywhere from one (1) to twelve (12) columns if you want a grid that has an odd number of columns, like a seven (7), no problem. This gives you a different level of control over your grid layouts.\n \nTo change the grid's column length, just add the class: `has-col-{number}-{breakpoint}`.\n \nThese classes work *exactly* like the `is-col` classes; there are up to twelve (12) classes across the six (6) different breakpoints.\n \n ```html\n \u003cdiv class=\"is-grid has-col-2\"\u003e\u003c!-- note here --\u003e\n  \u003cdiv class=\"is-col-1\"\u003eColumn One\u003c/div\u003e\n  \u003cdiv class=\"is-col-1\"\u003eColumn Two\u003c/div\u003e\n \u003c/div\u003e\n```\n\nThe grid above now has two (2) columns instead of the default amount. Now, each column will span 50% of the grid's width. This is the same as using the `is-col-6` class in a standard twelve (12) column grid.\n \nYou can of course change the number of columns that a grid has at each breakpoint.\n \n```html\n\u003cdiv class=\"is-grid has-col-2 has-col-4-lg\"\u003e\n ...\n\u003c/div\u003e\n```\n\nThe grid above will have two (2) columns at the `xs`, `sm`, and `md` breakpoints. But will adapt to have four (4) columns while the window is sized to the `lg`, `xl`, and `xxl` breakpoints.\n\n### Column Gaps\nBy default, each grid will come with column and row gaps already defined. So you do not have to keep adding extra classes to achieve very similar or standard looking grids.\n\nYou can change the size of these gaps to a larger size if you wish. There are a total of two (2) additional gap sizes: `md` and `lg`.\n \n ```html\n\u003cdiv class=\"is-grid has-col-gap-lg\"\u003e\n...\n\u003c/div\u003e\n```\n\nGrid gap values:\n- Standard: `1rem`\n- Medium (md): `1.5rem`\n- Large (lg): `2rem`\n\nOr you can remove them entirely:\n\n ```html\n\u003cdiv class=\"is-grid has-no-col-gap\"\u003e\n...\n\u003c/div\u003e\n```\n\n#### Column Gap Customization\nYou can customize the size of the column gaps via native CSS variables. Just add the following to a `.css` file in your project:\n\n```css\n:root {\n  /* Grid Gaps */\n --col-gap: 1rem;\n --col-gap-md: 1.5rem;\n --col-gap-lg: 2rem;\n}\n```\n\n## Grid Direction\n\nYou can change the direction of the grid. The standard direction of any `is-grid` is of course left-to-right (`ltr`).\n\nTo change the direction of the grid to right-to-left (`rtl`), just add the following class to your grid.\n\n```html\n\u003cdiv class=\"is-grid is-rtl\"\u003e\n ...\n\u003c/div\u003e\n```\n\nAs with everything related to the grid, you can change the direction of the grid at any of the specified breakpoints.\n\n```html\n\u003cdiv class=\"is-grid is-rtl-lg\"\u003e\n ...\n\u003c/div\u003e\n```\n\nIn this case, the grid will flow in the left-to-right (ltr) direction for the `xs`, `sm`, and `md` breakpoints. However, the direction will change to right-to-left (`rtl`) starting at the `lg` breakpoint.\n\n## Grid Item Placement\n\nGriddle comes with a few placement classes that you can add to your grid items.\n\n```html\n\u003cdiv class=\"is-grid\"\u003e\n \u003cdiv class=\"is-placed-right\"\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThis will essentially adds the `place-self: right;` CSS property and value to the grid item. In CSS, the `place-self` property is shorthand for `justify-self` and `align-self`.\n\nThere are a total of five (5) `is-placed-` classes:\n\n1. `is-placed-left`\n2. `is-placed-right`\n3. `is-placed-center`\n4. `is-placed-start`\n5. `is-placed-normal`\n\n## Rows\n\nBy default, Griddle will activate with `auto` rows. With this, your grid will wrap its columns automatically and create as many rows as your grid needs.\n \n 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 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.\n \nHowever, you can tell a column how many rows it should span. There are a total of twelve (12) column classes across the six (6) breakpoints:`xs`, `sm`, `md`, `lg`, `xl`, and `xxl`.\n \nAll `is-row` classes follow this same structure.\n \n \u003e is-row-{number}-{breakpoint}\n \n ```html\n \u003cdiv class=\"is-grid\"\u003e\n \u003cdiv class=\"is-col-1 is-row-2\"\u003eColumn\u003c/div\u003e\n \u003c/div\u003e\n ```\n \n Griddle is built with a mobile-first approach. Meaning that the classes will apply to all breakpoints until specified at a different breakpoint.\n \nThe above code will render a column that spans one (1) column and two (2) rows across the six (6) breakpoints.\n \n We can overwrite this to make it six (6) columns at the `md` breakpoint and three (3) rows tall: \n \n```html\n\u003cdiv class=\"is-grid\"\u003e\n \u003cdiv class=\"is-col-1 is-col-6-md is-row-2 is-row-3-md\"\u003eColumnm\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Grids With Custom Row Amounts\n\nIn Griddle, you can create custom grids. Or grids that have a specific number of rows.\n\nTo change the grid's row length, just add the class: `has-row-{number}`.\n \nThese classes work the same as the `is-row` classes in that there are up to twelve (12) across the six (6) breakpoints.\n \n ```html\n \u003cdiv class=\"is-grid has-row-3\"\u003e\u003c!-- note here --\u003e\n \u003cdiv class=\"is-col-1\"\u003eColumn One\u003c/div\u003e\n \u003cdiv class=\"is-col-1\"\u003eColumn Two\u003c/div\u003e\n \u003c/div\u003e\n```\n\nThe grid above explicitly now has three (3) rows instead of `auto`.\n \nYou can, of course, change the number of columns that a grid has at each breakpoint.\n \n ```html\n \u003cdiv class=\"is-grid has-row-3 has-row-6-lg\"\u003e\n ...\n \u003c/div\u003e\n ```\n\n### Row Gaps\nEach grid with the `is-grid` class will automatically apply grid column and row gaps. You can change the size of these gaps to a larger size if you choose to do so.\n \n ```html\n\u003cdiv class=\"is-grid has-row-gap-lg\"\u003e\n...\n\u003c/div\u003e\n```\n\nOr remove them entirely.\n\n ```html\n\u003cdiv class=\"is-grid has-no-row-gap\"\u003e\n...\n\u003c/div\u003e\n```\n#### Row Gap Configuration\n```css\n:root {\n  /* Grid Gaps */\n --row-gap: 1rem;\n --row-gap-md: 1.5rem;\n --row-gap-lg: 2rem;\n}\n```\n\n# Typography\nGriddle comes with a number of utility classes specific to typography.\n\n## Headings\nIn Griddle, there are pre-styled HTML headings: `h1` to `h6`. Classes with the same styles as their HTML tag counterparts.\n\nThese classes are`is-h1` to `is-h6`. You may apply these classes to any HTML element to apply the styles of a specific heading. This is especially useful if you want an `h3` to look like an `h1` without changing its semantic value.\n\n```html\n\u003ch3 class=\"is-h1\"\u003eAn example heading\u003c/h3\u003e\n``` \n## Text Colors\nMuch like other frameworks, Griddle uses a `primary`, `secondary`, like naming convention for it's colors. You can learn more about customizing these colors in the __Configuration__ section of the README.\n\nThere are currently eleven (11) color classes. You can leverage these text colors with the `is-text-` classes. All text classes follow this same structure.\n\n\u003e `is-text-{color}\n\n\"Color\" being either `primary`, `secondary`, `tertiary`, `cta`, `white`, `black`, `grey`, `success`, `warning`, `danger` and `info`.\n\n## Text Styles\nStyle classes are also provided to give you greater control. These are:\n\n`is-bold`: Bolds the text\n`is-strike`: Strikesthrough the text\n`is-italic`: Italisizes the text\n`is-capitalized`: Capitalizes the first letter of each new word\n`is-uppercase`: Capitalizes each letter of every word\n`is-aligned-left`: Aligns the text to the left\n`is-aligned-center`: Aligns the text to the center\n`is-aligned-right`: Aligns the text to the right\n\n## Elements\nTo help you quickly prototype user interfaces, you can use some of the styled elements that are included. Most notably `is-button`, `is-alert`, and `is-tag`.\n\nEach element works the same way. You can add background colors, text colors, and other modifiers.\n\n```html\n\u003cbutton class=\"is-button\"\u003eSend Message\u003c/button\u003e\n\u003c!-- or --\u003e\n\u003ca href=\"#\" class=\"is-button\"\u003eA link as a button\u003c/a\u003e\n```\nFeel free to add any modifiers to this to create different styled buttons.\n\n```html\n\u003cbutton class=\"is-button is-cta is-rounded is-outline\"\u003eSend Message\u003c/button\u003e\n```\n\n# Modifiers\nThese are classes that you can tack on to just about anything to add additional styles. These are typically agnostic to the HTML element it's attached to.\n\n## Spacing Modifiers\nThere are several utility classes included for you to space elements.\n\n### Margin and Padding\n`has-m`: Applies the default margin size on all sizes. You can also use `has-m-lg` or `has-m-md` to have different sized margins.\n`has-p`: Applies the default padding size on all sizes. You can also use `has-p-lg` or `has-p-md` to have different sized padding.\n\n`has-m-top`, `has-m-right`, `has-m-bottom`, `has-m-left`.\nYou can tack of the size of the margin as well: Ex: `has-m-left-lg`\n\n`has-p-top`, `has-p-right`, `has-p-bottom`, `has-p-left`.\nYou can tack of the size of the padding as well: Ex: `has-p-left-lg`\n\n### Flexbox\n`is-centered`: Centers all content vertically and horizontally within an element.\n`is-centered-horizontally`: Centers all content horizontally within an element.\n`is-centered-vertically`: Centers all content vertically within an element.\n\n## Display Modifiers\nThere are a total of six (6) display modifier classes. These are:\n\n`is-block`\n`is-inline-block`\n`is-flex`\n`is-inline-flex`\n`is-grid`\n`is-inline-grid`\n\nWe've also included helper classes to hide and show elements on touch screen devices.\n\n`is-device`: Shows an element on a touch screen device\n`is-screen`: Shows an element on a non-touch screen device\n\n## Color Modifiers\nWe've touched on this briefly in other sections. But there are modifier classes for each color type (ex: primary) for text and backgrounds.\n\n`is-text-{type}`: Changes the color of the text per the type's value\n`has-bkg-{type}: Changes the background color per the type's color.\nYou can configure these color types in the CSS of your project: \n\n```css\n:root {\n  /* Colors */\n --primary: #016575;\n --secondary: #03414b;\n --tertiary: #003242;\n --cta: #EB8A5E;\n --white: #ffffff;\n --black: #000000;\n --grey: #ececec;\n --success: #48C774;\n --warning: #FFDD57;\n --danger: #F14668;\n --info: #3298DC;\n}\n```\n\n## Image Modifiers\nIf you want an image to be responsive, just add the `is-responsive` class any image.\n\nThen feel free to round it out and make it a circle: `is-rounded`\n\n# Configuration\nGriddle is built with CSS variables which means that you can easily configure Griddle whether or not you are using SCSS.\n\nTo configure colors add the following to the top of your projects CSS file.\n\n```css\n:root {\n /* Colors */\n  --primary: #016575;\n  --secondary: #03414b;\n  --tertiary: #003242;\n  --cta: #EB8A5E;\n  --white: #ffffff;\n  --black: #000000;\n  --grey: #ececec;\n  --success: #48C774;\n  --warning: #FFDD57;\n  --danger: #F14668;\n  --info: #3298DC;\n\n  /* Typography */\n  --h1: 4rem;\n  --h2: 3.5rem;\n  --h3: 3rem;\n  --h4: 2.5rem;\n  --h5: 2rem;\n  --h6: 1.5rem;\n  --root-font-size: 16px; /* REM values are based on this */\n  --root-line-height: 2rem;\n\n  /* Misc */\n  --container-width: 1400px;\n  --border-radius: .25rem;\n  --border-radius-md: .5rem;\n  --border-radius-lg: .75rem;\n  --spacing: 1rem;      /* Used for .has-m and .has-p classes */\n  --spacing-md: 1.5rem; /* Used for .has-m-md and .has-p-md classes */\n  --spacing-lg: 2rem;   /* Used for .has-m-lg and .has-p-lg classes */\n\n  /* Grid Gaps */\n  --col-gap: 1rem;\n  --col-gap-md: 1.5rem;\n  --col-gap-lg: 2rem;\n\n  --row-gap: 1rem;\n  --row-gap-md: 1.5rem;\n  --row-gap-lg: 2rem;\n}\n```\n\n# Documentation\n\nA proper documentation site is in the works. In the meantime, I hope this README helps. Fell free to reach out on [Twitter](https://twitter.com/daveberning) if you have any questions\n\n# Installation\nYou can install Griddle with either NPM or Yarn.\n\n```bash\n$ yarn add @daveberning/griddle\n# or\n$ npm install @daveberning/griddle\n```\n\nAfter installation, you can integrate it into your website or application with ESM `import` or through a SASS `@import`\n\n```js\nimport '@daveberning/griddle;\n```\n\nor\n\n```scss\n@import '@daveberning/griddle;\n```\n\nIf you do not want Griddle's theme, utility classes, or elements, no worries - we get it. If you want to just use just the grid, import that, it's located in the `dist` directory.\n \n ```js\n import '@daveberning/griddle/dist/grid.css;\n ```\n\nor\n\n```scss\n @import '@daveberning/griddle/dist/grid.css';\n```\n\nor you can download it via a CDN if you don't want to download Griddle via Yarn or NPM.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@daveberning/griddle@\u003cversion\u003e/dist/grid.css\" /\u003e\n```\n\n# Contributing\nIf you'd like to contribute, that's fantastic! Please fork and submit a pull request with improvements and new features.\n\nAll 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 will get bundled up into the `dist` directory. \n\nHere are a few commands for you to know.\n## Commands \n\n### Install Dependencies\n```bash\n$ yarn\n# or \n$ npm install\n```\n\n### Build\n\nBuild for **production**.\n\n```bash\n$ yarn build:production\n# or\n$ npm run build:production\n```\n\nYou can build Griddle for development and have Webpack watch for any files changes.\n\n```bash\n$ yarn watch\n# or\n$ npm run watch \n```\n\nOr you can do a one time build for development.\n\n```bash\n$ yarn build:dev\n# or\n$ npm run build:dev\n```\n","funding_links":["https://github.com/sponsors/daveberning","https://patreon.com/daveberning"],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaveberning%2Fgriddle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaveberning%2Fgriddle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaveberning%2Fgriddle/lists"}