Responsive with Skeleton?

[Mat]

IMO, TW is currently not designed with responsiveness in mind, or at least not with mobile in mind.

How about adopting Skeleton or Skeleton Framework as a CSS framework for TW? (For ref, here's a comparison between Bootstrap, Foundation and Skeleton. And here's a nice intro video.)

So, a key aspect with Skeleton is that it's really vanilla CSS (and small). Now, I'm not well versed in these matters but I'm thinking maybe Skeleton would be appropriate as a plugin, not least for when people develop TW stuff, they could style consistenly and appropriately, not least for mobile. 

It seems Skeleton may not be actively developed anymore (?) - but because it is really just plain CSS, then this shouldn't really matter because it would give us a structure for our CSS where we currently don't really have any structure (as far as I know - am I wrong?). To name one use case; If someone wants to make TW-gizmos then it's problematic because there's no structure to put it into. With something like Skeleton they could adapt it to the 16 or 12 column grid that I understand is a central idea in Skeleton.

Now, to adopt it we'd therefore probably have to tweak the current Vanila and Snow White themes - or perhaps introduce new themes as standard ones. BTW, I imagine non-developers like myself and perhaps equally enthusiastic fellas like @AlexHough, @Hegart maybe @Dave Gifford and others might be able to actually make a significant contribution. I can't speak for anyone else of course, just saying that it's an opportunity that for once doesn't rely fully on the coders among us.

Still, in the end it will not work without full acceptance from the core developers.

Thoughts?

<:-)

[CodaCoder]

On Wednesday, April 6, 2016 at 5:44:42 PM UTC-5, Mat wrote:

IMO, TW is currently not designed with responsiveness in mind, or at least not with mobile in mind.

IMO, TW5's "responsiveness" is related more to the time it has to spend traversing and updating the DOM (and its internal structures) from script, not its use of CSS or lack of framework [insert flavour-of-the-month here]. 
 

[Eric Shulman]

I'm fairly sure Mat is referring to https://en.wikipedia.org/wiki/Responsive_web_design, as opposed to responsive *performance* issues.

-e

[PMario]

Hi Mat,

That's a nice idea. ... but imo the problem is, that you basically suggest, to create a new UI from scratch. ... You can't plug in a CSS framework. You need to start to create a new UI from scratch, that uses the framework principles, if you want it to be consistent. This is true for skeleton, framework X, Y or Z.

So the idea is nice, but the amount of work, that needs to be done is very very high. ... Especially, since you need to reverse engineer - and document - the existing UI first.

The current UI is built with PCs in mind. So having a light weight (and less flexible) mobile UI would be nice. ... So the idea is very compelling.

just my 2 cents.

-mario

[Jeremy Ruston]

I think Mat is indeed talking about responsive web design.

To be clear, the default Vanilla theme does in fact include numerous responsive media queries, and adapts itself quite radically to different screen sizes.

With mobile, I think that the issue isn't so much that we don't have a responsive design, but that the responsive design for small screens has some significant usability issues.

Anyhow, over the years I've looked at many, many CSS/JS frameworks like Bootstrap, Zurb, Semantic UI, etc. I've found a few things:

* Many of the frameworks are designed for web pages, not apps, and lack many of the UI elements we need

* Even the ones that focus on apps (like Bootstrap) have several problems for us, such as reliance on their own JavaScript, or lack of flexibility (for example, when TW5 used Bootstrap in the early alphas, I found that their CSS for tabs couldn't be resized)

* Often the frameworks require very specific HTML that doesn't tolerate additional DIVs and SPANs

If I was starting TW5 now, I would still try to use one of the standard libraries (I prefer Semantic UI), but where we are now the choices are pretty stark:

* Tweak the existing themes (eg introducing something like the Zurb Foundation side menu for small screens)

* Create a completely brand new theme, based on one of the frameworks

The latter option sounds hard, but actually it's the kind of thing that one could probably get up and running over a couple of days.

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

http://jermolene.com

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/94004923-bbda-400d-bfc0-0405fdeeb22c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mat]

In deed, Responsive Web Design.

Jeremy wrote

where we are now the choices are pretty stark:
* Tweak the existing themes (eg introducing something like the Zurb Foundation side menu for small screens)

Wouldn't Zurb and most others of these frameworks mean you must include additional (and weighty) js libraries etc? And using only pieces of a framework (such as for a side menu) might be useful - but you don't get the consistency which is the point with a framework (right?). The idea with bringing up specfically Skeleton was that is seems to be almost more about a consistent "html+css philosophy" that we could stick to. Yes, there's the Skeleton grid and some bits that do mean including stuff, but overall it would be valuable so that TW users can predict behaviour (e.g positioning) for when their plugins etc are used by others. 

Like Mario, I´d think introducing a new framework would mean reverse engineering and creating a new UI from scratch based on the framework principles. So when Jeremy suggests 

* Create a completely brand new theme, based on one of the frameworks

..I must ask, is a "TW theme" more than just CSS? Or wow could a new theme work properly without tweaking around in the rest of the code to make it fit into that theme?(Interestingly, I just noted there is very little on themes in the docs).

<:-)

[Jeremy Ruston]

Hi Mat

Wouldn't Zurb and most others of these frameworks mean you must include additional (and weighty) js libraries etc?

Yes, that’s one of the drawbacks that I mentioned.

And using only pieces of a framework (such as for a side menu) might be useful - but you don't get the consistency which is the point with a framework (right?).

Most frameworks are hard to use piecemeal, and a bit pointless, because their raison d’être is to enforce consistency.

The idea with bringing up specfically Skeleton was that is seems to be almost more about a consistent "html+css philosophy" that we could stick to. Yes, there's the Skeleton grid and some bits that do mean including stuff,

I don’t see anything much different in the philosophy of Skeleton from the others, but maybe I’m missing something.

but overall it would be valuable so that TW users can predict behaviour (e.g positioning) for when their plugins etc are used by others. 

That’s a theoretical benefit that may or may not happen, but you’re ignoring much more serious obstacles: frameworks like Skeleton just don’t have the functionality that we need. Look through the Skeleton examples and you’ll see what I mean.

I think it would be helpful to understand more what the problem is that you’re trying to solve? If it’s that the TW5 themes have some crufty and confusing CSS, then I think there’s easier ways to fix it than trying to reuse something that was designed for a totally different purpose.

Like Mario, I´d think introducing a new framework would mean reverse engineering and creating a new UI from scratch based on the framework principles. So when Jeremy suggests 

* Create a completely brand new theme, based on one of the frameworks

..I must ask, is a "TW theme" more than just CSS? Or wow could a new theme work properly without tweaking around in the rest of the code to make it fit into that theme?(Interestingly, I just noted there is very little on themes in the docs).

A TW theme is generally just CSS but it can include other components like any other plugin. One could indeed create a new theme without disturbing the underlying HTML generated by TW, but I suspect that in practice one would end up tweaking some things in the HTML.

Best wishes

Jeremy.

<:-)

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/74bdf244-73b3-4659-a416-a51b154b31fe%40googlegroups.com.

[Mat]

The idea with bringing up specfically Skeleton was that is seems to be almost more about a consistent "html+css philosophy" that we could stick to. Yes, there's the Skeleton grid and some bits that do mean including stuff,

I don’t see anything much different in the philosophy of Skeleton from the others, but maybe I’m missing something.

I meant it would would be a "html+css philosophy" for TW. Perhaps "rules of thumb" would be a btter term. The idea is simply to have an outline to stick to (or break if one insists).

But, since you ask for it, Skeleton does seem philosophically different in that it aims to only use vanilla CSS. If any CSS framework was easy to post-introduce, then it would probably be this. Now, you point out that

frameworks like Skeleton just don’t have the functionality that we need. Look through the Skeleton examples and you’ll see what I mean.

Is it fundamentally wrong or just incomplete? Since it's only vanilla CSS then it wouldn't prevent us from simply building on it but still get the benefits of it. Spontaneously I'd guess that "completing" it with local needs can't be uncommon... it's just CSS.  If it's fundamentally wrong then that's another matter.

I think it would be helpful to understand more what the problem is that you’re trying to solve? If it’s that the TW5 themes have some crufty and confusing CSS, then I think there’s easier ways to fix it than trying to reuse something that was designed for a totally different purpose.

Yes, the problem is complex; for one thing, while there current CSS of course is not without structure, it is not formalized so it is often tricky to find what one needs in the stylesheets and to know if something exists at all.

And it's just overall difficult to design things so they work on e.g mobile without a framework or similar, not to mention the uncertainty of how it will look on other OS'es etc. I would think a particular lack for this is a "grid" to position things instead of the for me typical scene where I fiddle with padding, margins or even floats.

Overall I think the [lack of] tools for changing the looks in TW is not up to par with TW itself. TW is super customizable in terms of features and application areas but when it comes to layout and style we're kind of stuck. I think a formal "base" for styling might open up for tools that will then build on, or deal with, such a base. Is a CSS framework the best way for this? I can't tell. I just figured Skeleton, with pure CSS, could be a "harmless" step in the right direction.

<:-)

[CodaCoder]

On Thursday, April 7, 2016 at 2:06:15 PM UTC-5, Mat wrote:

Overall I think the [lack of] tools for changing the looks in TW is not up to par with TW itself. TW is super customizable in terms of features and application areas but when it comes to layout and style we're kind of stuck. I think a formal "base" for styling might open up for tools that will then build on, or deal with, such a base.

Truly, the "base" you mention is already there. It doesn't have a marketing name like "Skeleton" but a generic one, "CSS".  And the "tool" you require is a combination of the following things:

1 - CSS
2 - you
3 - your browser and its developer tools (brought up using F12, usually)

Any time you want to know what TW is doing to create the styling you see, bring up your browser's tools and find the HTML inspector then using the pointing tool to point at the TW element that interests you.  All the HTML involved and the CSS in use *at that point* will be laid bare -- you'll even be able to inspect which CSS rules were overwritten by which other CSS rules. 

And the really neat thing about this method?  It's the CSS *as written* by the CSS author -- you or JR (i.e. not parsed, reparsed, rewritten and obscured, massaged or otherwise mangled by LESS/SASS or whatever else).

I don't know what your CSS knowledge-level is -- but it's not a secret society... there are many good CSS tutorials out there.  One thing I would advise, is understanding *specificity* -- google it along with CSS and then apply what you've read to your TW (I found this which on skim-reading looks pretty good:  http://designshack.net/articles/css/what-the-heck-is-css-specificity/ )

 

  Is a CSS framework the best way for this? I can't tell.

For the reasons I've intimated, I'd say no.  Could Jeremy introduce one? Of course -- but then I'd take him off my Christmas card list ;)
 

I just figured Skeleton, with pure CSS, could be a "harmless" step in the right direction.

Perhaps.  But I don't need it, TW doesn't need it and I (therefore) don't need to find out ;)

Russ

p.s. apols for completely misunderstanding your original Q.

[Mat]

CodaCoder/Russ - thanks for your input and recommendations.

I've actually gained some basic proficiency with CSS over the past years (thanks to fiddling in TW) but it is definitely still too much of a hassle. Consider that themes, and tools for these, are a HUGE, HUGE deal in e.g publishing platforms like Wordpress. But it's barely even a discussion topic in the TW project. Of course, TW is not a publishing platform but it definitely has potential to be used as one (blogs, books, papers, or just websites for that matter).

I'd think themes are a HUGE deal for those other actors because people need to customize and control the appearence of what they show to others. To say that people should "just tweak the CSS manually" is missing the point. It's a bit like saying we don't need wikitext because you can do it with html and js.

On the other hand, maybe TW people just aren't interested in "looks" and that's why themes are not a big deal here? TWs are typically not public so there is probably some truth to this but I also think the lack of styling tools hampers innovation and development of themes.  gain, Skeleton might not at all be a step in the right direction, I don't know. And I think there are other routes than eventual CSS frameworks that would be much more powerful for style matters, that take advantage of TW powers and that could be used instead of explicit CSS hacking. I have some ideas myself so we'll see what comes up ;-)

<:-)