recentpopularlog in

piperh : flexbox   85

« earlier  
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 
6 weeks ago 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 
9 weeks ago 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 
11 weeks ago 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 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
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
Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf
example of a menu with progressively hidden items using only css.
'More' always shows so you must always have at least 1 hidden item otherwise it's confusing
webdesign  web  design  navigation  menu  flexbox  css  nav  responsive  hide  hidden  progressively  example 
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
Spectre.css: a lightweight, responsive and modern CSS framework
They say: "Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development." Looks interesting. Doesn't contain some necessary js - they assume you have the skill to hook up your own
webdesign  web  design  grid  system  framework  css  flexbox  responsive  components  layout 
april 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
Layout Demos by Jen Simmons
gallery of css page layouts and techniques
webdesign  web  design  html  css  layout  webpage  grid  flexbox 
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
How To Get Started With CSS Flexbox
nice simple explanations of different uses for flex
webdesign  web  design  css  flex  flexbox  display  howto  tutorial  technique  layout  responsive 
june 2015 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read