Skip to content

Instantly share code, notes, and snippets.

@harvzor

harvzor/_flexy.scss

Last active August 29, 2015 14:18
Show Gist options
  • Save harvzor/d6b911df5f6cb3e0976a to your computer and use it in GitHub Desktop.
Save harvzor/d6b911df5f6cb3e0976a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_flexy.scss
.xs-flex { @include display-flex; }
.xs-order-1 { @include order(1); }
.xs-order-2 { @include order(2); }
.xs-order-3 { @include order(3); }
@media (min-width: 768px) {
.sm-flex { @include display-flex; }
.sm-order-1 { @include order(1); }
.sm-order-2 { @include order(2); }
.sm-order-3 { @include order(3); }
}
@media (min-width: 992px) {
.md-flex { @include display-flex; }
.md-order-1 { @include order(1); }
.md-order-2 { @include order(2); }
.md-order-3 { @include order(3); }
}
@media (min-width: 1200px) {
.lg-flex { @include display-flex; }
.lg-order-1 { @include order(1); }
.lg-order-2 { @include order(2); }
.lg-order-3 { @include order(3); }
}
Raw
flexy.css
.xs-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.xs-order-1 {
-webkit-order: 1;
-moz-order: 1;
order: 1;
}
.xs-order-2 {
-webkit-order: 2;
-moz-order: 2;
order: 2;
}
.xs-order-3 {
-webkit-order: 3;
-moz-order: 3;
order: 3;
}
@media (min-width: 768px) {
.sm-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.sm-order-1 {
-webkit-order: 1;
-moz-order: 1;
order: 1;
}
.sm-order-2 {
-webkit-order: 2;
-moz-order: 2;
order: 2;
}
.sm-order-3 {
-webkit-order: 3;
-moz-order: 3;
order: 3;
}
}
@media (min-width: 992px) {
.md-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.md-order-1 {
-webkit-order: 1;
-moz-order: 1;
order: 1;
}
.md-order-2 {
-webkit-order: 2;
-moz-order: 2;
order: 2;
}
.md-order-3 {
-webkit-order: 3;
-moz-order: 3;
order: 3;
}
}
@media (min-width: 1200px) {
.lg-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.lg-order-1 {
-webkit-order: 1;
-moz-order: 1;
order: 1;
}
.lg-order-2 {
-webkit-order: 2;
-moz-order: 2;
order: 2;
}
.lg-order-3 {
-webkit-order: 3;
-moz-order: 3;
order: 3;
}
}
Raw
flexy.js
var flexy = {
init: function() {
$(window).on('load resize', function() {
flexy.start();
});
},
start: function() {
if(!Modernizr.flexbox) {
var pageWidth = $('html').width(),
$xsFlex = $('.xs-flex'),
$smFlex = $('.sm-flex'),
$mdFlex = $('.md-flex'),
$lgFlex = $('.lg-flex');
flexy.set(pageWidth, 'xs', $xsFlex);
flexy.set(pageWidth, 'sm', $smFlex);
flexy.set(pageWidth, 'md', $mdFlex);
flexy.set(pageWidth, 'lg', $lgFlex);
}
},
// int pageWidth
// string size = "xs" or "sm" or "md" "lg"
// jQuery object $flex
set: function(pageWidth, size, $flex) {
var child,
$child,
children,
maxFlexHeight = 0,
bootSize = {
xs: {
from: 0,
to: 768
},
sm: {
from: 767,
to: 992
},
md: {
from: 991,
to: 1200
},
lg: {
from: 1119,
to: 10000
}
},
fromLeft = 0;
if($flex.length) {
children = $flex.children('[class*="' + size + '-order"]');
if(pageWidth > bootSize[size].from && pageWidth < bootSize['lg'].to) {
// Where x is the maximum amount of ordered elements
for(var x = 1; x < 4; x++) {
for(var i = 0; i < children.length; i++) {
$child = $(children[i]);
if($child.hasClass(size + '-order-' + x)) {
$child.css('position', 'absolute');
$child.css('left', fromLeft);
fromLeft += $child.outerWidth();
break;
}
}
}
for(var i = 0; i < children.length; i++) {
child = $(children[i])[0];
if(maxFlexHeight < child.offsetHeight) {
maxFlexHeight = child.offsetHeight;
}
}
$flex.outerHeight(maxFlexHeight);
} else {
for(var i = 0; i < children.length; i++) {
$child = $(children[i]);
$child.css('position', '');
$child.css('left', '');
}
}
}
}
};
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Flexy</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="flexy.css"></link>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="flexy.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
$(function() {
flexy.init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment