garrettc + grid + css   82

Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign 
22 days ago by garrettc
Use Cases For Flexbox
"In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?"
css  flexbox  grid  layout  webdesign  webdevelopment 
7 weeks ago by garrettc
Negative Grid Lines
Uses for negative grid lines.
css  webdesign  grid  layout 
8 weeks ago by garrettc
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
css  examples  layout  webdevelopment  webdesign  flexbox  grid 
10 weeks ago by garrettc
Create your design system, part 1: Typography
Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in…
css  webdesign  designsystems  webdevelopment  typography  grid  colour  space  icons  buttons 
12 weeks ago by garrettc
Unlocking the Power of CSS Grid Layout
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
css  grid  webdevelopment  webdesign 
september 2018 by garrettc
Super-Powered Grid Components with CSS Custom Properties | CSS-Tricks
A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid
css  grid  layout  webdevelopment  webdesign 
september 2018 by garrettc
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
cheatsheet  css  grid  webdesign  reference  webdevelopment 
august 2018 by garrettc
Gallery Grid With CSS Grid
Simple and clever gallery layout with CSS grid.
css  grid  webdesign  webdevelopment  gallery  tips 
july 2018 by garrettc
The Layouts of Tomorrow
Lovely "metro like" UI, with parallax , built almost entirely in CSS using Grid and CSS 3D transforms.
css  grid  inspiration  layout  webdesign  webdevelopment 
june 2018 by garrettc
Realizing common layouts using CSS Grid Layout
"To round off this set of guides to CSS Grid Layout, I am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement."
css  grid  webdesign  webdevelopment  layout  examples 
may 2018 by garrettc
Getting Started With CSS Layout
Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.
css  layout  flexbox  float  grid  html  webdevelopment  webdesign 
may 2018 by garrettc | An interactive CSS Grid code tool and generator is an interactive tool to generate boilerplate code for CSS Grid layouts.
css  grid  generator  webdesign  layout  webdevelopment 
may 2018 by garrettc
Editorial Design and CSS Grid: Inspiration and examples
"With CSS Grid we can design web design inspired by magazines and other editorial design works. We made a practical example on how to pass a design from a magazine to the web."
css  grid  webdesign 
april 2018 by garrettc
Best Practices With CSS Grid Layout
"In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. Rachel Andrew ran a survey and shares the results as well as her thoughts in this article."
css  grid  webdesign  webdevelopment  bestpractice 
april 2018 by garrettc
Art Directing For The Web With CSS Grid Template Areas
"If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. Andrew Clarke explains how."
css  grid  webdesign  layout 
april 2018 by garrettc
Understanding Logical Properties And Values
CSS Logical Properties and Values aren't quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes.
css  flexbox  grid  webdesign  webdevelopment 
april 2018 by garrettc
Using CSS Grid: Supporting Browsers Without Grid
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.
webdevelopment  webdesign  css  grid  progressiveenhancement 
april 2018 by garrettc
How We Adopted CSS Grid at Scale
From team buy-in to fallbacks, here's the approach we took at Thomas with the implementation of CSS Grid.
css  grid  webdevelopment  webdesign 
march 2018 by garrettc
CSS Grid for UI Layouts
"CSS Grid is a great layout tool for content-driven websites that include long passages of text, and it has tremendous value for a variety of traditional UI layouts as well. In this article I’ll show you how to use CSS Grid to improve application layouts that need to respond and adapt to user interactions and changing conditions, and always have your panels scroll properly."
css  grid  layout  userinterface  webdesign  webdevelopment  appdesign 
february 2018 by garrettc
How I design with CSS grid
A great overview of the process *before* writing code. Sketching is your friend.
css  grid  designthinking  webdesign  webdevelopment  process  sketching 
february 2018 by garrettc
Teaching CSS grid to newcomers
A history of layout on the web, how the browser works, and how grid works.
css  grid  webdesign  webdevelopment  designthinking  education 
february 2018 by garrettc
Using Media Queries For Responsive Design In 2018
This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign  mobileweb 
february 2018 by garrettc
CSS Grid layout — crossed sections
Excellent walk-through of building a grid layout with crossed sections.
css  grid  layout  webdesign  webdevelopment  example 
february 2018 by garrettc
CSS Grid
Learn all about CSS Grid with Wes Bos in this free video series!
css  grid  course  learning 
january 2018 by garrettc
How Big Is That Box? Understanding Sizing In CSS Layout
"When starting to use Flexbox and Grid, it can be frustrating to find that we sometimes don’t get the layout we expect. Often this is due to the way sizing is calculated in these new layout methods. In this article, I try to explain exactly how big that box is, and how it got to be that size!"
css  webdesign  webdevelopment  grid  flexbox 
january 2018 by garrettc
CSS Grid Starter Layouts
This is a collection of starter templates for layouts and patterns using CSS Grid. The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.
css  grid  layout  webdesign  webdevelopment 
november 2017 by garrettc
Aspect Ratios for Grid Items
Multiple ways to lock aspect ratios in Grid layouts.
css  grid  layout  webdesign  webdevelopment 
november 2017 by garrettc
Breaking out with CSS Grid explained
“I spotted a nice technique to break an item out of a container. In this post I attempt to explain why that works.”
css  grid  layout  webdevelopment  learning  webdesign 
november 2017 by garrettc
How to combine Flexbox and CSS grids for efficient layouts
"It’s not a Flexbox versus Grid debate, however, but more of learning how to use them together. The more I’ve played around with both Grid and Flexbox, I’ve found that you don’t have to choose just one or the other. In the near future, when CSS Grid Layouts have full browser support, designers will be able to take the combined advantages of each and create the most efficient and interesting designs."
flexbox  grid  layout  css  webdesign  webdevelopment  bestpractice 
september 2017 by garrettc
CSS-Tricks on Twitter
“More CSS Charts, with Grid & Custom Properties :: by @mirisuzanne”
webdevelopment  webdesign  css  grid  statistics  barchart 
august 2017 by garrettc
This website now uses Grid Layout
Good behind the scenes look of implementing Grid on a blog.
css  grid  layout  webdesign  webdevelopment 
july 2017 by garrettc
Building Production-Ready CSS Grid Layouts Today
"Find out which new layout opportunities and challenges the CSS Grid Layout brings to the web industry today, and what old problems it solves."
css  grid  webdesign 
june 2017 by garrettc
Breaking Out With CSS Grid Layout
Nice technique for guttered text with full width splash content, all with grid.
css  grid  layout  webdesign  technique 
june 2017 by garrettc
Grid by Example
"A collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew."
css  webdesign  webdevelopment  grid  resource  learning  education 
may 2017 by garrettc
Experiments in fixed aspect ratios
Revisiting responsive aspect ratios techniques with CSS Grid.
css  grid  video  webdevelopment  webdesign  media 
may 2017 by garrettc
A Complete Guide to Grid
"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 flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items)."
css  grid  layout  webdesign  webdevelopment 
april 2017 by garrettc
Grid Garden
A game for learning CSS grid layout
css  game  grid  learning  webdesign  webdevelopment 
april 2017 by garrettc
✨3 CSS Grid Features That Make My Heart Flutter | Una Kravets Online✨
Thoughts about front-end development and design. And probably other ramblings by Una Kravets.
css  grid  webdesign  webdevelopment 
march 2017 by garrettc
Practical CSS Grid: Adding Grid to an Existing Design
Understanding and using Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting.
css  css3  grid  webdesign  webdevelopment 
march 2017 by garrettc
Box Alignment Cheatsheet
"The box alignment specification details how items are aligned in the various layout methods. As different layout methods pose different constraints in terms of alignment, some of the behaviour of Box Alignment is layout method dependent. This cheatsheet compares alignment in CSS Grid Layout and Flexbox."
cheatsheet  css  grid  flexbox  webdevelopment 
february 2017 by garrettc
How to Break the Grid Without Making a Mess
"A grid is the foundation of almost any website design. These invisible lines help create rhythmic space and visual flow, so each project carries a sense of organization and harmony. But you don’t have to stick to the grid 100 percent of the time. You can even break the grid from time to time without making a total mess."
css  grid  designthinking  webdesign 
january 2017 by garrettc
CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
"In this article, Rachel Andrew explains that by understanding flexbox you are very close to understanding much of grid layout."
css  css3  flexbox  grid  webdevelopment  webdesign  learning 
november 2016 by garrettc
Grid, Flexbox, Box Alignment: Our New System for Layout
Rachel Andrew unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, div-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
css  grid  layout  flexbox  webdevelopment  webdesign 
february 2016 by garrettc
The New CSS Layout - The dot Post
We are in the middle of the biggest change in how we lay out webpages since we switched from tables to CSS. Rachel explains how Flexbox, CSS Grid Layout and the Box Alignment Model work together to create a new system for layout.
css  flexbox  css3  grid  layout  webdesign  webdevelopment 
december 2015 by garrettc
Sass Grids: From Neat To Susy
James Steinbach discusses how, in Sass, he's moved from using Bourbon's Neat grid system to at-import's Susy grid framework.
css  grid  sass  webdesign  webdevelopment 
july 2015 by garrettc
the simplest responsive css grid
"ungrid is a responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids."
css  framework  grid  responsivedesign  responsive  webdesign  webdevelopment 
february 2015 by garrettc
Grid by Example
Simple usage examples for the CSS3 Grid Layout Module from Rachel Andrew.
css  css3  grid  layout  html  w3c  specification  webdesign 
september 2014 by garrettc
A responsive grid generator from Erskine Design
css  webdesign  webdevelopment  grid  responsivedesign  tools 
march 2012 by garrettc
Joni Korpi's successor to Less Framework. Doesn't really contain any code, it's more about the idea.
css  css3  responsivedesign  grid  webdesign 
october 2011 by garrettc
Fluid Inconsistencies
Investigation into the inconsistencies in the way different browsers render percentage values.
css  browser  grid  webdesign  responsivedesign 
december 2010 by garrettc
CSS Grid Alignment Level 3
W3C Editor's Draft. Looks interesting.
css  css3  grid  w3c  layout 
november 2010 by garrettc
Object Oriented CSS, Grids on Github
A different way of approaching CSS for large scale sites. The two main principles are: 1. Separate structure and skin
2. Separate container and content.
css  framework  webdesign  grid  webdevelopment  patterns  oop 
july 2010 by garrettc
Fluid Grids
Warning, involves maths.
css  webdesign  grid  layout  tutorial 
june 2010 by garrettc
A CSS framework with typography in mind
css  framework  typography  grid  layout 
september 2009 by garrettc
The 1KB CSS Grid
A simple lightweight grid generator in 1kb.
css  grid  webdesign  webdevelopment  framework  generator  layout 
june 2009 by garrettc
960 Grid System
Includes CSS files, templates for Omnigraffle and others.
css  webdesign  grid  framework  layout  webdevelopment 
june 2009 by garrettc
Fluid Grids
Ethan Marcotte sets up fluid grids using ems. Clever sod.
css  tutorial  webdesign  grid  layout 
march 2009 by garrettc
3 Column layout with YUI grids
Odd that this pattern doesn't appear within the standard library.
css  grid  html  layout  yui  yahoo  webdevelopment 
november 2007 by garrettc
Five simple steps to better typography
Mark Boulton's fantastic series of articles on improving web typography.
advice  css  design  font  grid  guide  howto  typography  visual  text  theory  style  reference  layout  webdevelopment  colour 
june 2007 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark: