https://github.com/eransch/grid-box-flex-down
The demo project for a CSS Grid/Flexbox presentation.
https://github.com/eransch/grid-box-flex-down
css demonstration flexbox grid meetup presentation
Last synced: 12 months ago
JSON representation
The demo project for a CSS Grid/Flexbox presentation.
- Host: GitHub
- URL: https://github.com/eransch/grid-box-flex-down
- Owner: EranSch
- Created: 2017-04-21T09:34:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-21T09:59:54.000Z (about 9 years ago)
- Last Synced: 2025-02-15T05:12:43.959Z (over 1 year ago)
- Topics: css, demonstration, flexbox, grid, meetup, presentation
- Language: CSS
- Homepage: http://slides.com/eranschoellhorn/grid-box-flex-down
- Size: 219 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# grid-box-flex-down
The demo project for a CSS Grid/Flexbox presentation, enjoy!
[**Click here to check out the slide deck.**](http://slides.com/eranschoellhorn/grid-box-flex-down)
## Contents
There are two demonstrations in the project, [one for Flexbox](https://swingline0.github.io/grid-box-flex-down/flex.html) and [another for grid](https://swingline0.github.io/grid-box-flex-down/grid.html). When viewing either, open up your browsers development tools to tinker with the CSS properties. To learn more about either check out the following resources:
### Grid
- http://cssgridgarden.com/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- http://gridbyexample.com/
### Flex
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
## Setup for playing at home
1. Clone or download repo
2. Make sure to have Node.js and yarn (`npm i -g yarn`)
3. Run `yarn` in the project directory to install dependencies
4. Run `yarn dev` to launch local development server
5. Refer to `grid.html` or `flex.html` for each example, along with their corresponding stylesheets by the same names in the `./sass/` directory.
6. Enjoy!
## Screenshots
