recentpopularlog in

garrettc : layout   135

« earlier  
How To Align Things In CSS
"It can be quite a challenge to align things with CSS. Rachel Andrew takes a look."
css  grid  layout  flexbox  webdesign  webdevelopment 
15 days ago by garrettc
Digging Into The Display Property: The Two Values Of Display — Smashing Magazine
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS `display` property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.
webdevelopment  webdesign  display  css  layout 
15 days ago by garrettc
Flexulator
"If you are trying to work out how much space is being distributed by flexbox this tool may help. It also nicely demonstrates the fact that flexbox is about distributing space, rather than making fixed or percentage width layouts."
css  layout  flexbox  tool  webdesign  webdevelopment 
18 days ago by garrettc
Sophisticated Partitioning with CSS Grid
Create compelling grid patterns by harnessing specificity.
css  grid  layout  inspiration  webdesign  webdevelopment  music  posters 
4 weeks ago by garrettc
Using CSS Grid the right way
"CSS Grid is fun to use but hard to learn. Here are three tips to help you understand and leverage the Grid spec."
css  grid  webdevelopment  webdesign  layout 
8 weeks ago by garrettc
Table Design Patterns On The Web
"Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019."
css  data  table  layout  webdesign  webdevelopment  markup  html  javascript 
12 weeks ago by garrettc
The Flexbox Holy Albatross
How to use flexbox to simulate container query functionality.
css  layout  webdesign  webdevelopment  flexbox  containerqueries 
12 weeks ago by garrettc
Putting the Flexbox Albatross to Real Use
"If you hadn't seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing an element to stack at a certain container width."
css  webdesign  webdevelopment  layout  containerqueries  flexbox 
12 weeks 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 
october 2018 by garrettc
Negative Grid Lines
Uses for negative grid lines.
css  webdesign  grid  layout 
october 2018 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 
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
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
Where Lines Break is Complicated. Here's all the Related CSS and HTML.
"Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do."
css  layout  reference  webdesign 
may 2018 by garrettc
cssgr.id | An interactive CSS Grid code tool and generator
Cssgr.id is an interactive tool to generate boilerplate code for CSS Grid layouts.
css  grid  generator  webdesign  layout  webdevelopment 
may 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
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
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
Keeping aspect-ratio with HTML and no padding tricks
For a long time we’ve been told the only way to have a DOM element keep a fixed aspect ratio without Javascript is with the % padding trick. Like here: https://css-tricks.com/aspect-ratio-boxes/…
css  svg  webdesign  layout  ratio  video 
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
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
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
Fun with Viewport Units
"Viewport units have been around for several years now, with near-perfect support in the major browsers, but I keep finding new and exciting ways to use them."
css  layout  webdesign  responsivedesign  typography  css3 
june 2017 by garrettc
Size and layout of e-commerce product grids: a user research case study
If you’re in e-commerce, the way you lay out your products is a critical part of your customer experience. It’s your digital shopfront.
webdesign  webdevelopment  userexperience  product  layout  ecommerce  research 
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
Tengis Type
"The independent brand which combine Mongolian typeface with graphic symbols in aesthetic perspective"
typography  layout  inspiration  design  designthinking 
january 2017 by garrettc
Understanding Flexbox: Everything you need to know
This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model.
css  css3  flexbox  tutorial  webdesign  webdevelopment  layout 
january 2017 by garrettc
CSS Writing Modes
"Jen Simmons points us in the direction of a useful but less well known CSS feature that becomes increasingly important when designing page layouts for a global audience."
css  layout  webdesign  internationalisation 
january 2017 by garrettc
Using CSS's object-fit and object-position Properties
Asha Laxmi explains and demonstrates how to use two CSS properties that can help when creating responsive layouts – object-fit and object-position.
css  html  layout  webdesign 
may 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
Using Flexbox today
Outlining a strategy for using Flexbox in 2015, including examples, possibilities and troubleshooting
css  css3  layout  tutorial  flexbox  webdesign  webdevelopment 
september 2015 by garrettc
Laying Out A Flexible Future For Web Design With Flexbox
Using Flexbox for layout purposes only requires a few basics. Ben Gremillion shows how to recreate a basic Gmail-like, flexbox-based interface.
css  layout  flexbox  webdesign  webdevelopment 
august 2015 by garrettc
knsv/mermaid · GitHub
Mermaid, the Markdown of flowcharts.
markdown  flowcharts  diagram  text  layout 
december 2014 by garrettc
GSS Engine
GSS is an implementation of Badros & Borning's Constraint Cascading Style Sheets, enabling far better layout control through building relational rules between different elements.
css  gss  layout  webdesign  webdevelopment 
october 2014 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
CSS Triggers...
Handy reference for whether changing any given CSS property triggers layout, paint or composite.
css  layout  performance  webdesign  webdevelopment 
july 2014 by garrettc
cssarrowplease
Want an arrow on your css box? This will generate the code for you.
css  css3  webdesign  layout  generator 
april 2014 by garrettc
LayoutIt!
Drag & drop interface builder for Bootstrap.
webdesign  webdevelopment  css  javascript  layout 
january 2014 by garrettc
Don't Overthink It Grids
Reducing the theory behind grids to their barest minimum, with some examples.
grid  responsivedesign  webdesign  layout 
august 2012 by garrettc
Life Below 600px
I love the iceberg analogy.
webdesign  usability  layout  fold 
may 2012 by garrettc
Float vs. Inline-Block
A very in-depth descriptions of the pros and cons of floats vs. inline-block.
css  layout  webdesign  bugs 
may 2012 by garrettc
* { box-sizing: border-box } FTW
Makes responsive designs so much easier to edit when you know adding padding is not going to blow your layout.
css  layout  webdesign  responsivedesign  uxoxford2012  oxdug2013 
april 2012 by garrettc
Style Tiles
"Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web."
webdesign  process  layout  typography  design  designthinking 
march 2012 by garrettc
Multi-Device Layout Patterns
As responsive designs become a more popular solution for catering to multiple devices, some patterns are starting to emerge.
mobile  responsivedesign  layout  webdesign  userinterface 
march 2012 by garrettc
JS Bin - Collaborative JavaScript Debugging
If you know CSS and don't know about display:table-caption in conjunction with caption-side:top, find out: :)
css  table  webdesign  layout  responsivedesign 
march 2012 by garrettc
Treesaver.js
A JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. I'm to be convinced that the pattern works for reading on the web, but it's an interesting experiment.
javascript  framework  css  webdevelopment  webdesign  layout 
february 2011 by garrettc
Isotope
jQuery layout plugin, with reveal and hide animation, sorting, re-ordering, and more.
jquery  javascript  layout  webdesign  plugin  css  animation 
february 2011 by garrettc
Typograph – Scale & Rhythm
"This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages."
typography  css  webdesign  layout  inspiration  tools 
january 2011 by garrettc
CSS Grid Alignment Level 3
W3C Editor's Draft. Looks interesting.
css  css3  grid  w3c  layout 
november 2010 by garrettc
Less Framework 2
A useful little CSS framework for responsive web layouts. Contains a two-column layout at 320 px,, a five-column layout at 768 px and an eight-column layout at 1280 px, for desktops and laptops.
css  framework  html5  css3  mobile  layout  webdesign  webdevelopment 
september 2010 by garrettc
Supersize that Background, Please!
CSS3 background and borders module explained at ALA
css3  css  background  webdesign  layout  image 
july 2010 by garrettc
Fluid Grids
Warning, involves maths.
css  webdesign  grid  layout  tutorial 
june 2010 by garrettc
Responsive Web Design
Ethan knocks it out of the park again with an article web design based on "a continual and constructive information exchange."
css  webdesign  design  css3  mobile  layout  userexperience  userinterface 
may 2010 by garrettc
A new global visual language for the BBC's digital services
The BBC start on the next phase of their Global Visual Language, great article and a sneak peak of what's to come. It's looking fantastic.
webdesign  bbc  typography  grid  inspiration  web  layout  userexperience  userinterface 
february 2010 by garrettc
Is RSS making me unable to read a layout?
Do web layouts start to look strange after spending too long in an RSS reader? I get where Denise is coming from here. RSS is just so easy to read.
rss  layout  webdesign  reading 
january 2010 by garrettc
Baseline
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
« earlier      
per page:    204080120160

Copy this bookmark:





to read