recentpopularlog in

piperh : flex   88

« 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 
3 days 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 
8 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 
9 weeks ago 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
Flexulator
neat tool to play with flex-basis, grow and shrink and see the effect immediately
webdesign  web  design  css  flex  flexbox  online  tool  shrink  grow  basis 
april 2019 by piperh
Quick! What's the Difference Between Flexbox and Grid? | CSS-Tricks
a comparison between css grid and flexbox, pointing out main differences, when is ideal to use one or the other
webdesign  web  design  css  grid  flex  flexbox  comparison  difference 
march 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
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
Rachel Andrew Smashing Mag article about responsive design currently (Feb 2018) - flexbox and grid reduce the need for MQs.
webdesign  web  design  grid  flex  flexbox  media  queries  mq  responsive  css 
january 2019 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
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
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
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
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
How to create a fully responsive navbar with Flexbox
tutorial to make a navbar with flex. Most of it I already know but has handy tips about 'order' and width.
webdesign  web  design  css  flex  flexbox  code  coding 
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
Basic concepts of flexbox - CSS | MDN
another page dedicated to flexbox, but has useful live working examples for playing with. By Rachel Andrew
webdesign  web  design  flex  flexbox  examples  live  test  display  layout 
november 2017 by piperh
The Difference Between Width and Flex Basis
article about the width flex items and how flex-basis is calculated.
eg, If no flex-basis is specified, then the flex-basis falls back to the item’s width property.
If no width is specified, then the flex-basis falls back to the computed width of the item’s contents
webdesign  web  design  css  flex  flexbox  flex-basis  width  min-width  max-width 
november 2017 by piperh
The Ultimate Guide to Flexbox — Learning Through Examples
A tutorial on flexbox building 7 example page layouts. Includes building forms with flex.
webdesign  web  design  layout  flex  flexbox  css  examples  page 
september 2017 by piperh
Designer’s Guide to Flexbox and Grid – Jon Yablonski – Medium
author says: Designer’s Guide to Flexbox and Grid
What designers need to know about these transformational layout tools.
webdesign  web  design  css  grid  layout  flex  flexbox 
august 2017 by piperh
Dive into Flexbox - design, tools and workflow - Bocoup
Fairly friendly description of flexbox, though oldish now - dec 2012, so ignore some of the syntax advice
webdesign  web  design  css  flex  flexbox  layout 
july 2017 by piperh
flex - CSS | MDN
MDN page explaining shorthand syntax for flex:
1 value, two values, three values
webdesign  web  design  flex  mdn  css  shorthand  flex-grow  flex-basis  flex-shrink  flexbox 
july 2017 by piperh
Building Mega Menus with Flexbox — SitePoint
walkthrough of building a mega menu using flexbox. Be sceptical about this, perhaps - check that it works on everything and is properly thought through. How does dismiss work?
webdesign  web  design  flex  flexbox  menu  megamenu  mega  nav  navigation 
july 2017 by piperh
FlexBox cheatsheet
webpage with flexbox declarations and values to copy. Nothing else
webdesign  web  design  flex  flexbox  cheatsheet  code  copy  coding  paste  syntax  css 
june 2017 by piperh
11 things I learned reading the flexbox spec – Hacker Noon
article relating the flexbox specs in a readable way and some of the problems you can encounter with flex items. Some v handy tips
webdesign  web  design  css  flex  flexbox  specification  layout  margin 
may 2017 by piperh
RAGrid.css
nice flexbox grid system. But made with attributes so I'm not sure I'd know how to use it - maybe requires sass. Would have to investigate further
webdesign  web  design  grid  css  flex  flexbox  masonry  column  row 
may 2017 by piperh
Does CSS Grid Replace Flexbox? | CSS-Tricks
article about grid and flex, how they can work together, when one and not the other
webdesign  web  design  css  grid  flex  flexbox  layout 
april 2017 by piperh
the new code – Balancing Text and Images with Flexbox
technique for accommodating pic and words together in boxes using flex. might have been handy for aopc structure
webdesign  web  design  css  layout  structure  flex  flexbox  box  card  panel  technique 
january 2017 by piperh
Flexible Boxes
web tool to generate code for flexbox layout
webdesign  web  design  flex  flexbox  code  coding  css  generator  generate  tool  online  layout 
december 2016 by piperh
Responsive pure CSS tabs & accordion
a flexbox method for css-only tabs. Uses checkbox hack
webdesign  web  design  css  layout  css-only  tabs  accordion  flex  flexbox 
november 2016 by piperh
Make Forms Fun with Flexbox
tutorial on using flexbox to layout forms
webdesign  web  design  form  html  css  flex  flexbox  layout 
november 2016 by piperh
CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine
good, fairly complete explanation of Grid and Flexbox by Rachel Andrew (Nov 2016). List of other resources at end
webdesign  web  design  css  grid  flexbox  code  coding  example  layout  webpage  flex 
november 2016 by piperh
GitHub - Heydon/fukol-grids
really minimal grid framework using flexbox. Sets every child of container as a flex item using *
webdesign  web  design  flex  flexbox  grid  css  system  framework  responsive 
october 2016 by piperh
HOW TO: Pure CSS masonry layouts – Medium
how to achieve masonry style layout using css only and no js
webdesign  web  design  css  flex  masonry  layout  box  block 
september 2016 by piperh
Pure CSS implementation of Google Photos / 500px image layout · Issue #6 · xieranmaya/blog · GitHub
description of making an image gallery (like 500px and google photos) using only css, with straight bottom edge (images of diff proportions)
webdesign  web  design  css  html  layout  image  gallery  flex 
september 2016 by piperh
Horizontal lines around centered content
codepen example of flexbox to achieve horizontal rules either side of centred content
webdesign  web  design  flex  flexbox  rules  css  example  code  coding  horizontal 
august 2016 by piperh
SitePoint's Tiles: A Case Study in Components, Theming and Flexbox
step by step howto by goody goody Hugo Giraudel on making Sitepoints tile layout system using flexbox. Useful demo of using a component and some handy, by the way, good-coding tips.
webdesign  web  design  css  code  flex  flexbox  html  layout  component  bem 
july 2016 by piperh
Designing CSS Layouts With Flexbox Is As Easy As Pie – Smashing Magazine
roundup of flexbox properties and use. Particularly useful for tables showing standard, 'tween' and old syntax
webdesign  web  design  flex  flexbox  css  reference  resource  explanation  syntax  layout 
july 2016 by piperh
Quick Tip: How z-index and Auto Margins Work in Flexbox
useful flexbox resource: explains z-index and margins
You can use z-index on flex items
webdesign  web  design  flex  flexbox  css  layout  z-index  margin 
july 2016 by piperh
The Ultimate Flexbox Cheat Sheet
simple, clear flexbox layout examples with code and result.
webdesign  web  design  css  flex  flexbox  align  centre  vertical  horizontal  layout  webdev  code  coding 
july 2016 by piperh
Flexbox - a Collection by Bermon Painter on CodePen
simple codepen examples of different flexbox uses
webdesign  web  design  css  flex  flexbox  examples 
june 2016 by piperh
How to Build a News Website Layout with Flexbox
tutorial about news site layout with flexbox. Could be a useful generally to understand how flexbox works.
webdesign  web  design  flex  flexbox  css  layout  columns  grid  page 
june 2016 by piperh
Pavilion
a css framework with minimum ui components. They say: A few common UI elements and a grid. The rest is up to you.
Looks useful though I'm not sure if it depends on sass
webdesign  web  design  grid  framework  flex  flexbox  layout  system  css  ui  elements 
june 2016 by piperh
Using CSS flexible boxes - CSS | MDN
mozilla page introducing flexbox, with some and examples.
webdesign  web  design  flex  flexbox  css  examples  modules  code  coding  layout  reference 
june 2016 by piperh
Flexbox Patterns
a few handy examples, with code, of flexbox use especially for components of the final page. eg, within the header
webdesign  web  design  flex  flexbox  css  examples  modules  code  coding 
june 2016 by piperh
CodePen - Flexbox playground
good, understandable playground for learning flexbox. You can change properties and instantly see effect on columns and rows
webdesign  web  design  flex  flexbox  resource  learn  properties  container  item  row  column  css  tool  justify 
may 2016 by piperh
CSS Vertical Center with Flexbox
a david walsh flexbox vertical centering example
webdesign  web  design  css  flex  flexbox  centre  center  justify  vertical  horizontal  example 
may 2016 by piperh
5 Flexbox Techniques You Need to Know About | Tutorialzine
some handy tips on using flexbox for different ends
webdesign  web  design  flex  flexbox  css  code  coding 
may 2016 by piperh
Quick Tip: The Best Way To Make Sticky Footers | Tutorialzine
Sticky footer using flexbox. Seems to work perfectly. Used for AOPC site April 2016. I eliminated the wrap-all div as it seemed to mess up flex functionality, though I didn't persist with tests - maybe you could make it work, cos a wrapper is handy sometimes.
webdesign  web  design  sticky  footer  flex  flexbox  code  howto  demo 
april 2016 by piperh
Sticky Footer — Solved by Flexbox — Cleaner, hack-free CSS
a flexbox solution for flexible height sticky footer. I haven't tried it yet (April 15, 2016)
webdesign  web  design  flex  flexbox  sticky  footer  flexible  height  css  html 
april 2016 by piperh
6 Reasons to Start Using Flexbox
handy post about using flexbox, pitched at my current level. Useful tips and comments.
webdesign  web  design  flex  flexbox  css  code  coding 
march 2016 by piperh
Grd - A CSS grid framework using Flexbox
minimalist grid using flexbox and calc()
webdesign  web  design  css  flex  flexbox  grid  layout 
march 2016 by piperh
Bulma: a modern CSS framework based on Flexbox
they say: A modern CSS framework based on Flexbox
webdesign  web  design  flexbox  grid  framework  flex  css 
march 2016 by piperh
Experiment: Using Flexbox Today - Chris Wright
page with multi-choice working examples to demo the use of flex
webdesign  web  design  flex  flexbox  howto  tutorial  demo  examples  css 
february 2016 by piperh
display: flex
interactive page instantly showing effect of applying various flexbox rules to a layout
webdesign  web  design  css  flex  flexbox  layout  test  testing  webdev 
december 2015 by piperh
IonicaBizau/gridly · GitHub
I think this grid is based on css flexbox though it's not explicitly stated. Uses rows and columns. No indication of how height is dealt with. On his demo, all columns jump to 100% single col at 768px.
See demo at: http://ionicabizau.github.io/gridly/example/
webdesign  web  design  grid  responsive  css  layout  row  column  flexbox  flex 
december 2015 by piperh
Modern web layout with flexbox | Webdesigner Depot
article explaining flexbox, little bit of history, purpose and usage
webdesign  web  design  css  flex  flexbox  about  howto  tutorial  reference  code  coding  webdev 
october 2015 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read