Skip to content

Instantly share code, notes, and snippets.

@Evanion

Evanion/grid-push-pull.less

Last active October 26, 2021 08:57
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Evanion/16bd519cf193c7f2171f to your computer and use it in GitHub Desktop.
Save Evanion/16bd519cf193c7f2171f to your computer and use it in GitHub Desktop.
Download ZIP
Responsive push/pull for uikit
Raw
grid-push-pull.less
/* Small */
@media (max-width: @breakpoint-small-max) {
[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%; }
}
/* Large */
@media (min-width: @breakpoint-large) {
[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: @breakpoint-xlarge) {
[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