Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dotsunited/equal-height-blocks
Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback.
https://github.com/dotsunited/equal-height-blocks
Last synced: about 20 hours ago
JSON representation
Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback.
- Host: GitHub
- URL: https://github.com/dotsunited/equal-height-blocks
- Owner: dotsunited
- License: mit
- Created: 2015-06-24T10:21:38.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-04-21T19:13:17.000Z (over 8 years ago)
- Last Synced: 2024-11-07T14:06:14.088Z (11 days ago)
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 5
- Watchers: 9
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Equal Height Blocks
===================
Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback.
Based on http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
Usage
-----
With webpack:
```javascript
if (!Modernizr.testAllProps('flexWrap')) {
require.ensure(['dotsunited-equal-height-blocks/lib/fallback'], function() {
var equalHeightBlocks = require('dotsunited-equal-height-blocks/lib/fallback');
equalHeightBlocks('.list', '.list__item');
});
}
```
```less
@import "~dotsunited-equal-height-blocks/lib/mixins";
.list {
.dotsunited-equal-height-blocks-container();
// If the list item is not a direct descendant if the list element, apply
// the item wrapper mixin to all wrapper elements, eg. for a html
// structure like:
//
//
-
//...
//
//
//
/*li {
.dotsunited-equal-height-blocks-item-wrapper();
}*/
}
.list__item {
background: #eee;
}
```
License
-------
Copyright (c) 2015-2016 Dots United GmbH.
Released under the [MIT](LICENSE?raw=1) license.