Updated is my Starter Template for those Freeway Pro 6 users who want to get their hands into inline/in-flow/box-model layout techniques. Download and deconstruct the FWP6.1 file here:
http://cssway.thebigerns.com/products/inline-basic-layout/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
A thing of wonder - thank you very much. Could I just ask a couple of questions?
How come some of the fonts are sized in points and some in percentage? All the text looks much bigger in my Freeway file. The Heading appears on the web in 2 lines - but only 1 in the Freeway file and doesn’t appear to be a return, forced or otherwise.
The ‘E’ logo also appears much bigger in Freeway and aligned left. I think you have mentioned before that your Freehand file is rarely WYSIWYG - must make designing a bit more complicated.
I presume of lot of has to do with web fonts - which is my next challenge. Would love a step by step (and I mean taking by the hand in every little step!).
Thank you once again.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Another question!
On the navigation panel on the web the social network icons appear, but I can’t see them anywhere in the items list in the Freeway file, just text with links - how so?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Except for Noel, this thread is really quiet – hope my beard didn’t scare
everyone away!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Noel, these are all good questions!
The last introductory In-flow layout I made was fairly devoid of content
and focused instead on just the basic section construction – a header
section, content section, and a footer. With this version, I want to up the
ante a bit and show users how in-flow content can be handled as well.
Once you work out how to build inflow sections, if your content doesn’t
respect the in-flow layout, your layout will break.
With this layout I’ve done some things with content which I deem “basic” –
things like a simple menu, sidebar content… they aren’t necessary to make
the template work, but I think it’s good to have a look at how some of
these things can be made with CSS. They don’t have to be made the way I
made them, this file is for demonstration purposes only. To show you what
can be done with CSS.
CSS styling is what makes my workpages look so different from the browser
preview. Freeway Pro on its own would never write the styling code this
way, so I have learned to tolerate a workview that renders differently than
the browser. FWP only renders some of the CSS in the workview - I wish it
did more but that isn’t up to me.
**How come some of the fonts are sized in points and some in
percentage?**
If you look at the Extended styles for font-sizes that are declared in px,
you will see they are over-ridden by font-sizes in ems. EMs and Percentages
are relative units and I prefer them because they are more flexible in the
browser. However, FWP does not support ems for font-sizes and has only
limited support for percentages. Declaring a size in px then over-riding it
in the Extended Styles allows FWP to draw a certain font-size in the
workspace, but output the measurement I actually want for the browser.
Declaring font-sizes in relative measurements is a choice, not a necessity.
I choose to do so and this example is to show you how I make it work in FWP.
**The Heading appears on the web in 2 lines - but only 1 in the
Freeway file and doesn’t appear to be a return, forced or otherwise.**
I think semantics - the meanings of elements in web pages - is important.
As a result, I like headings that read like natural sentences. But like
everyone else, I also like the visual pizazz of headlines and subheads.
This style technique allows me to break a headline without using forced
returns or other structural elements that might semantically break the line
and therefore disrupt it’s meaning. Using this span-style to inflict the
display:block property on a portion of the line also allows me to create
some visual drama - through size or color or both - upon a portion of the
line. Because it is only CSS, the effect is only visual. I wish FWP’s
workspace could interpret and render this, but that isn’t up to me. It’s a
nice effect, I think, and not so hard once you understand what is happening
and what is supposed to happen. However, not mandatory - you can still work
anyway you like with text as long as it stays in-flow.
**The 'E' logo also appears much bigger in Freeway and aligned left.**
Generally, I like to insert images as “pass-thru” - in other words, not to
be generated by FWP. This is just my personal preference. However, FWP can
make handling such images very difficult, so I have worked out how to do
simple things like resizing and placement through CSS instead of Freeway’s
controls. Since the image must be an in-flow item anyway, it is still
easier for me to control thru CSS. Again, it is not necessary to work with
images this way – this is for demonstration purposes only.
**On the navigation panel on the web the social network icons appear,
but I can’t see them anywhere in the items list in the Freeway file, just
text with links - how so?**
Again, it is CSS. I gave each link an extended class attribute, which I
then defined with FWP’s styles. There you will see the images added as
background-images. If you turn off styles in the browser they will vanish.
Most people will use an action to create their menu, I don’t need to. There
is more than one way to create a menu list of links and again this is for
demonstration purposes only.
** web fonts - which is my next challenge. Would love a step by step**
Well, you’re in luck - sort of. I started to update my tutorial here:
http://cssway.thebigerns.com/workbench/google-fonts/ - it’s mostly
finished, but you can still work out the technique. It’s surprisingly
simple (except for making font-families in FWP, arrgghh!!).
For step by step how to create an inline, in-flow, box-model layout you’re
better off subscribing to Thomas’ screencasts -
http://www.kimmich-dm.de/screencasts.php My demonstration file will make
more sense once you apprehend the basics. The rest is just to keep your
mind open to different ways to make FWP work for you.
Ernie Simpson
On Mon, Sep 9, 2013 at 12:19 PM, Noel Sergeant email@hiddenwrote:
A thing of wonder - thank you very much. Could I just ask a couple of
questions?How come some of the fonts are sized in points and some in percentage? All
the text looks much bigger in my Freeway file. The Heading appears on the
web in 2 lines - but only 1 in the Freeway file and doesn’t appear to be a
return, forced or otherwise.
The ‘E’ logo also appears much bigger in Freeway and aligned left. I think
you have mentioned before that your Freehand file is rarely WYSIWYG - must
make designing a bit more complicated.
I presume of lot of has to do with web fonts - which is my next challenge.
Would love a step by step (and I mean taking by the hand in every little
step!).
Thank you once again.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’d like for anyone who can explain why -wekbit-column-span isn’t working
for me in webkit browsers? Safari and Chrome won’t, but Coda’s built-in
will. Aaaaggh!
Guess I must have missed a memo or something. X-0
–
Ernie Simpson
On Mon, Sep 9, 2013 at 11:51 AM, The Big Erns email@hidden wrote:
Updated is my Starter Template for those Freeway Pro 6 users who want to
get their hands into inline/in-flow/box-model layout techniques. Download
and deconstruct the FWP6.1 file here:http://cssway.thebigerns.com/products/inline-basic-layout/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It works for me. Can you post the code? Maybe I’m doing something wrong.
Todd
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you, Ernie for the template and the web fonts tutorial!
Marcus
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It’s really very straight-forward… the enclosing div has both the
column-count and column-gap attributes (in -webkit and -moz vendor styles).
The h3 hed has the column-span property (plus -webkit and -moz vendor
styles). Yet in Safari, Chrome, and Firefox (all up-to-date) the hed splits
with the column instead of spanning it. My iPad shows it correctly in iOS
Safari and iOS Chrome, but not on the iOS Simulator on my mac.
X-P
–
Ernie Simpson
On Thu, Sep 12, 2013 at 1:14 PM, Todd email@hidden wrote:
It works for me. Can you post the code? Maybe I’m doing something wrong.
Todd
http://xiiro.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
crikey - that’s what I call an informative answer! Will have to have a lie down and consult it for a while - thank you very much.
noel
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 9 Sep 2013, 3:51 pm, The Big Erns wrote:
Updated is my Starter Template for those Freeway Pro 6 users who want to get their hands into inline/in-flow/box-model layout techniques. Download and deconstruct the FWP6.1 file here:
Nice work Ernie—as usual. 
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options