recentpopularlog in

dirtystylus : css   371

« earlier  
Amber Weinberg Jones on Twitter: "About to have some FUN recreating this layout in Grid. The original uses floats and tons of negative margins and isn't responsive.… https://t.co/1p001FDEjU"
.grid {
grid-gap: 32px;
grid-template-columns: repeat(4,1fr);
}

.grid li:nth-of-type(6n+3) {
grid-column: 3 / span 2;
grid-row: span 2;
}

.grid li:nth-of-type(6n+4) {
grid-column: 1 / span 2;
grid-row: span 2;
}
twitterthread  css  css:grid  grid  images 
6 weeks ago by dirtystylus
Lea Verou on Twitter: "I’m gonna start blanket adding the following rule to all my stylesheets: :focus:not(:focus-visible) { outline: none } Gets rid of the annoying outline for mouse users but preserves it for keyboard users, and is ignored by browsers
I’m gonna start blanket adding the following rule to all my stylesheets:

:focus:not(:focus-visible) { outline: none }

Gets rid of the annoying outline for mouse users but preserves it for keyboard users, and is ignored by browsers that don’t support :focus-visible.
css  accessibility  a11y 
september 2018 by dirtystylus
The Font Loading Checklist—zachleat.com
When I look back at the last four years that I’ve spent learning everything I could about web fonts and how web fonts load, I can distill it all down to a small checklist of ideals that I continue to chase. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals.
css  webdesign  typography  font  webfonts  performance  webperf  by:zachleatherman 
september 2018 by dirtystylus
Practical CSS Scroll Snapping | CSS-Tricks
Messing with scrolling is risky business. Since it’s such a fundamental part of interacting with the web, changing it in any way can feel jarring—the term scrolljacking used to get thrown around to describe that sort of experience.
scrolling  scrolljack  via:csstricks  by:maxkohler  webdesign  css 
august 2018 by dirtystylus
Building a webic community
The front-end skill set is not discrete, where you only do one thing. Neither is it a spectrum, where you do several things that are adjacent to each other. It’s more like a Jackson Pollock painting (during his drip period), sprawling and all over the place.
webdesign  html  css  programming  frontend 
january 2018 by dirtystylus
Common Responsive Layouts with CSS Grid (and some without!)
If you're learning how and when to use CSS grid, I've built some common layouts for you to try out.
rwd  css  css:grid  layout  grid  webdesign  webdev 
november 2017 by dirtystylus
« earlier      
per page:    204080120160

Copy this bookmark:





to read