slides-flexbox

Flexbox - Frontend Meetup

Structure

• Flex direction
• axis understanding
• Justify-content
• Align-items
• Align-content
• Flex-wrap
• Flex-shrink
• Flex-grow
• Flex-basis
• Order
• Use case
• References

Sources

• http://freddy03h.github.io/flexbox-presentation (all the exemples)
• Specifications http://www.w3.org/TR/css3-flexbox
• Game http://www.flexboxdefense.com/
• Game http://flexboxfroggy.com/
• Wes Bos video tutorials http://flexbox.io/
• Real life exemples http://jackintheflexbox.tumblr.com/
• Solved by flexbox http://philipwalton.github.io/solved-by-flexbox/
• Cheatsheet http://jonibologna.com/flexbox-cheatsheet/
• Visual guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Grid system http://the-echoplex.net/flexyboxes/
• Grid system https://github.com/10up/flexibility/
• Grid system http://flexboxgrid.com/

Installation

Some reveal.js features, like external markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.

1. Install Node.js

2. Install Grunt

3. Clone this repository

4. Install dependencies

   $ npm install

5. Serve the presentation and monitor source files for changes

   $ grunt serve

6. Open http://localhost:8000 to view your presentation

   You can change the port by using grunt serve --port 8001.

License

Presentation built with Reveal.js