Search    Register    Log In   


Bootstrap Developments
Nov 17, 2018 at 6:32 AM

Thought I'd revive this blog to go into more detail about developments in the WSN 10.3 series so far. Let's start with an entry about the bootstrap-related developments, which have been numerous.

To free things up a bit from the non-bootstrap legacy, WSN now has two different base styles. When using a legacy (non-bootstrap) theme, the schemas/base.css gets called in as before -- but for bootstrap themes, WSN now calls schemas/bootstrapbase.css instead. I've been trimming some legacy cruft out of bootstrapbase.css and trying to let as much of bootstrap's own rules take precedence as possible. This has resulted in some visual mistakes in a few releases, like certain tables not being aligned to top that needed to be because I simplified too much. Hopefully I've caught all of those situations now.

The bootstrap user-editable stylesheet (templates/styles/default.css or templates/styles/bootstrap.css) has changed too. In 10.2 and before, it used an @import rule to pull in bootswatch themes or the generic bootstrap from a CDN. This was problematic if you're sometimes working offline with a localhost installation, and also addde another DNS lookup to a another server that can sometimes slow things down, and increased the chances of downtime since both your server and the theme CDN server had to be working for your site to work right. So what I decided to do was have WSN download and cache the bootswatch themes and display them from the local copy. In order to accomplish that, I had to removed the @import from the style and move the bootstrap loading to the backend code.

You now choose your bootswatch theme or specify a custom bootstrap theme source at Admin -> Themes -> Theme Settings. Instead of displaying the theme from the remote source, WSN downloads and caches a copy of whichever bootswatch theme you select and then displays it from the local copy.
The dark bootswatch styles proved difficult as they normally rely on appending a bunch of rules to the user style, which is no longer possible since the user style needs to work equally well with all bootswatch themes. Thus I had to create a schemas/bootstrapdark.css which gets included automatically whenever one of the dark styles is active... hopefully I can eventually phase that out.

Anyway, the bootswatch selector in the theme settings means it's now simple to change the bootswatch after installation, instead of only being able to do it during installation like before. I soon realized that the new system could make it easy to give users a theme choice as well as admins. So I copied the bootswatch theme selector into the registration/edit profile templates and set up a new switch to allow members to choose their own bootswatch themes on bootstrap-using sites. The upshot is you get to offer people about a dozen themes without actually installing or maintaining any additional themes.

To make the admin panel experience more consistent and less prone to display bugs with legacy themes, admin panels are now always bootstrap regardless of what kind of theme the front end uses. For the future, this means I'll be able to design admin pages more easily with only bootstrap in mind. The immediate payoff was that I was able to design a horizontal menu for the admin panel, which has a row of bootstrap button dropdown menus. It's a really compact way of getting a complete exhaustive navigation into a small area at the top of every page, which allows doing away with the frameset. The horizontal menu can be enabled in the theme settings, but it also activates itself automatically whenever you browse your admin panel from a phone -- thus solving the long-standing problem of the admin panel being too wide to be easy to use on a phone.

Your user-editable bootstrap theme now contains very little. One thing it must contain is .isbootstraptheme { } which I now use to identify bootstrap themes, since the @import line is no longer there as a distinguisher. Thanks to the way CSS works, of course, you can still add as much as you want to the user-editable style which has the last say. You can still @import complex multi-file bootstrap themes into it, and write rules to override anything.

In the process of all of this I made a few other minor tweaks. The most obvious was I made the left side menu option display as a vertical button group, which is more in line with how bootstrap intends a menu like that to work.

I also spent a few hours updating and cleaning up the eDir theme which is available at Admin -> Themes -> Add Themes, which is based on bootstrap. Just modernizing there. At some point I need to take some time to make some new bootstrap-based themes, but of course I'm not much of a designer.

I realize Bootstrap 4 is out, but for the foreseeable future I don't plan to transition to that. It's not backwards-compatible, so I'd have to maintain both versions in parallel to avoid breaking everyone's sites. Also it doesn't include glyphicons (due to licensing issues), and working around that with fontawesome alternatives is clunky. And for the moment there's still a lot more bootstrap 3 themes than bootstrap 4 themes out there anyway.

All the bootstrap changes I've been making carry a degree of risk for upgrading old sites, of course. I've done my best to port everything automatically, but things aren't always as predictably deterministic as I hope they are. That's why I wanted to do all this in the new 10.3 series instead of rolling it into 10.2 releases. When doing a new series upgrade, if you have complex customizations it's always a good idea to download a site backup first.

In the next blog I'll be going into all the improvements in integration between WSN scripts.

Views 68 views. Averaging 0 views per day.
Similar Listings
SQL Fiddle, Bootstrap
Custom Pin Images, Reviews & Bootstrap 4

Sorry, you don't have permission to post. Log in, or register if you haven't yet.

Please login or register.