Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about css3

Orphans and Widows in Wider CSS Contexts.

6.6.2017

Currently, orphans and widows aren't supported unless you're working inside paged media or columns. Phooey on that - I've got a few use cases where it would be nice to use it in other contexts.

Multiline Headline.

Here is a multiline headline inside an element whose width leaves just one word on the bottom line: Screenshot of a multiline headline in a width that leaves one word on the bottom line. See a demo. It would be nice if a declaration of orphans: 4; on the headline caused the browser to reflow the text so that 4 was the minimum number of words remaining in the bottom line of the paragraph.

Flexbox.

Here is a group of images arranged with flexbox, and just one lonely element stretched at the bottom of the group: Screenshot of images arranged with flexbox, with one element stretched at the bottom of the group. See a demo. It would be nice if a declaration of orphans: 2; on the flexboxed element caused the browser to try its best to arrange the child elements so that 2 was the fewest number of children at the bottom row.

Seven Things You Should Know About Flexbox.

1.10.2016

Flexbox is a great CSS module for making clean and flexible layouts. But flexbox is a bit odd, it can be tricky to get the results you're looking for when you're just getting started. Here are some things you should know about flexbox:

  1. display: flex; goes on a parent element. Then all children of that element become flex items and will accept other flex properties.
  2. Don't use float or box-sizing: border-box; with flex elements. It won't work they way that you'd expect from display or inline elements.
  3. flex-direction defaults to row to lay flex elements out horizontally. Sometimes, you want column to lay elements out vertically instead.
  4. margin-[side]: auto; makes the margin use up all the available space on that side. If multiple margins (in the same dimension) are auto, they each take an even share of the available space
  5. flex-grow: defaults to 0; where elements won't grow beyond the content's width. You probably want flex-grow: 1. Among other things, this handy for making all input elements stretch to use up the remaining space: http://codepen.io/matuzo/pen/eJYdWV?editors=110
  6. flex-wrap: defaults to nowrap, where all elements will be stuffed on a single line (or a single column, for flex-direction: column;). Alternately, you may want flex-wrap: wrap; to allow the elements to flow to multiple rows.
  7. Flexbox is well-supported in all recent versions of Firefox, Chrome, Safari, Chrome, Edge, mobile browsers, and even passably-well supported in IE. See http://caniuse.com/#feat=flexbox.

For more about flexbox, see:

CSS Conf AU 2015 - "Building Better Interfaces With SVG" Talk Notes.

8.22.2015

A while ago, I promised to publish notes from Sara Soueidan's talk "Building Better Interfaces With SVG" at CSS Conf AU in Melbourne. Here they are:

Building Better Interfaces With SVG - Sara Soueidan

Here's the best news: All of the CSS CONF AU 2015 talks are now available on-line, including Sara's.

Breakpoint Backgrounds Bookmarklet.

7.29.2015

When working with media queries, I find it useful to set a page's background color to something to indicate the breakpoint change. But it gets tedious to set it in the browser development tools over and over again, so I figured I'd just handle it with a bookmarklet - a block of JavaScript that you can execute by using a bookmark in your browser.

Since this is just a debugging tool on a local machine, even the simplest methods will get the job done. The most interesting thing is the enclosing javascript:(function(){ and })(); - just javascript protocol which tells the browser to execute it, and wee little anonymous function to hold everything together. Inside that, I create a style tag, and populate it with new media queries and declarations: set the background color to magenta for roughly mobile width browsers, teal for tablets, and orange for widescreen. (I couldn't think of an alliterative color for "w", since I usually wanted to overrule a white background.) All of the styles have a !important to avoid worrying about specificity. Here's the whole thing:

javascript:(function(){
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = "@media only screen and (max-width: 800px) { body { background-color: teal !important; } }" +
    "@media only screen and (max-width: 540px) { body { background-color: magenta !important; } } " +
    "@media screen and (min-width:1300px) { body { background-color: orange !important; } }";
  document.body.appendChild(css);
})();

Just load this up inside the location field for a new bookmark, and run it whenever you want to add the colors. Feel free to change the breakpoints to something for your site. It's just CSS on the inside, so you might have to reset a few more colors or adjust the selectors for your site.

For more on bookmarklets, see Bookmarklets FTW The Case by Lydia Katsamberis from Cascadia JS 2014.

CSS Conf AU 2105 Talk Notes.

5.8.2015

March was a busy month for me. In addition normal work, curating CascadiaFest (closing the CFP and reviewing all the talks) and various meetups in Seattle, I spoke at CSS Conf AU 2015. I was absolutely gobsmacked to that my talk proposal was selected, and thrilled to present a full-length version of my lightning talk from SassConf. CSS Conf AU was a wonderful conference - my deepest thanks to the entire organizing team who did an excellent job of making the speakers feel welcome and putting on a first class conference for their attendees.

As seems to be my habit when speaking, I had a fairly serious case of the "speaker dumbs" and didn't manage to pay the greatest attention to the other talks. Oh well, here's hoping for the videos to come out! Here are the notes that I took away from CSS Conf AU 2015:

CSS for Humans - Matt Sawkill

4 1/2 Methods for Theming in (S)CSS - Harry Roberts

Newton Meets CSS - Evangelina Ferreira

Delivering Responsibly - Scott Jehl

Fundamentals of Front End Ops - Ian Feather

Bye-Bye Bootstrap Bloat - Fiona Tay

Let's move! - Benjamin De Cock

Building Better Interfaces With SVG - Sara Soueidan

Sara's talk was outstanding. I took so many notes for her talk that it deserves to be broken out in its own post. So I will publish something in the future.

Efficient Web Type, c. 1556 - Kenneth Ormandy

Invisible animation - Steven Fabre

Systems Thinking (Going Out on a Limb) - Claudina Sarahe

A CSS Eulogy - Michael Riethmuller

Clean and Simple - Justin Ouellette

Moving towards web components - Andrew Betts

Open Source Design: A Call to Arms - Una Kravets