14th April 2019
To get rid of the horrible spacing between the last two elements on a row of elements which are being aligned with
justify-content: space-between
… try the following:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}
22nd February 2019
In this example .article-grid
will be block
unless the browser has support for display: grid
, at which case, the styles within the @supports
block will kick in and override the previous display
declaration.
.article-grid {
display: block;
}
@supports (display: grid) {
.article-grid {
display: grid;
}
}
12th February 2019
Drop this in to your console in dev tools and all elements with position: absolute
will render with a border.
var absElements = [];
$("*").css("position", function(i, pos){
if(pos==="absolute") absElements.push(this);
});
$(absElements).css({border:"5px solid red"});
26th June 2018
Add the following in your mixins .scss file:
// RESPONSIVE FONTS @include fluid-type(1.3rem, 1.7rem);
@mixin fluid-type($min-font-size: 1.3rem, $max-font-size: 2.2rem, $lower-range: 540px, $upper-range: 960px) {
font-size: calc(#{$min-font-size} + #{(($max-font-size / ($max-font-size * 0 + 1)) - ($min-font-size / ($min-font-size * 0 + 1)))} * ( (100vw - #{$lower-range}) / #{(($upper-range / ($upper-range * 0 + 1)) - ($lower-range / ($lower-range * 0 + 1)))}));
@media screen and (max-width: $lower-range) {
font-size: $min-font-size;
}
@media screen and (min-width: $upper-range){
font-size: $max-font-size;
}
}
Then call that mixin within your theme .scss files with:
.div {
@include fluid-type(1rem, 3rem);
font-weight: 300;
}
Finally, make sure you set your html tag to have a set font-size as a percentage e.g. 62.5%…
html {
font-size: 62.5%;
}
24th January 2018
This is a great addition to jQuery tabs, for when you want to animate the new active tab body.
@keyframes tabSlide{
0% {
opacity: 0;
-moz-transform:translateY(30px);
-webkit-transform:translateY(30px);
-o-transform:translateY(30px);
-ms-transform:translateY(30px);
transform:translateY(30px)
}
100% {
opacity:1;
-moz-transform:translateY(0px);
-webkit-transform:translateY(0px);
-o-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px)
}
}
.active-tab {
animation-name: tabSlide;
animation-duration: 500ms;
animation-timing-function: ease;
}
16th November 2017
Use this snippet to highlight all images with no alt tag – good way to highlight everywhere you’ve missed a tag!
img[alt=""], img:not([alt]) {
border: 5px solid red;
}
Original post below:
http://twitter.com/AllThingsSmitty/status/930617039085035520
16th August 2017
Ever wondered how you can stop underlines going over the top of descenders i.e. a word with letters that hang down… such as… empathy?
Underlined, that word looks like this empathy
In Chrome and Firefox it’s now possible! With text-decoration-skip …
.underline {
text-decoration: underline;
text-decoration-skip-ink: auto;
}
The same word empathy now looks like this empathy
Enjoy.
13th June 2017
2nd January 2017
/* =========================================================
Comments
========================================================= */
.comments-area {
padding: 20px 40px;
textarea#comment {
width: 100%;
}
#submit {
@extend .button;
}
ol.commentlist {
list-style:none;
margin:0 0 1em;
padding:0;
text-indent:0;
li {}
li.alt {}
li.bypostauthor {}
li.byuser {}
li.comment-author-admin {}
.comment-body {
border-bottom: 1px solid #ddd;
padding:1em;
.comment-author {} // end .comment-author
div.vcard {
font-weight: 14px;
cite.fn {
a.url {}
} // end cite.fn
img.avatar {
border:5px solid #ccc;
float:right;
margin:0 0 20px 20px;
} // end .avatar
img.avatar-32 {} // end .avatar-32
img.photo {} // end .photo
span.says {} // ebd .says
} // end .vcard
div.commentmetadata {} // end .commentmetadata
div.comment-meta {
font-size: 11px;
a {
color: #ccc;
} // end a
} // end div.comment-meta
p {font-size: 12px;} // end p
ul {
font-size: 12px;
list-style: none;
margin: 0 0 0 20px;
} // end ul
div.reply {
font-size: 11px;
a {font-weight: bold;} // end a
} // end reply
ul.children {
list-style:none;
margin: 12px;
text-indent:0;
li {} // end li
li.alt {}
li.bypostauthor {}
li.byuser {}
li.comment {}
li.comment-author-admin {}
li.depth-2 { border-left: 5px solid #ccc; margin:0 0 10px 10px; }
li.depth-3 { border-left: 5px solid #bbb; margin:0 0 10px 10px; }
li.depth-4 { border-left: 5px solid #aaa; margin:0 0 10px 10px; }
li.depth-5 {} // you get the idea
li.odd {} // end .odd
} // end ul.children
} // end li.comment
li.even {background:#fff;}
li.odd {background:#f6f6f6;}
li.parent {border-left:5px solid #ddd;}
li.thread-alt {}
li.thread-even {}
li.thread-odd {}
} // end commentlist
}
9th July 2016