Skip to main content
Topic: Every once in a while I try... BootStrap (Read 10210 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Every once in a while I try...

Reply #15

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.

Re: Every once in a while I try... BootStrap

Reply #16

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... :(
Bugs creator.
Features destroyer.
Template killer.

Re: Every once in a while I try... BootStrap

Reply #17

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..
Last Edit: August 25, 2015, 04:40:29 am by TE
Thorsten "TE" Eurich
------------------------

Re: Every once in a while I try... BootStrap

Reply #18

Going to check those out @TE

Re: Every once in a while I try...

Reply #19

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!

Re: Every once in a while I try... BootStrap

Reply #20

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Every once in a while I try... BootStrap

Reply #21

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.
Last Edit: September 05, 2015, 01:45:33 am by Joshua Dickerson
Come work with me at Promenade Group

Re: Every once in a while I try... BootStrap

Reply #22

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Every once in a while I try... BootStrap

Reply #23

Has Bootstrap trot have a future? Currently, flat design is in, but later also. Bootstrap is not ideal in my opinion for Forum Systems.
Regards Stephan

Re: Every once in a while I try... BootStrap

Reply #24

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
Bugs creator.
Features destroyer.
Template killer.

Re: Every once in a while I try... BootStrap

Reply #25

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.

Re: Every once in a while I try... BootStrap

Reply #26

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

Re: Every once in a while I try... BootStrap

Reply #27

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.

Re: Every once in a while I try... BootStrap

Reply #28

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.

Re: Every once in a while I try... BootStrap

Reply #29

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
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P