https://github.com/cjcenizal/flexbox-patterns
Patterns for using flexbox CSS to build awesome UI components.
https://github.com/cjcenizal/flexbox-patterns
Last synced: 9 months ago
JSON representation
Patterns for using flexbox CSS to build awesome UI components.
- Host: GitHub
- URL: https://github.com/cjcenizal/flexbox-patterns
- Owner: cjcenizal
- Created: 2016-01-03T05:26:13.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-11T01:34:35.000Z (about 9 years ago)
- Last Synced: 2025-05-08T15:43:24.306Z (9 months ago)
- Language: CSS
- Size: 130 KB
- Stars: 2,474
- Watchers: 58
- Forks: 122
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-fullstack - FlexBox
- awesome-fullstack - FlexBox
README
# Flexbox Patterns
This repository contains the original CSS used for the
components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com).
Feel free to use these styles however you like!
## Getting started
Assuming you have Node installed, you can install the project dependencies with
`npm install`. This will install PostCSS and Autoprefixer; two critical tools
for making your CSS cross-browser compatible.
## Commands
`npm run build`
This command will concatenate the source CSS files into a single CSS file, and
then use PostCSS to add various vendor-prefixed properties. Open up
`dist/index.html` to see a demo page of the various flexbox patterns in the
browser.
## Things to keep in mind
_I don't recommend copy-pasting these examples directly into production code._
I'm only trying to demonstrate different ways of using flexbox through these
examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the `role` attribute). Before using this
code in production you should make sure it meets your accessibility needs.