Bootstrap?

cappytan

Being a web developer, I can't help but notice the similarities between the forum UI and Bootstrap.

Is it based off of bootstrap? I didn't see any of the tell-tale CSS or JS files when I used my inspector.

It is bootstrap based but I don't reference the original bootstrap files directly. For performance, the critical styles are inlined into the html <head> section and the rest load async (i.e. the page can render without having to wait for an external stylesheet to load first).

In both cases, I use gulp + less + uncss to create a custom build of only the components used and tweak styles a little and to strip out and css classes that aren't actually referenced by any templates so the size of the stylesheets is greatly reduced.

The bootstrap javascript isn't used - any custom scripts use Angular.js so it makes sense to use Angular Bootstrap.UI instead. Again, the scripts are built with gulp using browserify and uglify to compress them to be as small as possible.

A lot of the time the pages achieve a very satisfying "100/100 No Issues Found" on PageSpeed Insights which is nice. I've also been looking at other things such as Google's web framework and polymer / material design layouts. Right now though Bootstrap is pretty well supported and used by other components (such as the HTML editor) so don't expect any change for a while.

pixel

Nice info.

nicolaou

What I heard: "magic". :)

Simon

Glad it's useful.

It takes some time to setup but the payback from automating the build and optimization process is fantastic and really does make deployments easier - also all automated so making a code change and putting it live can take seconds, or minutes if I'm trying specially hard not to break anything! :)

There are some other pieces to pre-compile and minify the HTML templates as well which help with performance. Some of the steps are bypassed while developing so that any changes to the source code are reflected immediately - normally less than 10's of ms.

There are still things I want to improve - more unit tests would be good to prevent errors but it's not like it's a banking website. I am more careful with those, LOL.

Simon

What I heard: "magic"

Now I realize I may be like Woody in Toy Story - someone pulled my string and I spew forth techno-babble ...

wannaexit

I can't say i understand - but i am very grateful Simon for this wonderful forum

KateWild

Very interesting thanks Simon

Kate xx

MarkSutter

just curious but are you saying that most of your css is in the head section of your document?

Simon

just curious but are you saying that most of your css is in the head section of your document?

Not quite - just the critical stuff required for first rendering (e.g. basic fonts, overall structure, top navigation etc...) and not the complete css.

Styles for things like the footer (usually only visible if you scroll) and 'extras' like the editor, emoticons and things like that load later so they don't block that first rendering or load at all if they are not required (e.g. the editor for anonymous users).

It helps reduce latency and page render times. A lot of it is based on the guidance from Google's PageSpeed tools but I prefer to bake it directly in to the forum code rather than using the service to add optimization at runtime (never quite as good or quite as fast IMO)

Bootstrap?

Share this