https://github.com/0xadada/l-flexbox-css

:package: A CSS component for building complex layouts using flexbox with float fallbacks.
https://github.com/0xadada/l-flexbox-css

Last synced: 2 days ago
JSON representation

:package: A CSS component for building complex layouts using flexbox with float fallbacks.

• Host: GitHub
• URL: https://github.com/0xadada/l-flexbox-css
• Owner: 0xadada
• License: mit
• Created: 2013-12-20T14:38:21.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2015-03-06T21:02:02.000Z (over 9 years ago)
• Last Synced: 2024-10-18T08:24:52.673Z (26 days ago)
• Language: CSS
• Homepage:
• Size: 188 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# l-flexbox

l-flexbox.css is a CSS utility class to help you quickly build complex

layouts using `flexbox`.

l-flexbox.css supports a `float` fallback for browsers that don't support

the flexbox spec.

[Checkout the demo](http://htmlpreview.github.io/?https://github.com/ronaldjadams/l-flexbox-css/blob/master/demo.html)

## What does it do?

* Allows you to quickly start using CSS3 flexbox for layouts.

* Gives you sensible default fallback support in older browsers.

* Encourages (but does not enforce) [BEM-style CSS](http://bem.info/method/) conventions.

* Provides easy hooks for extensibility.

* Explains what the code does using detailed comments.

## Dependencies

* [Modernizr](https://github.com/Modernizr/Modernizr)

## How to Install

* Install with [Bower](http://bower.io/): `bower install --save l-flexbox-css`

* Download from the [project page](https://github.com/ronaldjadams/l-flexbox-css).

## How to use it

Include a `` reference to l-flexbox.css (and any extensions) in your HTML head.

Create a "flexbox" container element, add the `l-flexbox` class to this element.

Create child-elements and add the `l-flexbox--item` class to these elements.

```html



    
First flex item

    
Second flex item



```


[Inspect the demo](http://htmlpreview.github.io/?https://github.com/ronaldjadams/l-flexbox-css/blob/master/demo.html) for more examples.

## Authors

* [0xADADA](https://github.com/0xadada) - [@0xadada](http://twitter.com/0xadada)

## License

Copyright (c) 2013 0xADADA

Licensed under the MIT License