Can this be done with Freeway?

http://cssway.thebigerns.com/workbench/css-flexbox-grids/

Flexbox is a series of CSS tools for building layouts that are more interesting and difficult to build with previous techniques. This example grid layout was taken from something that I’d seen in another thread. Coupled with an inspiring video that my friend Thomas had shared with me,

I decided to go back for another look at CSS flex techniques. I did a couple of test pages just to get a handle on how I might get it working. Although flex is very well supported by browsers, a lot of tools are still lagging. For example, the Webkit environment that apps like Freeway and even Coda use to preview with the app isn’t up to date and cannot be used to preview your work. This slowed my development and experiments considerably.

So I focused on keeping things simple. But while a grid of uniform-size/shape items would have been easier, this was more fun and a more interesting example. Tell us what you think.

http://cssway.thebigerns.com/workbench/css-flexbox-grids/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ahhh yes … since Thomas posted this link of Jenn’s video I was diving into this as well :slight_smile:
And again, great stuff.

Richard

We’re running into these preview issues for quite some time now.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Got the multiple columns going without any problem, but getting text to wrap around a circular image is proving elusive. I have a png where the transparency acts as the circular mask, which I think is correct, looking at the way it’s been done on The Web Ahead Labs page examples.

I’m not particularly code savvy, but my guess is that the

shape-outside: circle

should be applied to the image style extended attributes, but no joy. I’ve also tried using the

-webkit-shape-outside: circle ()

variation that appears in the Web Ahead examples page code. I’ve also tried applying them to just the img tag, using the imported graphic with and without pass-through, and having a wrapping div to the image or with it naked. I am using the latest version of Safari. Stumped.

I thought at first it was the use of WebYep CMS placeholder areas for text or images not allowing the text to flow around the transparency of the image, but I’ve replaced the WebYep derived image and wrapping text with Freeway generated content.

Test page here:
http://www.ianhalstead.com/web-ahead/test-page.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Got it! Simple mistake in leaving a space between ‘circle’ and the open/close brackets. Now to play with offset.

Moral of the story… if it’s not working check the code again. Which I did!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

http://www.ianhalstead.com/web-ahead/test-page.php

Ian, very nice.

Here is some further reading on some of the options beyond the circle() value –

Your columns work in Safari, but not in Chrome or FF. You can add the vendor extensions to make them behave. Here’s how I set them in Freeway:

First, I create a style to apply to the text container and name it “columns”. If I plan to apply the style in the traditional select and click method, then I type

columns

into the Name field of the Style Editor. But if I need to add it as an Extended style then I type

.columns

(with the leading stop) into the Tag field.

Next, I open the Extended interface and in the Name field type

-webkit-columns

Then, in the value field enter

212px; -moz-columns: 212px; columns: 212px

This will force Freeway to write them in the correct sort order (webkit, moz, unattributed). You’ll notice that I do not declare the number of columns… only the width. Browsers will react to this by trying to make whatever number of columns are necessary to meet the width requirement. The result is columns that are responsive to the container-width. Sort-of. It works reliably enough for my tastes, which include justified alignment and CSS hyphens set to auto.

The column-gap and column-rule properties need to be prefixed as well, and you can use the same technique to make Freeway write them in proper sort order as the columns property. In the same Freeway style.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Many thanks Ernie – I managed to work out that the specific vendor extensions were needed, but your method is much more compact than the one I implemented within Freeway. I did the three webkit ones, then the three moz ones and then the three generic ones. You neatly combine the three into one elegant snippet.

Big thanks for the video link to the video which did indeed inspire me!

Ian


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options