cssgrid   1137

« earlier    

CSS Grid for Designers
For years, designers have been using grids to bring order to pages. Grids as a design tool are associated with the Swiss who formalized it as a way of thinking about layout in the 1940s, according to Beth Tondreau in the book “Layout Essentials”.
webdev  design  cssgrid 
yesterday by kch
Why we need CSS subgrid
There has been a lot of discussion over the last 2 years about the use cases for subgrid, how it should be implemented, and even some debate over whether you even need it. A lot of that discussion was centered around two other approaches that can handle many of the same problems as subgrid: nested grids and display: contents. This article will explore both of those approaches, and I hope to demonstrate that there are still some very valid cases where a subgrid is truly needed, and others where it is not strictly needed, but would make for a much cleaner solution.
fridayfrontend  css  cssbasics  cssgrid  layout  grids  subgrid 
4 days ago by spaceninja
Complicated Checkerboard Layouts with CSS Grid & SVGs
I’m so excited when my clients push the boundaries of “normal” web design and allow me to use some of the latest cool CSS available. I was given this square based, checkerboard Gridded design and told to run off and see what I could do. This design presented a lot of issues and it took a lot of upfront thinking, as well as 4 or 5 different routes, before I found the perfect balance between usability, responsiveness, and keeping the design integrity. There are already a lot of tutorials on CSS Grid, but none of them address the issues I was having, especially when it came to keeping everything square, matching with the background checkerboard, and being responsive at the same time (have I broken your brain yet!?).
fridayfrontend  css  cssbasics  layout  cssgrid  grids  svg 
4 days ago by spaceninja
Piecing Together Approaches for a CSS Masonry Layout
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScript library. Nothing against JavaScript, but it's understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days? Sorta.
fridayfrontend  css  cssbasics  layout  masonry  javascript  flexbox  cssgrid  multicol 
4 days ago by spaceninja
Angular, Autoprefixer, IE11, and CSS Grid Walk into a Bar…
As toolchains grow and become more complex, unless you are expertly familiar with them, it’s very unclear what transformations are happening in our code. Tracking the differences between the input and output and the processes that code underwent can be overwhelming. When there’s a problem, it’s increasingly difficult to hop into the assembly line and diagnose the issue and often there’s not an precise fix.
fridayfrontend  css  angular  autoprefixer  grids  layout  cssgrid  ie11 
4 days ago by spaceninja
Stepping away from Sass
I also unintentionally, (at least at first) removed all traces of Sass from my codebase. This was not something I set out to do but the more I looked at my old Sass files the more I questioned whether it was adding value to my site, or just an extra level of complexity and dependency. CSS has evolved over recent years and the problems that lead me to Sass in the first place seem to be less of an issue today.
fridayfrontend  css  sass  variables  customproperties  layout  grids  cssgrid  typography 
4 days ago by spaceninja
CSS Grid Layout Generator
Interactive tool for generating CSS Grid layouts.
layouts  webdev  tools  css  cssgrid 
6 days ago by angusm
CSS Grid for Designers – Times Open
For years, designers have been using grids to bring order to pages. Grids as a design tool are associated with the Swiss who formalized it as a way of thinking about layout in the 1940s, according to…
6 days ago by ElliotPsyIT
Stepping away from Sass
My latest site redesign and why I left out Sass and media queries in favour of native CSS grid, calc, viewport units and custom properties.}
cssgrid  sass  calc 
10 days ago by brad2dabone
CSS Grid for Designers
Fast forward six years to the release of CSS Grid in early 2017. This technology removes a lot of the limitations that existed in CSS to date. But CSS Grid is not just a tool for front-end developers; designers can now think about web layout in new ways. This technology advancement is so important for designers to understand, because it means we can think about the right grid for the demands of our content.
fridayfrontend  css  layout  grids  cssgrid 
11 days ago by spaceninja
“Graduating to Grid” by Rachel Andrew
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at what went right or wrong in these first few months, and offers help to those struggling to transition away from legacy methods.
fridayfrontend  video  css  grids  cssgrid  flexbox  layout 
17 days ago by spaceninja

« earlier    

related tags

advanced  angular  animation  aspectratio  autoprefixer  blogs  bootstrap  border  borders  calc  cards  charts  cheatsheet  code  codepen  columns  components  conic-gradient  cookbook  css-grid  css  cssbasics  customproperties  design  diagram  diagrams  education  enhancement  examples  exclusions  fallback  featurequeries  first  flexbox  floats  foundation  framework  frameworks  fridayfrontend  game  games  generator  grid  grids  guide  harrypotter  houdini  howto  html5  ie  ie11  internal  intersection  intrinsic  javascript  kalender  last  layout  layouts  learning  levelup  logic  masonry  mediaqueries  mozilla  multicol  pinegrow  progressive  react  reference  responsive  row  rows  sass  scale  scroll-snap  shape-outside  shapes  slide  stackoverflow  styled-component  subgrid  supports  svg  tips  tool  tools  tumblr  tutorial  typography  variables  venn  vertical  video  vue.js  vue  web  webdesign  webdev  weblearning  writingmodes 

Copy this bookmark: