recentpopularlog in

piperh : layout   235

« earlier  
Footer always at the bottom - Flexbox
a couple of methods to keep footer always at bottom
webdesign  web  design  footer  css  flex  flexbox  sticky  bottom  layout 
yesterday by piperh
Evan Minto
article title: Intrinsically Responsive CSS Grid with minmax() and min()
css grid isn't intrinsically responsive - article explains how to a make a layout that is, using grid
webdesign  web  design  css  grid  layout  responsive  page 
6 days ago by piperh
Writing Modes And CSS Layout — Smashing Magazine
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods
webdesign  web  design  writing  mode  language  layout  page  css 
11 days ago by piperh
An approach to responsive layouts based on CSS custom properties and em units | CodyHouse
An approach to responsive layouts based on CSS custom properties and em units
How to set smart variables that control the responsiveness of your web project.
webdesign  web  design  css  variable  custom  properties  responsive  em  layout 
14 days ago by piperh
Relearn CSS layout: Every Layout
they say: Relearn CSS layout
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
... algorithmic layout system ... ?
webdesign  web  design  layout  css  algorithmic  composable 
19 days ago by piperh
Position Sticky and Table Headers | CSS-Tricks
a tip about using position sticky for th in a table - sticky column headings
webdesign  web  design  table  css  position  sticky  head  header  column  layout 
4 weeks ago by piperh
Building a Conference Schedule with CSS Grid | CSS-Tricks
details the building of a conference programme layout using css grid
webdesign  web  design  css  grid  layout  conference  congress  table  howto  code 
5 weeks ago by piperh
Grid Experiment No. 8
shows possibilities of design layout with css grid
webdesign  web  design  css  grid  layout 
6 weeks ago by piperh
CSS Grid: No Nonsense Layouts | TestDriven.io
explanation of css grid concepts and practical example layouts
webdesign  web  design  css  grid  layout  tutorial  howto 
7 weeks ago by piperh
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
make a masonry-type layout with flex columns. Also, maintain a row type reading arrangement using nth-child and order
webdesign  web  design  css  flexbox  flex  column  wrap  masonry  layout 
7 weeks ago by piperh
GitHub - vladocar/infinity-css-grid: Fluid Flex Solution for making infinite grid columns.
interesting flexbox-based grid column layout. Minimat amount of code, nice responsive layout. Columns have to be equal I think but can merge. Maybe with with some 'self:' added you could have a wider or narrow er column
webdesign  web  design  grid  css  flex  flexbox  responsive  layout  columns 
8 weeks ago by piperh
Lorem Picsum
a service to supply random image into web page for mock ups etc
web  graphic  design  placeholder  random  image  photo  pic  mockup  layout 
10 weeks ago by piperh
CSS { In Real Life } | Debugging CSS Grid – Part 1: Understanding Implicit Tracks
Author says it's important to: '...understand the concepts of the explicit and implicit grid, and their relationship to each other.'
webdesign  web  design  css  grid  layout  implicit  explicit 
11 weeks ago by piperh
Digging Into The Display Property: Box Generation — Smashing Magazine
about use of display:contents; and when you might want to use it and when you shouldn't. By Rachel Andrew
webdesign  web  design  css  display  contents  property  box  layout  accessibility  accessible 
may 2019 by piperh
CSS { In Real Life } | Controlling leftover Grid items with pseudo-selectors
controlling leftover grid items !?
Does grid really have left over items (like flex) ?
webdesign  web  design  css  grid  flex  flebox  display  layout 
may 2019 by piperh
Art Direction For The Web Using CSS Shapes — Smashing Magazine
about using css shapes in web page layout. He mentions using the alpha channel of images - check that out
webdesign  web  design  css  shape  layout  shapes  graphic  alpha  channel 
april 2019 by piperh
The Hidden Power of CSS Text Align
some use cases for text-align. Handy sometimes for page layout
webdesign  web  design  css  text-align  layout 
april 2019 by piperh
CSS { In Real Life } | To Grid or to Flex?
a Michelle Barker piece about grid and flex - what each is best at
webdesign  web  design  css  grid  flex  flexbox  page  layout 
february 2019 by piperh
How to: Back-to-top button without scroll events - Signal v. Noise
intro says: Web developers: here’s an alternative way to build UI features that rely on scroll position without actually observing scroll events. Using the Intersection Observer API ...
webdesign  web  design  backtotop  back  top  scroll  browser  window  layout  intersection  observer  api  viewport 
february 2019 by piperh
Designing Layouts for Screen Readers
title: Designing Layouts for Screen Readers. About the experience of using a site with a screen reader
webdesign  web  design  accessibility  accessible  screen  reader  layout  aria 
february 2019 by piperh
Approaches for a CSS Masonry Layout | CSS-Tricks
Approaches to a masonry style layout without js - various css and html methods
webdesign  web  design  layout  css  masonry  alternatives  methods  code  coding 
february 2019 by piperh
CSS Grid for Designers – Times Open
haven't read it yet but looks like an a useful walkthrough tutorial about css grid. Some more resource links at end for other tutorials and guides.
webdesign  web  design  css  grid  tutorial  howto  layout  guide 
february 2019 by piperh
CSS Grid Explained in 7 Minutes (with diagrams and code) - YouTube
a 7-minute video lecture explaining the basic concepts of css grid. Quick handy way to understand what it's about before getting into more detail
webdesign  web  design  css  grid  display  layout  tutorial  video  class  introduction  explanation 
january 2019 by piperh
Mockuptime: Free realistic device mockups
some photos to use in mockup visuals, esp mobiles and computers
graphic  webdesign  web  design  mockup  visual  layout  image  resources 
january 2019 by piperh
An Introduction to CSS Shapes | Codrops
check MS support for css shapes before using (end 2018: not in Edge or IE)
webdesign  web  design  css  shapes  text  flow  layout  runaround  shape 
december 2018 by piperh
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
shows how css grid doesn't accommodate text wrap around images - you end up using a float like always, which seems to undermine the usefullness of grid. (I can't believe this use case wasn't an important consideration in the implementation of grid).
See addendum linked to Rachel Andrew and css exclusions (currently only in Edge)
webdesign  web  design  css  grid  code  coding  width  columns  float  wrap  around  text  editorial  layout  gutter  margin 
november 2018 by piperh
Grid Tile Layouts with auto-fit and minmax | Geddski
author says: 'auto-fit' was made for this
We use the new auto-fit keyword to create tile layouts. It instructs the Grid to create as many columns of the given size as can fit in the space of the grid container.
webdesign  web  design  css  grid  layout  tile 
november 2018 by piperh
Concise Media Queries with CSS Grid
within 1st para author says: with CSS grid we can write our grid rules once, and achieve the desired layout at any screen size with a single rule, and without any framework
webdesign  web  design  css  grid  layout  mq  media  queries  flex  flexbox 
november 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
a simple, clear reference cheatsheet for css grid properties and syntax
webdesign  web  design  cheatsheet  css  grid  layout  reference  syntax  display 
november 2018 by piperh
Creating Layouts with CSS Grid — SitePoint
an intro to css grid: The Grid Formatting Context
Adding display: grid to an element triggers a grid formatting context for that element and its children. ...
webdesign  web  design  css  grid  intro  introduction  layout  display 
november 2018 by piperh
Understanding the difference between grid-template and grid-auto
article title: Understanding the difference between grid-template and grid-auto.
Explains about explicit and implicit grids, and grid-template and grid-auto properties
webdesign  web  design  css  grid  layout  template  auto  explicit  implicit 
october 2018 by piperh
CSS { In Real Life }
title: Negative Grid Lines
1st para: Did you know you can use negative line numbers to position grid items with CSS Grid?
webdesign  web  design  css  grid  negative  lines  layout 
october 2018 by piperh
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
a few css recipes for commonly used items or patterns, using flex or grid
webdesign  web  design  layout  components  css  flex  grid  recipes  examples  flexbox 
october 2018 by piperh
Use Cases For Flexbox — Smashing Magazine
Use Cases For Flexbox: last article of a series by Rachel Andrew on the uses for flex and grid
webdesign  web  design  flex  flexbox  layout  grid  css 
october 2018 by piperh
Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid — SitePoint
how to progressively enhance the model from a float-based layout to flexbox, and then CSS Grid, respectively.
Might be useful if you ever have to convert a float-based layout rather than starting from scratch
webdesign  web  design  flex  flexbox  css  grid  float  layout  column  row 
september 2018 by piperh
CSS Grid
ready-made css 12-column grid layout, using css grid.
webdesign  web  design  grid  12-column  12  column  layout  responsive  css 
september 2018 by piperh
The Benefits of Using CSS Grid for Web Form Layout — SitePoint
Craig Buckler article about using grid and flex for form construction and layout
webdesign  web  design  css  grid  layout  form  flex 
september 2018 by piperh
Easy and Responsive Modern CSS Grid Layout — SitePoint
1st para: how to create a responsive modern CSS Grid layout, demonstrating how to use fallback code for old browsers, how to add CSS Grid progressively, and how to restructure the layout in small devices and center elements using the alignment properties. Useful, with code
webdesign  web  design  css  grid  progressive  fallback  @supports  layout 
september 2018 by piperh
Changes on CSS Grid Layout in percentages and indefinite height - Rego's Everyday Life
serious browser developer's look at % in layout and how browsers calculate it. Possibly brain hurty stuff
webdesign  web  design  css  width  height  percent  percentage  grid  layout 
august 2018 by piperh
The Complete Illustrated Flexbox Tutorial – freeCodeCamp
title: The Complete Illustrated Flexbox Tutorial
All taken from the author's book 'CSS Visual Dictionary'
webdesign  web  design  css  flex  flexbox  reference  layout 
august 2018 by piperh
GRID: A simple visual cheatsheet for CSS Grid Layout
css grid layout/code chart + diagrams show position effect. Divided into 'container' and 'children', like flexbox. Each main declaration has brief intro text. Very clear, simple reference.
webdesign  web  design  layout  css  grid  cheatsheet  reference  code  position  chart 
august 2018 by piperh
Should I try to use the IE version of Grid Layout? Revisited for 2018
Rachel Andrew: is it worth using IE's older version of grid?
webdesign  web  design  layout  css  grid  ie  ie11  ie10  autoprefixer 
july 2018 by piperh
Fitting Text to a Container | CSS-Tricks
different ways to fit text to its container
webdesign  web  design  text  container  fit  layout  css  box 
july 2018 by piperh
9 Biggest Mistakes with CSS Grid - YouTube
nice talk about legacy thinking when using grid. Lose some old habits. Also v useful bit about reasons for holding back - ie IE. She says no reason to hold back, don't jeopardise yourself. There are videos about using grid with IE11
webdesign  web  design  css  grid  layout  common  mistakes  ie  jen  simmons  mozilla 
july 2018 by piperh
Screely - Generate Beautiful Mockups
home headline: Instantly turn your screenshot into a beautiful design mockup. Outputs a png image. Can place false browser bar at top.
Not sure I understand the point of this. Maybe if you had lots of layouts it would be handy to make them look like screenshots
webdesign  web  design  layout  mockup  screenshot  tool  convert  image 
july 2018 by piperh
The Quirks of CSS Grid and Absolute Positioning
intro: It’s quite possible to use CSS positioning on grid items, just as you would with most other elements. There are one or two quirks, however, ...
webdesign  web  design  layout  position  positioning  absolute  css  grid 
july 2018 by piperh
CSS Grid in IE: Debunking Common IE Grid Misconceptions | CSS-Tricks
This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE).
webdesign  web  design  layout  css  grid  ie11  ie  explorer  compatibility  fallback 
july 2018 by piperh
Aspect Ratio Cells with CSS Grid Layout by Michelle Barker on CodePen
author says: 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 (1:1 in this case), but the actual grid items did not necessarily
Prob when you understand css grid you'll understand what she means
webdesign  web  design  css  grid  aspect  ratio  layout  cell 
june 2018 by piperh
Another Collection of Interesting Facts About CSS Grid | CSS-Tricks
follow up to 'A Collection of Interesting Facts about CSS Grid Layout'
webdesign  web  design  css  grid  feature  query  sticky  footer  row  column  layout 
may 2018 by piperh
Best Practices With CSS Grid Layout — Smashing Magazine
article about designing with css grid, best practices and what to avoid
webdesign  web  design  css  grid  layout 
april 2018 by piperh
Bulma: a modern CSS framework based on Flexbox
a framework based on flexbox. No js - you choose your own. Components are modular so only import what you need.
webdesign  web  design  css  framework  grid  flex  flexbox  layout 
april 2018 by piperh
Metafizzy
makers of js plugins (need jQuery I think) for swiping, dragging, layout, carousel. Flickity could be useful.
webdesign  web  design  isotope  flickity  metafizzy  effect  js  javascript  script  jquery  plugin  swipe  infinite  scroll  layout  carousel  slideshow  draggable  drag 
february 2018 by piperh
Flexbox: flex-basis, flex-shrink, flex-grow. V useful, with codepens
v. useful explanation of flex-grow, flex-shrink, and flex-basis. Re-read this often
webdesign  web  design  css  flex  flexbox  flex-grow  flex-shrink  flex-basis  layout  width 
february 2018 by piperh
How Big Is That Box? Understanding Sizing In CSS Layout — Smashing Magazine
Smashing article by Rachel Andrew, titled: How Big Is That Box? Understanding Sizing In CSS Layout
webdesign  web  design  css  flexbox  grid  flex  box  size  sizing  layout 
january 2018 by piperh
New flexbox guides on MDN – Mozilla Hacks – the Web developer blog
by Rachel Andrew. She says: ... Flexbox now sits alongside Grid and Box Alignment to form a new way of thinking about layout for the web. It is useful to reflect this in the documentation. ...
webdesign  web  design  css  flex  flexbox  resource  guide  reference  code  coding  mozilla  grid  layout 
january 2018 by piperh
Unsemantic CSS Framework
they say: Unsemantic is a fluid grid system that is the successor to the 960 Grid System. Not sure if it's built using css grid - needs checking
webdesign  web  design  grid  css  framework  layout 
january 2018 by piperh
CSS Grid Starter Layouts | CSS-Tricks
a collection of starter templates for layouts and patterns using CSS Grid
webdesign  web  design  css  grid  layout  starter  template 
december 2017 by piperh
Learn CSS Grid for free
Course screencast to learn css grid
webdesign  web  design  code  coding  grid  learn  screencast  css  layout 
december 2017 by piperh
Learn CSS Grid in 5 Minutes – freeCodeCamp
Article title: Learn CSS Grid in 5 Minutes
A quick introductions to the future of website layouts.
webdesign  web  design  css  grid  layout  display  tutorial 
december 2017 by piperh
Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
rather complicated way of designing wireframe boxes to use in designing and labelling web layouts
webdesign  web  design  meyer  css  wireframe  layout 
november 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read