Apologies if I’ve missed this in either of the PDF documents.
Will Xway support user defined CSS styles?
At the moment the application builds and names styles either based on page elements (div, em, p, etc) or as they are needed (#footer, #footer p, .style5, .style6, etc).
Styling html elements is a great start and allows us to quickly build a page that looks uniform and well structured but lacks the power to create unique design elements that can be used again and again. If I wanted too create a ‘call to action’ panel in Freeway (for example) I can create a style that can then be applied to divs throughout the site. These panels all take their look and feel from those CSS styles. To do the same in Xway I’d need to either style each of these elements manually, copy and paste a standard one and change the content or add my own CSS styles as extended attributes and markup items. All of these workflows have their issues.
At the moment Xway’s CSS creation reminds me more of Freeway Express than Freeway Pro where styles are automatically built as they are needed and typically not exposed to the user.
I think you’re talking about user-defined class styles.
Freeway’s style system is essentially a DTP system that is converted into CSS via class styles. Most of the Freeway documents (from users) that I saw contained a small number of permanent styles and a huge number of temporary styles. In cases where users (including me) tried to use a disciplined system of permanent styles (user-defined class styles), Freeway would automatically generate additional temporary styles that were based on these permanent styles.
Xway tries to get away from this confusion. It lets people style text directly (if they want to), but it also encourages them to use default styles wherever possible. When text is styled directly, Xway generates an efficient set of class styles at publish time.
In future we might add support for named class styles. It’s something we’ve thought about, but it’s not something that we’re currently working on.
At the moment the application builds and names styles either based on page elements (div, em, p, etc) or as they are needed (#footer, #footer p, .style5, .style6, etc).
There are really three categories here:
Default styles: div, em, p, #footer p, #item1 p
ID styles: #footer, #item1 (styles that are applied to boxes)
Class styles: .style1, style2 etc. (styles that are applied to text)
I think this is a shame as I tended to use Freeway by setting up a core set of styles and editing them as I built a site. Applying one of those styles to an item is a lot easier than trying to remember what all of the elements are that go to make up a style (padding, colour, border etc).
I totally appreciate that most users tended to style their elements in an ad-hoc fashion and that is fine although, as you say, unless they get the styling exactly correct each time you’d end up with dozens of styles that all were pretty much identical. I’ve seen Freeway stylesheets that are huge and bloated with hundreds of class styles that were (I suspect) only used once.
As I say default styles are a good start but they can’t be used to quickly turn a link (for example) into a button (unless you want all of your links looking like buttons).
I think this is a shame as I tended to use Freeway by setting up a core set of styles and editing them as I built a site. Applying one of those styles to an item is a lot easier than trying to remember what all of the elements are that go to make up a style (padding, colour, border etc).
If you managed to prevent Freeway from generating a huge number of temporary styles from your core set, then you’ve done better than I ever managed!
I don’t actually know how to apply padding or border within a Freeway style. Sure, you could use Extended to do this, but then you wouldn’t see the padding or border in Freeway’s Layout view. Is that what you were doing or is there another way of doing this?
Freeway has very limited support for applying styles to items. Here’s something you could try:
Draw a box in Freeway and give it a yellow background
Type some text within it
Create a style (.style1) and give it a cyan background
Apply this style to the box that you drew
Preview in a browser
What do you expect to see in the browser? What do you see in Freeway? Are they at all similar?
Or (slightly differently): how do you set a paragraph to be red? You could select the paragraph within Freeway and colour it red, but that doesn’t actually set a red style on the paragraph - what it does is create a red span within the paragraph. So then you create a “red” style using the Styles dialog and apply it to the paragraph - but this does exactly the same thing. If you actually want to style the paragraph you have to add some kind of dummy paragraph attribute (e.g. align left) so that you can force the style to be a paragraph style.
Within Xway, all you need to do is to choose Red in the Paragraph Inspector.
As I say default styles are a good start but they can’t be used to quickly turn a link (for example) into a button (unless you want all of your links looking like buttons).
You can do anything you like using Extended Properties.
Xway is currently at version 0.1. There are lots of things that will be added in future versions, but we want to add stuff that works properly and doesn’t have the problems that Freeway suffered from.
I too think it’s a shame that user defined styles are not available yet.
I have looked at the css code for my cotswoldengrineeringsupplies website, and there aren’t any .style1 .style2 styles in there. I purposely tried to prevent that as I found there were some styles that were the same so I went through the whole site and replaced all the .style css with properly configured named styles.
For instance if I wanted a rounded corner box, I have a style that defines the border radius and it is quick to add that to the box, and it keeps the site looking good. The html code is easier to read as you can see what styles are applied to each element.
Most of the css styles are set up on the Masters Page so get carried on to the pages that they are based on.
I know it’s early days for Xway, but this is a learning curve for us all, learning new ways and unlearning old and maybe bad habits.
One thing I liked about Freeway, you could always see if Freeway had added a .style1 to the list!
I have looked at the css code for my cotswoldengrineeringsupplies website, and there aren’t any .style1 .style2 styles in there. I purposely tried to prevent that as I found there were some styles that were the same so I went through the whole site and replaced all the .style css with properly configured named styles.
I think you’ve done a remarkable job in getting rid of Freeway’s temporary styles!
Looking at your web site, it seems like you’ve relied heavily on using “tag styles” with lots of extended properties, so there is quite a bit of “hand-coding” in there. I would guess that the page looks quite different in the browser than it does in Freeway.
You’re what I would describe as a power user.
Freeway and Xway try to cater for power users as well as normal users. That’s one of the reasons that Xway already supports Extended Attributes and Extended Properties along with CSS and JavaScript Markup (and Markup items).
In your case I think you could do many of the same things in Xway:
If you want to set a class on a box, you can use Extended Attributes to do this
If you want to define your own CSS styles, you can use CSS Markup to do this
Most of the css styles are set up on the Masters Page so get carried on to the pages that they are based on.
We’re planning to support (individual) master pages in a future version of Xway, but you can define your own CSS styles on the document master page:
On Thu, Nov 7, 2019 at 01:34 PM, Jeremy Hughes wrote:
Looking at your web site, it seems like you’ve relied heavily on using “tag styles” with lots of extended properties, so there is quite a bit of “hand-coding” in there. I would guess that the page looks quite different in the browser than it does in Freeway.
Yes, that’s true! What started as a simple site made with Freeway 4 back in 2009 has now grown to a fully e-com site made with Freeway 7 with a lot of extra bits added in mark up and all the pages as .php.
So it’s not quite wisiwig, but you can see the structure of the pages and the page code has been annotated so that I know what bit does what.
I’ll have a go with Xway and see how easy its is to do what I have done with Freeway
I think this is a shame as I tended to use Freeway by setting up a core set of styles and editing them as I built a site. Applying one of those styles to an item is a lot easier than trying to remember what all of the elements are that go to make up a style (padding, colour, border etc).
Hi, Tim, that’s how I do it as well.
At the end of a project, I don’t want any temp styles… all the predefined ones are thought about, named correctly, ordered, so they cascade and already worked out based off the design, and this way before the construction begins and if things need changing or are introduced then I change them or add new styles.
The amount of work arounds I had to do to create templates that had a set of ‘base’ css items already constructed and in a way/order I wanted was really quite challenging and convoluted. So any improvement on that would be nice.
I’ll have a go with Xway and see how easy its is to do what I have done with Freeway
Let us know how you get on.
We’re definitely interested in adding power features to Xway, but we also need to implement basic functionality that isn’t there yet: pasted graphics, more support for copy/paste generally, Edit Resources view, and so on.
Hi Jeremy, as mentioned above, this is my starting point template, so you get an idea of what and how I setup Freeway. Basically, my template contains these (in my linked picture) styles, so I don’t have to create any of the stuff from scrtach.
I then edit them, so they match the design Note that I order things in the way I want them to be published which also includes clustering the colours together and to achieve that I have had to work out a set of different interface hacks. So for example spaces before the style name elevates it up. Capitalisation also has a bearing on its published order. A style being named in the tag field also has an effect and so by a combination of all these techniques I can order them all. I have included an image of what you see in Freeway.
I do appreciate what I have had to do isn’t probably normal, but its something I have had to work, so my structure is a lot closer to what our developers need.
Obviously, I understand this is day 3 of beta 1, but it would be nice to think that at some point in the future ‘user’ defined styles and ordering them could be looked at.
Again I’m not complaining… just my thoughts for what they are worth.
I’ve logged an issue that contains some of the feedback in this thread along with your screenshots and the screenshot that Richard van Heukelum posted earlier.
Do CSS Markup and Extended Attributes (for setting class names) meet any of your needs?
On Thu, Nov 7, 2019 at 04:36 AM, Jeremy Hughes wrote:
I don’t actually know how to apply padding or border within a Freeway style. Sure, you could use Extended to do this, but then you wouldn’t see the padding or border in Freeway’s Layout view. Is that what you were doing or is there another way of doing this?
Oh most of what I did in Freeway ended up in the Extended dialog. That feature alone kept Freeway relevant for me for many years.
Freeway has very limited support for applying styles to items. Here’s something you could try:
Draw a box in Freeway and give it a yellow background
Type some text within it
Create a style (.style1) and give it a cyan background
Apply this style to the box that you drew
Preview in a browser
What do you expect to see in the browser? What do you see in Freeway? Are they at all similar?
Reading down this list I had in my mind’s eye that the box would become cyan (as it does). The fact that Freeway sets the text background to cyan was always something I’d ignored as I’d imagine that these styles were originally intended to be applied at a text level rather than a box level and that the rendering engine never really got updated to deal with that scenario. There were a few usability rough edges to Freeway that, after a while, you’d just learn to ignore as you know the final code output would be fine.
On Thu, Nov 7, 2019 at 08:11 AM, Jeremy Hughes wrote:
Not in Safari and Firefox…
[The box is yellow because ID attributes have higher specificity than class attributes.]
I now see what you mean. That’s a tricky one.
In my rush to test that out I’d neglected to make the item a layer (div). You see sometimes a table layout can save the day!
I totally appreciate that most users tended to style their elements in an ad-hoc fashion and that is fine although, as you say, unless they get the styling exactly correct each time you’d end up with dozens of styles that all were pretty much identical. I’ve seen Freeway stylesheets that are huge and bloated with hundreds of class styles that were (I suspect) only used once.
So true! My early ad-hoc styling in Freeway Express ended in my having one of those bloated stylesheets with, as I recall, about 600-700 styles. That bogged down the speed of Freeway to a snail’s pace. When I moved to Fwy Pro and learned to create a custom stylesheet, I got that down to about two dozen styles, which work perfectly for my website’s ~470 pages. And once more, the speed of working within the Freeway software is fast.
