recentpopularlog in

abberdab : layout   70

Cards
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
The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article
Chrome, Opera, and Firefox ship new features constantly. Edge and Safari eventually catch up. Internet Explorer, meanwhile, has been all but abandoned by Microsoft, which is attempting to push Windows users toward Edge. IE receives nothing but security updates. It’s a frustrating period for client-side developers. We read about new features but are often unable to use them—due to a single browser with a diminishing market share.
progressive-enhancement  ie  crossbrowser  fallbacks  layout  css  feature-detect  feature-queries 
may 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
Breaking the Grid - daverupert.com
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 | 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
Fun with Viewport Units | CSS-Tricks
Best use cases and ideas for using viewport units, including typography ideas and more!
css  layout  responsive  typography  hero-images  footer  aspect-ratios  scrollbars  scrolling 
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
CSS Writing Mode
Recently, while editing some CSS in Opera inspector, I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.
css  layout  typography  vertical  writing-mode 
august 2016 by abberdab
Examples: Pricing Pages
Curated directory of the best pricing layouts.
pricing  design  layout  modules  www 
august 2016 by abberdab
Angled Edges
A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
css  sass  mixins  layout  motifs  design  www 
august 2016 by abberdab
Flexbox Layouts with Susy by Michelle Barker on CodePen
"I like Susy, of all the grid solutions out there that we might choose while we wait for the glorious day where we have CSS Grid Layout support, I think Susy is one of the best options. Here is a useful article explaining how to use it in conjunction with flexbox."
flexbox  susy  css  layout  grids  rwd 
august 2016 by abberdab
Punch-Out Avatar | Adrian Roselli
Neat effect where a transparent circular "punch" seems to be have taken out of an element, and a circular photo is nestled insider the punched out area.
css  layout 
june 2016 by abberdab
How to Build a News Website Layout with Flexbox
Really nice process/practical example of flexbox in use.
css  flexbox  layout 
june 2016 by abberdab
» Breaking Out With Viewport Units and Calc Cloud Four Blog
An alternative, more streamlined CSS layout approach for combining full width images with constrained width text.
css  layout  rwd 
may 2016 by abberdab
Create the perfect website layout system | Web design | Creative Bloq
Fantastic article about alternatives to media queries when building responsive sites. Nice!!!

"Thanks to media queries, we can create sites that work on any device. Without them the current web simply couldn't work. But there are other options as well. In certain situations, a different
viewports  css  viewport-units  rwd  fluid  layout 
january 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
Harmony Toolkit
The Harmony Design Ecosystem for a cohesive multi-device user experience.
styleguides  design  layout  framework 
september 2015 by abberdab
Style Tiles
Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout. They work well for clients who have established brands and need them to translate smoothly to the web. Whereas the word “mood” is often associated with brand and identity design, the word “style” was chosen to mirror “cascading stylesheets” and reinforce that Style Tiles are specific to Web design.
process  layout  client-education  style-tiles  kickoff  projectmanagement  design  www 
december 2012 by abberdab
jQuery Masonry
Version 3 released in June 2013!

Nifty jQuery plugin that enables tidy dynamic layouts containing mixtures of images of different aspect ratios and sizes.
design  javascript  jquery  layout  photography  gallery 
february 2012 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