recentpopularlog in

abberdab : grid   39

Other component articles have already explored the advantages of using lists to enhance assistive technology users' experience. Briefly:
Screen readers provide shortcuts to lists and between list items
Screen readers enumerate the items so users know how many are available
a11y  accessibility  css  design  cards  lists  components  focus  focus-within  layout  flexbox  grid  clip 
june 2018 by abberdab
Aspect Ratio Cells with CSS Grid Layout by Michelle Barker on CodePen
I found myself recently building a layout in CSS Grid that would have previously needed JavaScript in order to work. It’s a layout based on equal sized square grid cells, where grid items could span one or two cells on the row and/or column axis. In other words, the grid cells needed to maintain an aspect ratio
css  grid  layout  practical  examples  aspect-ratios 
june 2018 by abberdab
Advanced image alignments with CSS Grid: Full Bleed and beyond
"An experiment to mix regular floated images and full-bleed / full-bleed variant images within the same layout using a combination of old layout methods and CSS Grid." from Morten Rand-Hendriksen
image  css  alignment  floats  grid  layout  blog  article  design 
january 2018 by abberdab
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
css  grid  fallbacks  browser-support  polyfills  strategy  browsers  testing  crossbrowser 
november 2017 by abberdab
Create A Basic Portfolio Filtering System by Brian Haferkamp on CodePen
One of the things I'm often looking for but can't find is a basic filtering system for portfolio items. It seems like the ones I find online are too complicated or bloated. They're trying to do way too much. So I created a basic framework for a portfolio filtering system that works great as-is. You can also fork it and add any bells and whistles you want.
codepen  portfolio  filtering  jQuery  gallery  images  css  design  grid 
october 2017 by abberdab
Breaking the Grid -
As a Front-End developer nothing bothers me more than seeing an unexpected horizontal scrollbar on a website. While building out a checkout layout with CSS Grid I was surprised to find something mysterious was breaking the container. I thought Grid sort of auto-solved sizing.

Eventually I found two ways to break CSS Grid. As it would happen, I was doing both in the same layout — overflow-x and form elements.
forms  css  grid  layout  troubleshooting  hacks  overflow 
september 2017 by abberdab
CSS Grid Layout Slideshow | Demo 1 | Codrops
Demo of a fantastic idea for a portfolio layout or moodboard. Sweet.
css  grid  slideshow  moodboard  portfolio  ideas  inspiration 
july 2017 by abberdab
CSS Grid Layout Slideshow | Codrops
Fantastic idea for a portfolio layout using grid. Or for presenting moodboards! Sweet.
css  layout  grid  portfolio  ideas  inspiration  moodboard 
july 2017 by abberdab
Connect: behind the front-end experience
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.
grid  fallbacks  feature-detect  feature-queries  illustration  animation  css  design 
june 2017 by abberdab
Common UI Patterns — Grab & Go Patterns
A collection of built patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page layout, they could as easily be a small component in a design.
css  grid  fallbacks  browser-support  crossbrowser 
june 2017 by abberdab
Stephanie Liu
When I was TA-ing a Responsive Web Design class for Girl Develop It several weeks ago, a great question was raised as to how to keep video embeds from losing their aspect ratio responsively. So I thought I’d do a quick post on how to maintain embed aspect ratios in a responsive site. And maybe I could even brush some dust off the accepted solution to this problem, especially now that we have CSS Grid ✨.
css  layout  video  responsive  design  development  methods  article  aspect  ratio  grid 
may 2017 by abberdab
CSS Grid Layout and Progressive Enhancement - CSS | MDN
Recommended article for dealing with cross browser issues and browsers which either lack or have odd support for grid.
css  crossbrowser  ie  grid  layout 
march 2017 by abberdab
Box Alignment Cheatsheets
I think by writing. This means that I wind up with vast quantities of notes and thoughts around anything I’m working on. Right now I’m doing a lot of work around the CSS Grid Layout and related specifications, and have created some detailed notes for myself about how various things work and interact with each other.
css  flexbox  grid  layout 
february 2017 by abberdab
Browser Support for CSS Grid Layout
You can view data across different browsers at Can I Use. However this information tends to confuse people as it looks as though IE is the only browser with support. Read on to understand the status of Grid Layout in browsers.

Grid is under development in browsers, this development is typically happening behind a browser flag or in an experimental version of the browser. This prevents incomplete or experimental parts of the specification being used in production by web developers.

Due to the experimental nature of this sometimes examples will not work in one browser or another. Please don’t email me to complain that Firefox Nightlies look different to Chrome Canary! I have linked to the meta bugs below for each browser so if you need to know exactly why one is different to another, take a look at those. This is the way of experimental features.
browser-support  status  grid  css 
august 2016 by abberdab
A Firefox extension for seeing the grid lines created by CSS Grid.
developer  tools  mozilla  firefox  grid  css 
august 2016 by abberdab
A nifty tool for exploring the relationship between font-size, line-height, and measure, and scale factor.
css  grid  tools  typography  vertical-rhythm  measurements 
august 2016 by abberdab
CSS Layout News - Issue 17
CSS clip-path, Flexbox examples and the return of 24 Ways.
flexbox  css  clip-path  layout  grid 
november 2015 by abberdab
CSS Layout News - Issue 16
Responsive design, Susy Grid, SVG, Grid Alignment and much more.
css  layout  frameworks  susy  rwd  grid 
november 2015 by abberdab
Fluid Squares v2. A responsive grid experiment.
A HTML5 fluid grid framework whose units remain square.
Column widths increase or decrease to suit your display size using Media Queries.
It’s Mobile First, CSS is written for small displays, with Media Queries incorporated as display size increases.
It works on all modern desktop browsers, as well as iOS, Android and BlackBerry’s mobile WebKit browsers.
Uses css3-mediaqueries.js to work in IE or any browser that supports JavaScript but not Media Queries.
fluid  squares  css  grid  dev  www  layout  rwd 
september 2011 by abberdab

Copy this bookmark:

to read