grids   8364

« earlier    

A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike
css  grid  layout  design  webdesign  web  webdev  grids 
yesterday by vojtabiberle
Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh
A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
css  grid  cssgrid  grids  web  layout  webdesign  webdev 
yesterday by vojtabiberle
To Grid or to Flex?
In this article I want to unpack when and where you might want to use Grid or flexbox, and some reasons for choosing one or the other. What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox 
4 days ago by spaceninja
Quick! What's the Difference Between Flexbox and Grid?
There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one to do what we need to do, and plenty of situations where one is more well-suited than the other. Let's focus on the differences rather than the similarities:
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
4 days ago by spaceninja
Online Layout Grid Calculator for Adobe InDesign – A free online tool to easily create a page layout grid for book design
Grid is an essential tool for most designers. Creating a 'perfect' one requires planning and time. This online calculator will save you time by helping you plan and create a perfectly aligned layout grid for your project. It uses the font leading and page size to determine the document and baseline grid.
indesign  typography  layout  grids  tool 
17 days ago by scribblenik
Solving a Tricky Layout Problem with CSS Grid
This article is a case study on a particular component with a unique layout and a set of constraints. Building a layout that worked for the large number of requirements, as well as unknown content, required applying lateral thinking and a great deal of problem solving to find the right solution.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
17 days ago by spaceninja
My Grid Layout
My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used for a while. In this article, I’ll describe what I tried to achieve with it and how it was re-implemented using CSS Grids.
fridayfrontend  css  cssbasics  layout  grids  cssgrid 
17 days ago by spaceninja
Flexbox.ninja – Solved by Flexbox High Kick
Flexbox is nowaday one of the problem solvers you should master to help you in your working daily habits. Follow those little demonstrations and case studies to learn more about CSS Flexbox Layout, step by step, and become a Flexbox Ninja!
fridayfrontend  css  cssbasics  flexbox  layout  grids 
17 days ago by spaceninja
Your CSS Layout Toolkit for 2019, by Rachel Andrew
As we head into the final quarter of 2018, let’s take a look at where we are with CSS Grid Layout, and CSS layout in general. In this talk you will learn the key elements of layout. The things you need to know as you plan your projects now and into the next year. Rachel will take you on a tour of what we have now and what is coming next, with plenty of practical advice and takeaway code examples, so that you can start to use these features in your own work.
fridayfrontend  video  layout  css  grids  cssgrid  flexbox  multicol 
25 days ago by spaceninja
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 
5 weeks 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 
5 weeks 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 
5 weeks 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 
5 weeks ago by spaceninja

« earlier    

related tags

1-web  330  agency  angular  animation  art  articles  aspectratio  audio  autoprefixer  bat  boardgames  books  bootstrap  cards  cheatsheet  cheatsheets  checklist  color  columns  components  conic-gradient  covers  create  crystals  css-grid  css-grids  css-in-js  css  cssbasics  cssgrid  cssgrids  custominstruments  customproperties  design  development  documentation  editorial  enhancement  exclusions  fallback  featurequeries  flexbox  floats  fonts  for  forms  foundation  framework  frameworks  fridayfrontend  frontend  generator  geometry  grid  gridscontroller  guide  harrypotter  history  houdini  howto  html  ie11  illustration  indesign  information  inspiration  intrinsic  js  layout  layouts  learning  lets  logic  lua  maps  masonry  mediaqueries  medium  mini  monome  moonstone  multicol  neighbors  news  newslettered  nycda  oct18  or  photos  playlists  power  progressive  r  raspberrypi  react  reference  resources  responsive-design  responsive  sass  save  scroll-snap  shapes  startup  story  styleguide  subgrid  supports  svg  swim  synths  their  think  this  tool  tooling  tools  tos  toshare  totry  tumblr  tutorial  tutorials  typography  variables  vertical  via.tim  video  videos  villagers  web  webdesign  webdev  writingmodes 

Copy this bookmark:



description:


tags: