I know how to create a class (swatch) in F6 and how to apply it. It’s the DNA of the framework.
How do you do the same thing in Source, which has no CSS boxes or class-making apparatus?
Use the Source coder stack, select the CSS type and enter the CSS code there. i.e.
.test {background:red};
Then put the test class name of test in the CSS classes section of the Source stack.
Every single Source stack has a Class box and some have several.
Check out the Coder stack.
I don’t really know what Swatches are.
It’s not as easy as F6 but as you say it’s the DNA of the framework, so it’s been made easier to do, Source has it but assumes more coding knowledge to use it.
If I remember I’m sure Joe said swatches might well work in other frameworks, as they are just CSS code in the end.
This has been built into RW for years in the form of CSS code you can add to any page or to the whole site.
Quick test, and yes you can add the F6 swatch stack (not Site Styles) to a Source project and it works. Don’t know if all F6 swatches would work but play around and have a go.
@Webdeersign I think the “class-making apparatus” is more because F6 swatches make it a bit easier to create the CSS code with a Stacks interface, as opposed to coding directly.
3 Likes
Having the facillity to add Classes to every stack in Source was something that Source had designed in from the very start when it was released, which was before F6.
You could also consider Source as a Utility “framwork” in that it includes a large resource of Utility “Classes”. This is a departure from creating additional CSS code and using what is built in, to do complex stuff. This is all built into the Utility stacks inside Source. I.e. it isn’t an additional $59! So instead of adding in additional code, you just use what’s already made available and there is no additional delay by reading aditional stacks settings.
Here are some of the things you can do with the Utility classes:
https://knowledge.shakingthehabitual.com/article/63-utility-classes-addon
https://knowledge.shakingthehabitual.com/article/62-utility-classes-base
Eg. you can add a utility class to darken an image on hover and also make it grow and also rise on hover or create hide/show effects, all by just using these built in Utility classes. You can even build an entire web site using just Coder stacks and these Utility classes - that’s how powerful this is.
4 Likes
This is an absolutely fascinating discussion. Thanks for all of your input.
It must be stated that all Rapidweaver users are not techies, and not all employ web creation/development as their primary focus. In point of fact, RW (as do many others) advertise themselves specifically as vehicles which require no coding at all. That being said, the really good stuff, the really sophisticated stuff, can usually only be attained with those specific skills. If only I had five lifetimes…
So @pmjd, Paul, thanks for being sensitive to the non-coder’s dilemma. To my great surprise, you appear to be correct about the ability to use F6 swatches in Source. Most of the time, that is probably not necessary (so many lovely built-in Source controls), but, for instance, the Font Pro swatches work, are more convenient and less space-consuming than the Font Pro stacks, which also work, and appear to offer more flexibility than the Source font stack (which is not bad at all).
Thanks to @Webdeersign, Gary, the tutorials you linked to are quite the revelation. I had no idea any of that stuff existed. I find Stuart’s videos very calm, very well made, very lucid, but he hasn’t made enough of them. So it is somewhat difficult to understand the full range of Source possibilities without plowing through a ton of written material. Video is definitely my first pedagogical choice.
1 Like
The 2 links are just most of the Utility classes in a list form with a brief explanation. There are loads of demos and examples if you search about.
Coding or writing CSS can make no sense at all to most web builders.
The names of classes tend to be apparently meaningless. However, imagine that you want to add an effect to some images where the image darkens (or blurs, or raises, etc…) on hover.
Historically, stacks users would have gone off to find a stack that did this even though the code to do this is 1 short line of code that anyone who knows CSS will create in about 5 seconds, would have been quite happy to part with good money for such a stack.
In Source these functions are already built in, but instead of making them into additional stacks that will slow down RW edit mode, they are available as a class or otherwise known as a label back in the real world.
Lets imagine the class we want is called This will darken an image when attached to any image in RW Stacks and all we have to do is to type that all out into the Instruction or Label box. Clearly the instruction reads like simple English and makes sense, but it will be quite long to type out and the rules of adding these labels mean they must match exactly. For other reasons we also need to keep them short and unique and in this case, this Utility class has been reduced to just s-dark as listed here. Already you can probably work out what s-bright, s-zoom,s-blur, etc., do based on what you just learnt.
Does this make you a coder or have you become code savy? Of course not, but all of a sudden you can use these effects to do almost anything in Source witout adding extra stacks.
3 Likes
Agreed. Putting aside really elaborate programming skills, yes, sometimes creating certain effects is simple and straightforward (as long, as you said, you know those capabilities exist), and sometimes it is mind-numbingly stupid.
A case in point, and not even the most ambitious effort I have made in this regard, is attempting to color individual letters, or words, separately. This was the absolute gibberish that I had to type:
in order to achieve this:
Another example, again not the most complex:
I only learned the technique, quite by accident, watching one of JW’s videos on a totally different subject. And the only way that I personally can do it, because the software does not recognize the unattached color designations, is by creating little swatches for the colors.
My question, therefore, is why is creating this effect such a ballbuster? Why isn’t there a simple and elegant way to do it? And why did I have to strain my eyes and rerun the video many times trying to decipher this technique?
In Source you can define your colours in a variety of places but in this case, we use the previously mentioned Utility stack.
In this stack you can define many things including 4 text colours. To access them you would use txt-1, txt-2, etc…
In your case you would create a Header with the following HTML.
<span class="txt-1">A </span><span class="txt-2">CHILD'S </span>CRY
So <span class="txt-1">A </span> adds a class of txt1 to the letter A. This will colour the letter A with the colour defined in txt-1.
Google how to add different colours to text will give you all you need - How to Create a Multicolor Text with HTML and CSS
While this may seem complex, it is complex and you are unlikely to find another page builder that has the flexibility of this stacks solution.
What font is this, if you don’t mind me asking?
Fauna
No, I wan’t comparing frameworks or saying one was better than another. I was just saying that that entire methodology, or any minor variation, which you offered, was dumb. And too laborious for the very simplest of effects, which I happen to like very much. Definitely not utility class simple.
Thanks again, though, for your feedback. You are non-pareil…a never ending source of invaluable information. And so generous with your time.
Rouge.
Incidentally, you can use Swatches in Source if you so wish — that was something Joe mentioned which may have been missed amongst all the RW9/Stacks5 drama. Swatches is not F6 specific: you can use it with any framework or theme (of course, you have to have F6 to have the Swatch stacks). You create Swatches as normal (using the Swatches stack, rather than Site Styles), and just put the class names into Source stacks as you would for F6.
2 Likes
Oh yeah, the Swatches stack. I didn’t know it existed . Thanks to @pmjd, I did discover during this conversation that you could use swatches in Source. But what I was doing was opening up F6 in a separate window, creating the swatches there in SiteStyles, and then porting them over.
Your method is infinitely more elegant, of course. And sane. Thank you.
Using the Source Coder stack, you can write CSS directly into the stack as another option.
E.g. If you add some text into a Coder, you could write color: red into the stacks code box and the text will turn red. Then if you add h1 into the class box, the text becomes a red H1 Header.
This makes using code, trying out code and learning code, about as easy as it could possibly be. Using live preview, you can add or edit the code to see the results instantly.
1 Like