/
Gists
/
CSS trick
Gists - CSS trick
On gists
IE 11 - CSS Grid - SASS mixins
•
SCSS
CSS
CSS trick
mixins.scss #
// Ensure CSS grid works with IE 11 spec.
// https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
// sass-lint:disable no-vendor-prefixes, no-duplicate-properties
@mixin display-grid {
display: -ms-grid;
display: grid;
}
// $columns values should be delimited by a space
@mixin grid-template-columns($columns...) {
-ms-grid-columns: $columns;
grid-template-columns: $columns;
}
// $rows values should be delimited by a space
@mixin grid-template-rows($rows...) {
-ms-grid-rows: $rows;
grid-template-rows: $rows;
}
// Can be used in combination with above grid-template-X mixins.
// These result in the same output:
// @include grid-template-columns(10px grid-repeat(4, 20px) 30px);
// @include grid-template-columns(10px 20px 20px 20px 20px 30px);
@function grid-repeat($repeat, $stuff: 1fr) {
$list: ();
@for $i from 1 through $repeat {
$list: append($list, $stuff, space);
}
@return $list;
}
@mixin grid-column($col-start, $col-end) {
-ms-grid-column: $col-start;
-ms-grid-column-span: $col-end - $col-start;
grid-column: #{$col-start} / #{$col-end};
}
@mixin grid-row($row-start, $row-end) {
-ms-grid-row: $row-start;
-ms-grid-row-span: $row-end - $row-start;
grid-row: #{$row-start} / #{$row-end};
}
@mixin grid-align-self($value) {
-ms-grid-row-align: $value;
align-self: $value;
}
@mixin grid-justify-self($value) {
-ms-grid-column-align: $value;
justify-self: $value;
}
On gists
Quantity queries
•
CSS
CSS trick
examples.css #
/*
@see: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/
*/
/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
background-color: orange;
}
/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
background-color: orange;
}
/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
background-color: orange;
}
/* OR */
/* https://quantityqueries.com/ */
/* at-least 2 */
li:nth-last-child(n+2), li:nth-last-child(n+2) ~ li { }
/* at-most 2 */
li:nth-last-child(-n+2):first-child, li:nth-last-child(-n+2):first-child ~ li { }
/* at least / at most 2 - 4 */
li:nth-last-child(n+2):nth-last-child(-n+4):first-child, li:nth-last-child(n+2):nth-last-child(-n+4):first-child ~ li { }
On gists
SCSS
CSS trick
ghost-element-vertical-align.css
ghost-element-vertical-align.css #
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
On gists
CSS trick
Slider - fadein / fadeout via css
slider.css #
/* The animation code */
@keyframes example {
0% {background-image: url("https://static.pexels.com/photos/7174/summer-grass.jpg");}
50% {background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjOCNcnik0caAqRX601w3rTlf3ZTANFojDWVxc2WOkvOzu4NF7HQ");}
100% {background-image: url("https://static.pexels.com/photos/7174/summer-grass.jpg");}
}
/* The element to apply the animation to */
div {
width: 400px;
height: 300px;
background-repeat: no-repeat;
background-size: 100% 100%;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
On gists
CSS
CSS trick
CSS - full height with resizable header & footer with TABLE LAYOUT
layout.css #
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
/*border-spacing: 10px;
margin: 0 -10px;
*/
width: 100%;
}
.nav, .content, .footer {
display: table-row;
}
.cell {
display: table-cell;
}
.nav div, .footer div {
background-color: #1565C0;
}
.content div {
height: 100%; /* Nutné, aby obsah dominantne zaberal všetko voľné miesto. */
border: 1px solid;
}
p {
padding: 1em;
margin: 0;
}
On gists
CSS
Bootstrap
CSS trick
From http://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap/33540628#33540628
bootstrap-autoclear.css #
@media (min-width:1200px){
.auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
.auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
.auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
.auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
.auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
.auto-clear .col-md-1:nth-child(12n+1){clear:left;}
.auto-clear .col-md-2:nth-child(6n+1){clear:left;}
.auto-clear .col-md-3:nth-child(4n+1){clear:left;}
.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
.auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
.auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
.auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
.auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
.auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
.auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
.auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
.auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
.auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
.auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
.auto-clear .col-xs-6:nth-child(odd){clear:left;}
}