recentpopularlog in

piperh : width   45

Multi-column manipulation: Every Layout
shows how you could use 100vh to make a column page overflow horizontally instead of vertically. + Interesting details about about css column
webdesign  web  design  column  css  height  width 
8 weeks ago 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
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
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
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
CSS Viewport Units: A Quick Start — SitePoint
sitepoint guide to viewport units. Interesting aside about scroll bars eating into 50vw. Handy tip for centering vert and horiz using vh and vw
webdesign  web  design  vw  vh  viewport  units  size  width  height  css  responsive 
march 2017 by piperh
Simple CSS Media Query Generator
online tool for finding generic or specific device screen dimensions. Gives MQ code for you.
webdesign  web  design  rwd  responsive  code  mq  media  query  list  reference  css  breakpoint  width  size  screen  platform 
september 2016 by piperh
Full Width Containers in Limited Width Parents | CSS-Tricks
describes techniques to make full width item even though it's in a limited width container
webdesign  web  design  margin  width  container  css  full  window  parent 
july 2016 by piperh
Neat uses for CSS’s awesome viewport units –
some useful tips, some silly. Nice way to make font size responsive
webdesign  web  design  css  vw  vh  width  height  type  font  size  responsive  fluid  font-size 
july 2016 by piperh
SVG Vector Effects - Call Me Nick
article about scaling svg's without scaling the stroke width. Could be very handy if reducing large icons or other graphics and keeping stroke width the same across a responsive site. And, eg, for Tria label diagrams, would mean not needing fat lines at large responsive sizes
webdesign  web  design  vector  svg  scale  stroke  width  size  graphic  scalable  line 
july 2016 by piperh
Truly Fluid Typography With vh And vw Units – Smashing Magazine
technique to achieve responsive fluid type size using css vw, vh and calc. Looks excessive to me and can't really see why you'd want to do it - but, who am I to know?
webdesign  web  design  typography  fluid  responsive  css  font  type  size  vw  vh  width  screen 
may 2016 by piperh
Use CSS to Specify the Aspect Ratio of a Fluid...
neat article showing a way to maintain aspect-ratio of an element using only css and padding. Author acknowledges Thierry Koblentz
webdesign  web  design  proportion  aspect  ratio  css  size  width  height  padding 
april 2016 by piperh
The Fab Four technique to create Responsive Emails without Media Queries — Free Code Camp — Medium
interesting technique for responsive columns using css calc and without MQs. Based on min-width wins
webdesign  web  design  html  email  responsive  width  min-width  max-width  calc  css 
march 2016 by piperh
FitText - A plugin for inflating web type
makes text scale with window width. Works smoothly though limited application that I can see. Probably more kb's than an svg image.
jquery  plugin  typography  fonts  web  design  webdesign  text  type  fontface  @fontface  webtype  scale  scaleable  scaleability  fit  width 
may 2011 by piperh

Copy this bookmark:

to read