Skip to content

Instantly share code, notes, and snippets.

@Erutan409
Forked from Evanion/grid-push-pull.less
Last active May 11, 2018 14:20
Show Gist options
  • Save Erutan409/d45c070d37283b97cfecca0047eb32fc to your computer and use it in GitHub Desktop.
Save Erutan409/d45c070d37283b97cfecca0047eb32fc to your computer and use it in GitHub Desktop.
Responsive push/pull for uikit
/* Small */
@media (min-width: 480px) {
[class*='uk-push-small-'],
[class*='uk-pull-small-'] { position: relative; }
/*
* Push
*/
/* Halves */
.uk-push-small-1-2,
.uk-push-small-2-4,
.uk-push-small-3-6,
.uk-push-small-5-10 { left: 50%; }
/* Thirds */
.uk-push-small-1-3,
.uk-push-small-2-6 { left: 33.333%; }
.uk-push-small-2-3,
.uk-push-small-4-6 { left: 66.666%; }
/* Quarters */
.uk-push-small-1-4 { left: 25%; }
.uk-push-small-3-4 { left: 75%; }
/* Fifths */
.uk-push-small-1-5,
.uk-push-small-2-10 { left: 20%; }
.uk-push-small-2-5,
.uk-push-small-4-10 { left: 40%; }
.uk-push-small-3-5,
.uk-push-small-6-10 { left: 60%; }
.uk-push-small-4-5,
.uk-push-small-8-10 { left: 80%; }
/* Sixths */
.uk-push-small-1-6 { left: 16.666%; }
.uk-push-small-5-6 { left: 83.333%; }
/* Tenths */
.uk-push-small-1-10 { left: 10%; }
.uk-push-small-3-10 { left: 30%; }
.uk-push-small-7-10 { left: 70%; }
.uk-push-small-9-10 { left: 90%; }
/*
* Pull
*/
/* Halves */
.uk-pull-small-1-2,
.uk-pull-small-2-4,
.uk-pull-small-3-6,
.uk-pull-small-5-10 { left: -50%; }
/* Thirds */
.uk-pull-small-1-3,
.uk-pull-small-2-6 { left: -33.333%; }
.uk-pull-small-2-3,
.uk-pull-small-4-6 { left: -66.666%; }
/* Quarters */
.uk-pull-small-1-4 { left: -25%; }
.uk-pull-small-3-4 { left: -75%; }
/* Fifths */
.uk-pull-small-1-5,
.uk-pull-small-2-10 { left: -20%; }
.uk-pull-small-2-5,
.uk-pull-small-4-10 { left: -40%; }
.uk-pull-small-3-5,
.uk-pull-small-6-10 { left: -60%; }
.uk-pull-small-4-5,
.uk-pull-small-8-10 { left: -80%; }
/* Sixths */
.uk-pull-small-1-6 { left: -16.666%; }
.uk-pull-small-5-6 { left: -83.333%; }
/* Tenths */
.uk-pull-small-1-10 { left: -10%; }
.uk-pull-small-3-10 { left: -30%; }
.uk-pull-small-7-10 { left: -70%; }
.uk-pull-small-9-10 { left: -90%; }
}
/* Medium */
@media (min-width: 768px) {
[class*='uk-push-medium-'],
[class*='uk-pull-medium-'] { position: relative; }
/*
* Push
*/
/* Halves */
.uk-push-medium-1-2,
.uk-push-medium-2-4,
.uk-push-medium-3-6,
.uk-push-medium-5-10 { left: 50%; }
/* Thirds */
.uk-push-medium-1-3,
.uk-push-medium-2-6 { left: 33.333%; }
.uk-push-medium-2-3,
.uk-push-medium-4-6 { left: 66.666%; }
/* Quarters */
.uk-push-medium-1-4 { left: 25%; }
.uk-push-medium-3-4 { left: 75%; }
/* Fifths */
.uk-push-medium-1-5,
.uk-push-medium-2-10 { left: 20%; }
.uk-push-medium-2-5,
.uk-push-medium-4-10 { left: 40%; }
.uk-push-medium-3-5,
.uk-push-medium-6-10 { left: 60%; }
.uk-push-medium-4-5,
.uk-push-medium-8-10 { left: 80%; }
/* Sixths */
.uk-push-medium-1-6 { left: 16.666%; }
.uk-push-medium-5-6 { left: 83.333%; }
/* Tenths */
.uk-push-medium-1-10 { left: 10%; }
.uk-push-medium-3-10 { left: 30%; }
.uk-push-medium-7-10 { left: 70%; }
.uk-push-medium-9-10 { left: 90%; }
/*
* Pull
*/
/* Halves */
.uk-pull-medium-1-2,
.uk-pull-medium-2-4,
.uk-pull-medium-3-6,
.uk-pull-medium-5-10 { left: -50%; }
/* Thirds */
.uk-pull-medium-1-3,
.uk-pull-medium-2-6 { left: -33.333%; }
.uk-pull-medium-2-3,
.uk-pull-medium-4-6 { left: -66.666%; }
/* Quarters */
.uk-pull-medium-1-4 { left: -25%; }
.uk-pull-medium-3-4 { left: -75%; }
/* Fifths */
.uk-pull-medium-1-5,
.uk-pull-medium-2-10 { left: -20%; }
.uk-pull-medium-2-5,
.uk-pull-medium-4-10 { left: -40%; }
.uk-pull-medium-3-5,
.uk-pull-medium-6-10 { left: -60%; }
.uk-pull-medium-4-5,
.uk-pull-medium-8-10 { left: -80%; }
/* Sixths */
.uk-pull-medium-1-6 { left: -16.666%; }
.uk-pull-medium-5-6 { left: -83.333%; }
/* Tenths */
.uk-pull-medium-1-10 { left: -10%; }
.uk-pull-medium-3-10 { left: -30%; }
.uk-pull-medium-7-10 { left: -70%; }
.uk-pull-medium-9-10 { left: -90%; }
}
/* Large */
@media (min-width: 960px) {
[class*='uk-push-large-'],
[class*='uk-pull-large-'] { position: relative; }
/*
* Push
*/
/* Halves */
.uk-push-large-1-2,
.uk-push-large-2-4,
.uk-push-large-3-6,
.uk-push-large-5-10 { left: 50%; }
/* Thirds */
.uk-push-large-1-3,
.uk-push-large-2-6 { left: 33.333%; }
.uk-push-large-2-3,
.uk-push-large-4-6 { left: 66.666%; }
/* Quarters */
.uk-push-large-1-4 { left: 25%; }
.uk-push-large-3-4 { left: 75%; }
/* Fifths */
.uk-push-large-1-5,
.uk-push-large-2-10 { left: 20%; }
.uk-push-large-2-5,
.uk-push-large-4-10 { left: 40%; }
.uk-push-large-3-5,
.uk-push-large-6-10 { left: 60%; }
.uk-push-large-4-5,
.uk-push-large-8-10 { left: 80%; }
/* Sixths */
.uk-push-large-1-6 { left: 16.666%; }
.uk-push-large-5-6 { left: 83.333%; }
/* Tenths */
.uk-push-large-1-10 { left: 10%; }
.uk-push-large-3-10 { left: 30%; }
.uk-push-large-7-10 { left: 70%; }
.uk-push-large-9-10 { left: 90%; }
/*
* Pull
*/
/* Halves */
.uk-pull-large-1-2,
.uk-pull-large-2-4,
.uk-pull-large-3-6,
.uk-pull-large-5-10 { left: -50%; }
/* Thirds */
.uk-pull-large-1-3,
.uk-pull-large-2-6 { left: -33.333%; }
.uk-pull-large-2-3,
.uk-pull-large-4-6 { left: -66.666%; }
/* Quarters */
.uk-pull-large-1-4 { left: -25%; }
.uk-pull-large-3-4 { left: -75%; }
/* Fifths */
.uk-pull-large-1-5,
.uk-pull-large-2-10 { left: -20%; }
.uk-pull-large-2-5,
.uk-pull-large-4-10 { left: -40%; }
.uk-pull-large-3-5,
.uk-pull-large-6-10 { left: -60%; }
.uk-pull-large-4-5,
.uk-pull-large-8-10 { left: -80%; }
/* Sixths */
.uk-pull-large-1-6 { left: -16.666%; }
.uk-pull-large-5-6 { left: -83.333%; }
/* Tenths */
.uk-pull-large-1-10 { left: -10%; }
.uk-pull-large-3-10 { left: -30%; }
.uk-pull-large-7-10 { left: -70%; }
.uk-pull-large-9-10 { left: -90%; }
}
/* xLarge */
@media (min-width: 1220px) {
[class*='uk-push-xlarge-'],
[class*='uk-pull-xlarge-'] { position: relative; }
/*
* Push
*/
/* Halves */
.uk-push-xlarge-1-2,
.uk-push-xlarge-2-4,
.uk-push-xlarge-3-6,
.uk-push-xlarge-5-10 { left: 50%; }
/* Thirds */
.uk-push-xlarge-1-3,
.uk-push-xlarge-2-6 { left: 33.333%; }
.uk-push-xlarge-2-3,
.uk-push-xlarge-4-6 { left: 66.666%; }
/* Quarters */
.uk-push-xlarge-1-4 { left: 25%; }
.uk-push-xlarge-3-4 { left: 75%; }
/* Fifths */
.uk-push-xlarge-1-5,
.uk-push-xlarge-2-10 { left: 20%; }
.uk-push-xlarge-2-5,
.uk-push-xlarge-4-10 { left: 40%; }
.uk-push-xlarge-3-5,
.uk-push-xlarge-6-10 { left: 60%; }
.uk-push-xlarge-4-5,
.uk-push-xlarge-8-10 { left: 80%; }
/* Sixths */
.uk-push-xlarge-1-6 { left: 16.666%; }
.uk-push-xlarge-5-6 { left: 83.333%; }
/* Tenths */
.uk-push-xlarge-1-10 { left: 10%; }
.uk-push-xlarge-3-10 { left: 30%; }
.uk-push-xlarge-7-10 { left: 70%; }
.uk-push-xlarge-9-10 { left: 90%; }
/*
* Pull
*/
/* Halves */
.uk-pull-xlarge-1-2,
.uk-pull-xlarge-2-4,
.uk-pull-xlarge-3-6,
.uk-pull-xlarge-5-10 { left: -50%; }
/* Thirds */
.uk-pull-xlarge-1-3,
.uk-pull-xlarge-2-6 { left: -33.333%; }
.uk-pull-xlarge-2-3,
.uk-pull-xlarge-4-6 { left: -66.666%; }
/* Quarters */
.uk-pull-xlarge-1-4 { left: -25%; }
.uk-pull-xlarge-3-4 { left: -75%; }
/* Fifths */
.uk-pull-xlarge-1-5,
.uk-pull-xlarge-2-10 { left: -20%; }
.uk-pull-xlarge-2-5,
.uk-pull-xlarge-4-10 { left: -40%; }
.uk-pull-xlarge-3-5,
.uk-pull-xlarge-6-10 { left: -60%; }
.uk-pull-xlarge-4-5,
.uk-pull-xlarge-8-10 { left: -80%; }
/* Sixths */
.uk-pull-xlarge-1-6 { left: -16.666%; }
.uk-pull-xlarge-5-6 { left: -83.333%; }
/* Tenths */
.uk-pull-xlarge-1-10 { left: -10%; }
.uk-pull-xlarge-3-10 { left: -30%; }
.uk-pull-xlarge-7-10 { left: -70%; }
.uk-pull-xlarge-9-10 { left: -90%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment