Web Styling in 2023

Does anyone have or know of a fairly comprehensive primer on how to implement css styles in Xojo web? I have tried lots of styling options since Web 2.0 and I can make things look like what I want on a computer, but I’ve yet to see any hint that I can make a page responsive like I can with PHP, HTML and CSS Nor can I keep a maintainable and refactor able code base like on the traditional Web. Obviously, a large part of this is just me, but since there are a lot of style and Bootstrap questions on this forum it strikes me that a video or a couple of how-to articles on this subject might be of use. I don’t care much for Bootstrap but I am willing to use it if I know basic things like how to modify the styles and how html tags used by css are mapped to Xojo web controls (or do you just need to assign IDs?). For instance, how to I use CSS Container or Table or Grid on a Xojo web page? It seems to me that this subject calls for a rather more involved explanation than “just drop Bootstrap on the Xojo navigator”. I doubt if I will care for the Bootstrap default for anything ever, and I don’t want to modify every single control I have individually to the end of time (even though it works fine when I do that). Bottom line, since there is no DOM in Xojo web development, a lot of rules I’ve taken for granted in web development seem no longer to apply and I’d love to know what the differences are.
Thank you
fritz

You don’t, at least without a lot of hacking.

While the Bootstrap framework is used, its primary function is to get consistent controls that can be themed. The layout features on the other hand are largely unused because of the limitations/expectations of the Xojo framework.

That said, you could use the Web SDK to create any views you want within a page… and @Brock_Nash has done extensive work in exactly what you are describing. It’s just not built in.

Well, if there’s anything I know less about than Bootstrap 4, it’s Web SDK. Since I’ve got nothing but killtime tonight, I might as well go have a look and see if I get lucky.
Thanks very much for saving me a lot of time on the Container and Grid. That was half my issue with adapting CSS to Xojo.
fritz

Just so you know, things that subclass from WebView have a property that sets the type of layout between default and “flex”. It can be used to create a view that “fills up” as new items are added.

This is potentially something that might serve as a substitute to the @media rules in css (and just a great way to resize a page in general obviously). I haven’t explored this in full because the docs seem to suggest it applies to web containers only. I don’t know if that translates into “things that subclass from WebView” but I’m going to try this out since it seems closer to my skill level than the WebSDK path. Thanks for the tip.

Can someone write a comprehensive / step by step tutorial on WebSdk for Web2.0? Especially in light of the migration of Xojo Web 2.0 to Bootstrap 5. It will be good for the whole Xojo community.

1 Like

Ricardo did a session at our 2022 conference about the WebSDK. You can view it on our YouTube channel.

1 Like

Does the information in this post (2015) about using your own CSS style sheet still apply to Xojo Web in 2003?

Thank you
fritz

I haven’t used an external CSS file but I use several CSS styles directly in App HTML Header. You can see several examples here in the Web forum since 3 years ago (tested on the current Xojo Web).

I have put CSS in the HTML Header, but I didn’t see how to connect that CSS to the page elements like I would on a web page. I have seen lots of people on the forum discuss this topic, like:

but there doesn’t appear to be any clear consensus–and little documentation that I can see (besides really impenetrable forays into WebSDK, which I am not qualified to pursue, even if I were interested). I read you could use a WebStyle name to link CSS to a page element. Is this how you do it?

Thank you
fritz

This thread may help you:

Regarding your link: I am using WebStyles (augmenting them with WebCanvas when appropriate) and they work fine. As far as implementing classes via a method implementing jQuery, that is a science project from Hell that I will leave to more enterprising coders. People much brighter and more ambitious than me do that on the html side sometimes for a menu design, but I stick to CSS and let PHP do the heavy lifting.

The reason I’d like to use CSS is simply reusability. On the html side, you create one or two CSS stylesheets and assign IDs and defaults and the rest of your layout work is practically done for the whole site. Yes, I can create libraries of elements with WebStyles, but I just figured if somebody went to the trouble to implement CSS in Xojo, I’d like to give it a go.

Thank you very much for your reply,
fritz

When you use the old Web framework, then it still works, yes.

With the new Web framework they removed webstyles (aka CSS classes) and thus it gets harder to use CSS-Classes in a Xojo Webproject.

Not impossible though. You could still add classes by using Javascript. I made an example here:

2 Likes