Getting Familiar With RW - Part 2 of 3

Hello DreamWeaver Community…
Still getting my feet wet working with Stacks 3 and the Foundation theme as I am experimenting with all the functionality of RW. I don’t have all the foundation stacks yet as I am intentionally wanting to see how the manual side of RW works.

This leads me to a couple questions…

  1. Once you drop a stack in and RW assigns it an ID, does this ID stay with that stack until it is removed?

  2. If it were removed will RW use that ID on the next stack that gets used or is the name made obsolete?

  3. I was able to use some custom CSS and target the ID just fine but noticed my CSS was put in the HEAD of my site. Is it possible to externalize the CSS so the HEAD does not get so bloated on pages that I use a lot of custom CSS?

Thank you in advance,
Dave

Hello Again… Any input regarding this would be most appreciated as I like to have the flexibility to hand bake things as needed.

I’m not 100% sure how IDs work. That would probably best be a question for @isaiah to answer. Your assumption that every stack added to a project has a unique ID is correct, but I don’t know for sure how long a stack hangs onto that ID - whether changing the order of stacks on a page would cause all the IDs to change. Can’t be sure and not tried it myself.

Generally it has often been considered safer and more reliable in the past to target individual stacks with custom CSS using class selectors. That is certainly the case for any addon stacks that give you the option to apply unique class names. Some stacks do also let you give components unique IDs you can use for CSS, and those will hold-fast all the time you don’t change them in the settings.

RapidWeaver 6 has a placeholder in the Page Inspector and master settings to accept custom CSS code. Some themes also have a dedicated custom.css file, which combines both advantages of site-wide CSS and being able to edit it using your favorite code editor, with the assistance of things like error checking, autocomplete and syntax colouring.

1 Like

Thank You Will… Most helpful.

So it sounds like externalizing CSS is a no go unless the Theme has made provision for this ? I am leaning towards the Foundation for RW Theme as I am use to having total control of all layout. Just want to be sure I am not locked out of the ability to tweak things as necessary.

Kind Regards,
Dave

Foundation will give you exactly the freedom you want. Also you can use Joe Workman’s CSS Box (free) stack to assign a class name to whatever stack you drop inside it. Some stacks also have a box to allocate a class name.

I tend to think of Rapidweaver as a front end to enable Stacks and using Foundation allows you to place whatever you want where ever you want, starting with a blank page. The Foundation Theme is the blank page. Rapidweaver with Stacks and Foundation is a very powerful, flexible and different web development set of tools when compared to using Themes in Rapidweaver.

I don’t know the specifics of how Foundation handles CSS code. But some conventional themes from developers like myself and few others have carried the custom.css file support for a very long time and it does give you the power to write and apply custom CSS code safely; that will take effect over all pages applied to the theme, and universally through all RapidWeaver page types (like file sharing, Markdown and the blog). If a theme update becomes available, then you can simply copy your custom.css file over into the new theme and continue on with it.

Thank You Conger & Will…

This is sounding more and more like exactly what I am looking for. So Conger do you know if Joe’s CSS Workbox stack outputs its code to the HEAD or is it externalized?

Also Will, I went over to your site and had a look at what you have to offer, great stuff. A little blown away by the “Builder” stack, this opens a world of possibilities. Nicely done, have to give this a go in the near future once I have made the decision to go all in with RapidWeaver.

Regards,
Dave

Yes. And you can depend on this, it’s part of the Stacks API, so it’s locked down and written in stone. Stack IDs are permanent and guaranteed to be unique within a document. With two exceptions:

  1. If you Cut and then Paste the stack it will be treated as a new copy and may get a new ID.

  2. If you delete a stack then Undo the deletion (so the stack comes back) it will be treated as a new copy and may get a new ID.

rule of thumb: if the stack leaves the page then comes back, it’s a new stack and may get a new ID.

If it were removed will RW use that ID on the next stack that gets used or is the name made obsolete?

The ID will eventually be reused – when is not guaranteed. In practice, however, t’s unlikely to be soon after the stack was deleted.

I was able to use some custom CSS and target the ID just fine but noticed my CSS was put in the HEAD of my site. Is it possible to externalize the CSS so the HEAD does not get so bloated on pages that I use a lot of custom CSS?

Yes. You can include your other file as a RapidWeaver resource and then reference the CSS file in the head. However that’s an entirely manual process (but it sounds like you’ve got the tech chops. :wink: )

Just be forewarned that an external HTTP fetch (required to get the CSS file from your server) will cost your page load extra micro seconds. Although sometimes the organizational benefits outweigh that cost.

Isaiah

2 Likes

FYI: I’ve added the questions about Stack IDs to the Answer Cafe

Feel free to add your own details or ask followups.

1 Like

Thank You Isaiah… Your input is valued, appreciated and so helpful. I believe I am getting a really clear picture of the RapidWeaver tool as well as it’s friendly and helpful community.

My biggest concern was that RW will lock me into a templet only approach. My skills on the development side are not deep but I have been making an effort to increase them whenever possible. I use web development tools to self manage my companies online presence so as to keep it engaging and standards compliant. One of my ventures is for students with a full subscription registration system and a growing user base, so having a design and development platform I can both understand but allows for custom and professional level solutions is key.

Kind Regards,
Dave

I was able to use some custom CSS and target the ID just fine but noticed my CSS was put in the HEAD of my site. Is it possible to externalize the CSS so the HEAD does not get so bloated on pages that I use a lot of custom CSS?

If you watch this WeaverCast

Joe explains how he uses custom CSS on an external file. It is a VERY old video, but he still does this on sites he makes today. Very easy to do.

1 Like

Thank you for the link Robert. The video was helpful.

Kind Regards,
Dave