Last active
January 5, 2016 23:49
-
-
Save EdwardIrby/b7ab0be348ef45ab1467 to your computer and use it in GitHub Desktop.
Flex Grid Mixins Postcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = function(mixin, value){ | |
switch(value){ | |
case "full": | |
var rule = {flex: "0 0 100%"}; | |
break; | |
case "1of2": | |
var rule = {flex: "0 0 50%"}; | |
break; | |
case "1of3": | |
var rule = {flex: "0 0 33.3333%"}; | |
break; | |
case "2of3": | |
var rule = {flex: "0 0 66.6667%"}; | |
break; | |
case "1of4": | |
var rule = {flex: "0 0 25%"}; | |
break; | |
case "3of4": | |
var rule = {flex: "0 0 75%"}; | |
break; | |
case "1of10": | |
var rule = {flex: "0 0 10%"}; | |
break; | |
default: | |
var rule = { | |
'flex': '1 0 0%', | |
'flex-shrink':'0', | |
'max-width':'100%', | |
'flex-grow': '1' | |
}; | |
} | |
return rule; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = function (mixin, flexCell, gutterSize) { | |
switch(gutterSize){ | |
case "guttersLarge": | |
var gutter = "1.5em"; | |
break; | |
case "gutters2x": | |
var gutter = "2em"; | |
break; | |
case "gutters3x": | |
var gutter = "3em"; | |
break; | |
default: | |
var gutter = "1em"; | |
} | |
var ruleObj = { | |
margin:"-"+gutter+" 0 0 -"+gutter | |
}; | |
var cellKey = flexCell; | |
var cellObj = {}; | |
cellObj[cellKey] = { | |
padding:gutter+" 0 0 "+gutter | |
}; | |
function extend(obj, src) { | |
Object.keys(src).forEach(function(key) { obj[key] = src[key]; }); | |
return obj; | |
}; | |
var obj = extend(ruleObj, cellObj); | |
return obj; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = function (mixin, value, flexCell) { | |
switch (value) { | |
case "fit": | |
var flexValue = '1'; | |
break; | |
case "full": | |
var flexValue = '0 0 100%'; | |
break; | |
case "1of2": | |
var flexValue = '0 0 50%'; | |
break; | |
case "1of3": | |
var flexValue = '0 0 33.3333%'; | |
break; | |
case "1of4": | |
var flexValue = '0 0 25%'; | |
break; | |
default: | |
var flexValue = 'inital'; | |
} | |
var ruleObj = { | |
display: 'flex', | |
'flex-wrap': 'wrap' | |
}; | |
var cellKey = flexCell; | |
var cellObj = {}; | |
if(flexCell){ | |
cellObj[cellKey] = { | |
flex:flexValue | |
} | |
} | |
function extend(obj, src) { | |
Object.keys(src).forEach(function(key) { obj[key] = src[key]; }); | |
return obj; | |
} | |
var obj = extend(ruleObj, cellObj); | |
return obj; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment