ElkArte Community

Elk Development => Theme development => Topic started by: emanuele on September 06, 2014, 06:38:11 pm

Title: Every once in a while I try... BootStrap
Post by: emanuele on September 06, 2014, 06:38:11 pm
... bootstrap! :P

For now that's all I have done. LOL
Title: Re: Every once in a while I try...
Post by: emanuele on September 07, 2014, 12:33:16 pm
Down to the breadcrumbs.
Title: Re: Every once in a while I try...
Post by: emanuele on September 07, 2014, 02:51:49 pm
And I discovered colors! LOL
Title: Re: Every once in a while I try...
Post by: Adrek on September 07, 2014, 02:54:40 pm
Looks good :) I like menu from second SS :)
Title: Re: Every once in a while I try...
Post by: meetdilip on September 07, 2014, 04:24:54 pm
Cool !
Title: Re: Every once in a while I try...
Post by: emanuele on September 07, 2014, 07:25:00 pm
Almost the end of the page, just the footer is missing.
Honestly that page is horrible!! LOL
Title: Re: Every once in a while I try...
Post by: meetdilip on September 07, 2014, 08:34:58 pm
I think it is brilliant.
Title: Re: Every once in a while I try...
Post by: Joshua Dickerson on September 08, 2014, 03:18:39 am
Not bad. Take more advantage of the icons.
Title: Re: Every once in a while I try...
Post by: Allan on September 08, 2014, 08:31:48 am
I agree looks pretty good, Emanuele.
Title: Re: Every once in a while I try...
Post by: IchBin on September 08, 2014, 11:07:24 am
We use bootstrap at work on some of our projects. It's pretty handy. I like the general default size and stuff of things.
Title: Re: Every once in a while I try...
Post by: emanuele on September 08, 2014, 11:46:30 am
Some padding/margins are quite huge...
Title: Re: Every once in a while I try...
Post by: IchBin on September 08, 2014, 01:15:42 pm
There's a handful of those. But they make mobile friendly much easier because of some of those things.
Title: Re: Every once in a while I try...
Post by: [SiNaN] on September 09, 2014, 07:46:02 am
Bootstrap is great. I use it for all my private projects. I had been using version 2 until recently and was very happy with it. Now version 3 has some nice improvements but paddings and margins are huge indeed.
Title: Re: Every once in a while I try...
Post by: emanuele on September 09, 2014, 07:54:17 am
I'm finding this experience rather useful because it's basically a re-write of the theme (not exactly, but a huge re-organization for sure), and this allows me to understand a bit better what is necessary on the theme-side of things.
Title: Re: Every once in a while I try...
Post by: emanuele on September 17, 2014, 09:01:04 am
I uploaded everything here:
https://github.com/emanuele45/Elk_themes/tree/master/themes/bootstrap

For the moment the files I changed are:
index.template.php
BoardIndex.template.php
GenericBoards.template.php
index.css
* themes.js

Everything else is still pending.

ETA: the differences between this and the default theme for these files are available at https://github.com/emanuele45/Elk_themes/commit/ce036ed7c78d84ad451d49a1ee68338ae09ad9d6
Title: Re: Every once in a while I try...
Post by: Spuds on August 24, 2015, 04:36:12 pm
For some reason I decided to do a bit of work on this as well :P

http://themes.spudsdesign.com/index.php

First I must say this is going to be one hell of amount of work.  It really involves updating all of the templates to use the proper bootstrap class names and structure, and ZOMG do you realize how many templates there are !

Have not done anything with making things responsive just, simply trying to come up with a structure / layout that kind of works.  Right now all that is available is the board index, topic listing and message view ... and various other forms like login,  Also updated the help popups to use bootstrap modal etc. 

Anyway lots of things are not done so this is just a taste of the update, it will be a long haul to get everything changed over.
Title: Re: Every once in a while I try... BootStrap
Post by: emanuele on August 24, 2015, 05:36:38 pm
Awesome! :D

Well, a re-write is indeed needed for 2.0, even though the structure was changed a lot for 1.0, it still has several tricks and oddities, and start from scratch is probably the only way to "easily" get rid of most of them in an organic manner... a lot of work though... :(
Title: Re: Every once in a while I try... BootStrap
Post by: TE on August 24, 2015, 10:59:00 pm
Quote from: Spuds – ...and ZOMG do you realize how many templates there are !
Yep, I know what you mean... I started playing with Polymer (https://www.polymer-project.org/1.0/ ) and MaterializeCSS (http://materializecss.com/) a while ago.. It feels like a neverending story..
Title: Re: Every once in a while I try... BootStrap
Post by: Joshua Dickerson on August 25, 2015, 01:22:18 am
Going to check those out @TE
Title: Re: Every once in a while I try...
Post by: Jorin on August 25, 2015, 03:13:22 am
Quote from: Spuds – Have not done anything with making things responsive just, simply trying to come up with a structure / layout that kind of works.  Right now all that is available is the board index, topic listing and message view ... and various other forms like login,  Also updated the help popups to use bootstrap modal etc.

Looks fantastic! So it is possible to create an ElkArte theme with Bootstrap? Wow!
Title: Re: Every once in a while I try... BootStrap
Post by: Antechinus on September 05, 2015, 01:07:49 am
Just wondering about this. Why would you want to? Reason I ask is that for one of my mods I just took a look at the Reseller theme a bloke made over at SMF. It's based on Bootstrap.

So this is a responsive theme, but nothing over the top. Visuals are very basic. The minified (!) bootstrap.css is 98 kB. Then it's running about 60 kB of index.css, and about 5 of reseller.css (these last two files aren't minified).

For comparison, a responsive 2.0.x custom theme I've been playing around with:  loaded with features and eye candy, has an index.css file that is 104 kB, which is only 6 kB more than bootstrap.css. Mine is complete with heavy commenting, luxurious formatting, and I haven't even been through it with a dose of salts to optimise it all yet. By the time it's all sorted and minified it'll easily be under 60 kB.

So the bootstrap-based theme is basically running twice as much CSS, in three http requests, for a theme which is visually and functionally simpler than mine. Go figure.

Then there's Bloc's latest efforts, where he's really gone into simplifying the class structure to keep the CSS down. Still responsive. Still plenty of features that 2.0.x doesn't have by default. Still looks good. The index.css for that is only 42 kB without minification, albeit with fairly dense formatting. Could be minified down to about 30 at a quick guess, or about a quarter of what's required to run the other theme on Bootstrap.
Title: Re: Every once in a while I try... BootStrap
Post by: Joshua Dickerson on September 05, 2015, 01:37:37 am
Where's Bloc's latest efforts?

I think most of the Bootstrap stuff is superfluous and for edge cases but using something that has a lot of support and you can find themes for is pretty nice for developers that want to move fast.

What's 100KB anyway? It's most likely in your cache already if you're using one of the CDN versions. If it's complicated, it is built with SASS so you can easily edit it and like I said, there's tons of support for it.
Title: Re: Every once in a while I try... BootStrap
Post by: Antechinus on September 05, 2015, 03:09:46 am
Bloc's latest: http://www.simplemachines.org/community/index.php?topic=539060.0

100 kb isn't much for storage, but it's a lot to constantly process if most of it is useless.
Title: Re: Every once in a while I try... BootStrap
Post by: wintstar on September 05, 2015, 04:04:39 am
Has Bootstrap trot have a future? Currently, flat design is in, but later also. Bootstrap is not ideal in my opinion for Forum Systems.
Title: Re: Every once in a while I try... BootStrap
Post by: emanuele on September 05, 2015, 08:35:33 am
Why bootstrap?
Well, I picked it just because it's something "many" people come to know. Not because it's good or nice or because I know it.

It's the correct tool?
Probably not. It is indeed bloated, it has several drawbacks (e.g. have to override the predefined design) and more.
But for me it has the "added value" that forces to re-visit the templates entirely and make me think if it really make sense to have something in a certain place.
Of course, this added value is present in almost any other framework out there (and in fact I played with few), so I picked bootstrap to play just because it was the one with more documentation.

That said, do I want to "force" that on Elk 2.0?
Not really. It's something to play with, if something good will come out from somewhere else I'd be more than happy to use it! :D
Title: Re: Every once in a while I try... BootStrap
Post by: Spuds on September 05, 2015, 09:40:23 am
I've found it fun to play with and have learned more about our templates and css.  I don't really see that Reseller theme as bootstrap TBH, its only updated a couple of the templates and still relies on the old template markup structure and index.css.

Right now I've done several template areas, I begin with removing most of the existing class names and then update them to use bootstraps grid layout and use its class names (and structure) for various areas to try and get a similar look.  The index.css file is ~400 lines long and some of that can be cut back,  I've also removed areas of JS and use what bootstrap offers, for example the modal help pages, navigation dropdowns (no superduper) and the form validation for registration (probably removed 1/2 of register.js).  But its just for fun.

Anyway I don't intend to replace or force this on anyone, its simply and experiment to understand what can be done to improve our templates.  They are still un-standardized in markup and redundant across similar views of data.  Many are monolithic and need to be broken down allowing resue elsewhere (some of that was done with the generics but I feel a lot more can be done)  All of this leads to css complications and template bloat and of course maintainability issues. 

Going through this makes me feel like today we use the CSS to try and standardize / make up for our non-standard markup, instead of using standard markup that we can apply the same classes.  Like bootstrap tables .. you can do table table-striped table-bordered table-hover table-condensed table-zomg just add the class(s) you want to your table for the effects / layout you want.  We instead kind of do lets add a new ID to a table then write a table css for that ID.  Sure we reuse that with #bla, #bla2{} and then some #bla2{overrides} ...  I like the here are our table css and here are form css and here are list css vs here is the css for memberlist and message index and .... Anyway just the musings of someone who is not a themer anyway.

On the positive side of a css framework is there are lots of examples help, and its supported and updated.  Additionally someone has done the job of testing it across various browsers and devices.  That compatibility testing is generally a cursory effort on our part.
Title: Re: Every once in a while I try... BootStrap
Post by: Bloc on September 05, 2015, 10:47:35 am
But there are smaller frameworks than Bootstrap out there - if its the framework classes/styles you need.

On the other hand - I don't think you can easily re-use bootstrap themes onto ElkArte. As SMF, its highly specialized script, with some needs only present in forum software. Its kind of a chat/blog thing married with a spreadsheet. :P Seriously though, I think you stand a much better chance of diversity and speed in theme making if you create something simple to begin with. Let the experienced themers build complex themes on that, while the rest can start creating new stuff without too steep a learning curve. Thats my idea with the ShelfLife theme. It has some special features which could be removed (and prob will if theres support for that built-in like in the Elk), and the CSS is much smaller right away.

I don't think its particular knowledgeable to say "100kb here and there isn't that much". If you look around today, mobile devices are taking the lead and far from all of them can run a full-fledged in-yer-face page with 100's of k of CSS and JS without choking. I know, because I have an assortment of mobile phones both cheap and expensive, and the former sucks big time.

If you are blinded by WP themes with equal amount of CSS/JS and think thats working fine - think again. Its all glamour and sell-by-any-means rather than good optimised themes. :P
Title: Re: Every once in a while I try... BootStrap
Post by: Joshua Dickerson on September 05, 2015, 11:18:28 am
So many good posts and nobody arguing :)

Hey Bloc! So... when are we going to see that theme ported for Elkarte? ;) I really like flat designs.

Don't get me wrong, I am not saying just waste bandwidth but the CSS/JS files that Bootstrap uses is probably already in your cache. So, if you stick with the default, you're actually saving bandwidth. As for RAM, there are plenty of sites whose homepages have >1 MB images, even on mobile. They use MBs of JS. So, if you can get to Bing.com or CNN.com and not have your phone be destroyed, you should be fine on a forum with Bootstrap.

I would love to see some base themes made with some base CSS libraries. Then you can easily meld your forum in to your website.
Title: Re: Every once in a while I try... BootStrap
Post by: Bloc on September 05, 2015, 11:48:15 am
As I said..why waste bytes on something that isn't used? If the bulk of  Bootstrap isn't used, I see no point in using it. If its in my cache or not is beside the point really..I have some obnoxious sized pictures there too, which i didn't notice  because I have a 100mb line. But when I did go to that site on my phone using 3G ouside the city(and poor connection at that) ..boy, I wish I hadn't.

Point is, bloat is never good.And in this case it IS bloat.

ShelfLife is planned to be ported to ElkArte, yes, but as you know its bit different than SMF. It will take some time to get to know it good enough to transform it well. And that is my biggest obstacle: since neither scripts have lean and mean default themes, the job to clear them out and make it such that normal features and mods, work fine afterwards, is a lot bigger.
Title: Re: Every once in a while I try... BootStrap
Post by: Antechinus on September 05, 2015, 04:35:41 pm
Hey, give us a chance to warm up. :P

QuoteHey Bloc! So... when are we going to see that theme ported for Elkarte? ;) I really like flat designs.
Quote from: MSN, June 2014 (8:02:28 AM) Antechinus: I get the impression "let's focus on content" and "flat design" are euphemisms for "I can't be gently caress actually coming up with a new theme as such"

(8:02:40 AM) Eliana Tamerin: LOL

(8:02:42 AM) Eliana Tamerin: pretty much
;D
Title: Re: Every once in a while I try... BootStrap
Post by: Antechinus on September 05, 2015, 04:38:03 pm
Quote from: Spuds – Anyway I don't intend to replace or force this on anyone, its simply and experiment to understand what can be done to improve our templates.  They are still un-standardized in markup and redundant across similar views of data.  Many are monolithic and need to be broken down allowing resue elsewhere (some of that was done with the generics but I feel a lot more can be done)  All of this leads to css complications and template bloat and of course maintainability issues.
Yeah sure, I agree with all of that. The whole markup/CSS thing could do with some rationalising.
Title: Re: Every once in a while I try... BootStrap
Post by: Spuds on September 06, 2015, 08:15:04 pm
They have been the victim of many years of abuse ... I bet there are layout/markup in some of them that predates smf 1.0.

I think what happens is that the 20% of the templates, the ones that account for 80% of the usage, get nicely updated.  Then when the stark reality that there is still 80% of the job to go, one can actually loose the will to live ... its zomg why the frig do we have some many templates!   Then you do the smart thing and take the red pill and escape.  Thats what happened to both Ant 1.0 and Bloc 1.0, at least thats what I read on the internet so it can't be wrong.

Anyway every time I look into them I feel they need "something" to simplify, commonise, cleanup ... not sure how to go about that anyway, so the framework was a exercise, at least for me.
Title: Re: Every once in a while I try... BootStrap
Post by: Antechinus on September 06, 2015, 08:53:53 pm
Yeah it was partly that. Thing is some of the templates are ones I've never used in all my years of using SMF. The only time I ever looked at them is when testing the effing things for a release.

Profile stats page is an obvious example. Even when I was running a forum as admin I never found a use for that page. It doesn't look like anything special, and most of the information is pointless AFAICT. Arantor and I were talking about this with regard the YAGNI principle. If you have something that's pretty much useless but is a right mongrel to test and debug, as well as being a bit of a performance hog when called, at some point you start wondering why it's there.

The other thing with themers is they're usually fussy about detail. layout, etc and so they have a tendency to hate shifting goalposts. Bloc and I both find it far more pleasant and interesting to take a codebase we don't like and hack it to suit ourselves, instead of trying to deal with one that's constantly changing. Bikken is the same. If it's going to constantly change, we only want one bugger doing the changes (namely us). Plus we'd rather just do it instead of trying to convince others why it should be done and how. IOW, none of us are team players by nature.

Oh and dodgey broswer shiz sucks. :P

I like the general direction Bloc's going in with his simplification efforts. I has occurred to me that it might be interesting to try and adapt my monster eye candy theme to his template/css basics, just to see what the limits are (if any).
Title: Re: Every once in a while I try... BootStrap
Post by: Antechinus on September 07, 2015, 07:19:18 pm
Oh here's something I found interesting- Tablet Usability: Findings from User Research (http://www.nngroup.com/articles/tablet-usability/)

QuoteSummary: Flat design and improperly rescaled design are the main threats to tablet usability, followed by poor gestures and workflow.

Dangers Ahead

The two main threats to tablet usability are:

  • Flat design. Why not allow users to easily see what they can do? We need a golden middle ground between skeuomorphism and a dearth of distinguishing signifiers for UI elements.
  • Rescaled design. Whether shoehorned down from a bigger screen or grotesquely exploded from a phone screen, too many Android designs simply don’t fit the tablet’s actual screen size. (Poorly rescaled designs are less common on iPad and Windows tablets, probably because of smaller device diversity.)
  
   
The flat design threat is a fashionable trend that will hopefully subside before it hurts users (and companies) too much. The second threat will be with us longer, because it’s caused by resource constraints and the naïve idea that a single design is good enough as long as it adapts to the available screen space.
Yes, you read that right. He said flat design is a threat to usability. :D

Obviously this will depend on exactly how it is implemented, but it's not as simple as "flat design = good".