dirtystylus + css   372

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 
9 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

related tags

3d  60fps  a11y  accessibility  accessibility:keyboard  adobe  alistapart  AMA  analytics  aneventapart  animal  animation  apple  aria  artdirection  artifactconf  atomiccss  atomicdesign  backgroundimages  BEM  bestof2018  bestpractices  blog  bluecadet  bluecadet:hia  bluecadetdev  blueprint  book  bookmarklet  bracket  brain  browser  browserengine  bug  buildtools  by:adactio  by:alexrussell  by:alispittel  by:benfrain  by:bradfrost  by:brandongregory  by:cassieevans  by:charlieowen  by:chenhuijing  by:chriscoyier  by:christianheilmann  by:craighockenberry  by:csstricks  by:danieleden  by:daniellehuntrods  by:daverupert  by:frontendmasters  by:harryroberts  by:jensimmons  by:johnallsopp  by:lindsaygrizzard  by:lynnfisher  by:maggiewachs  by:maxkohler  by:michellebarker  by:minamarkham  by:patrickbrosset  by:rachelandrew  by:richardrutter  by:robweychert  by:snookca  by:superfriendly  by:tiffnogueira  by:timkadlec  by:unakravets  by:wesbos  by:zachleatherman  calendar  career  casestudy  centering  characters  chrome  codearchitecture  codepen  codesmell  codestyle  color  colorpicker  colortheory  compass  components  conference  conference:cssconf  conference:viewsource2018  conference:webdirections  confetti  contentstrategy  contrast  cosplay  course  criticalcss  criticalpath  css  css3  css:breakpoints  css:clip  css:customproperties  css:enduringcss  css:flexbox  css:form  css:FUN  css:grid  css:minmax  css:prefersreducedmotion  css:preprocessor  css:reset  css:selectlist  css:snappoints  css:specificity  css:utilityclasses  css:vmax  css:vmin  css:writingmode  cssarchitecture  cssframework  cssinjs  csspreprocessor:stylus  csstricks  cssvariables  cute  danielmall  dataviz  debugging  design  designpatterns  designsystem  desktop  development  devtools  documentation  dog  drawing  drupal  drupal7  drupal:block  DRY  duotone  easing  editorialdesign  education  email  environment  epub  ethanmarcotte  experimental  featuredetection  feminism  firefox  flash  flexbox  FOIT  font  font-face  fontevents  fontloader  form  FOUT  fractal  framework  frontend  fullbleed  functionalprogramming  game  geometry  GIF  gitbook  github  googlefonts  grid  grunt  gulp  gulpjs  hamburger  heroimage  highdpi  history  hover  html  html5  htmlemail  http2  humor  icon  icons  IE  illustration  imagery  images  inclusion  infographic  inspiration  instagram  ios  iphone  iphonex  ITCSS  jank  javascript  jensimmons  jquery  layout  lazyload  learning  ligatures  linkedcontent  links  list  loader  maintainability  maintainablecss  management  marketing  menu  microsoft  misogyny  mixin  mobile  mobilefirst  modularcontent  modularscale  module:advagg  motiondesign  navigation  nesting  nhl  oldIE  oocss  opensource  operatingsystem  opinion  optimization  organization  parallax  parenting  patternlab  patternlibrary  perfectionism  performance  photos  planning  polyfill  portfolio  postcss  presentation  printstylesheet  process  programming  progressiveenhancement  react  reactjs  redesign  reference  responsivetable  retinascreen  rollover  rwd  safari  sass  screenreader  scrolling  scrolljack  series  slack  slackfodder  slideshow  smacss  smashingmag  sparkbox  spiderman  stanleycup  staticpublishing  statistics  styleguide  sublimetext  survey  svg  table  talk  teamwork  techculture  technicaldebt  teens  testing  text  theming  timbrown  tips  tools  touchscreen  transitions  tutorial  tutorials  twitterthread  tyler  typekit  typography  ui  ux  variablefonts  verticalmediaquery  via:beep  via:bradfrost  via:bram_stein  via:chrisarasin  via:chriscoyier  via:clearleft  via:csstricks  via:danielmall  via:daverupert  via:filamentgroup  via:gregsarault  via:henrysteinberg  via:jasonsantamaria  via:jensimmons  via:peteinge  via:peter_chappy  via:rachelandrew  via:rachelnabors  via:ryanjohnson  via:sarahpolansky  via:scottjehl  via:susanjrobertson  via:willvedd  via:zeldman  video  viewportunits  vuejs  web  webassembly  webdesign  webdev  webdevbasics  webfonts  webkitinspector  webperf  webvsnative  widescreen  wordpress  workflow  yaml  yearendlist  zendaya  zombiedevices 

Copy this bookmark:



description:


tags: