New Default Theme

hcgtv · 2011-07-02 15:52:18

philwareham wrote:

Give me another week or so and it should be in better shape…

OK, I’ll start kicking the tires today to get familiar with it.

michaelkpate · 2011-07-02 19:38:01

I just installed it and couldn’t resist taking a screen shot –

I would like to humbly propose this is one of the reasons that people find Textpattern more than a little confusing at times, not to mention the fact that half of these forms are optional and if they don’t exist, things appear on the page out of thin air. Comment forms in articles? Search results in articles but Search input in misc? and no real place for dealing with images. I think this is a vivid example of what Sam and Ruud were talking about.

For my next trick, I am going to count up all times Phil had to use php because there was no native way to get at something…

Bloke · 2011-07-02 19:50:05

michaelkpate wrote:

half of these forms are optional and if they don’t exist, things appear on the page out of thin air.

I think Bert had this covered. Thinning out the forms and tidying up the amount of stuff in a default install is part of the plan. It’s a bit of a mess at times. lofi…? plainlinks…? And I’ve never quite figured why comments_display is under article!

Last edited by Bloke (2011-07-02 19:50:51)

philwareham · 2011-07-07 07:50:14

I’ve done quite a bit of work on the theme over the last few days. Got to fix the search forms and rewrite the readme then I’ll hope to get a few testers on board to find any errors or suggest improvements. Any issues will have to be logged into the Github project, not in this forum, so I can keep track of them.

philwareham · 2011-07-12 16:47:05

This theme is at a point where I’d like to get a few people testing it out and giving me constructive feedback, download from here.

I need to rewrite the readme quite a bit and fully test in a variety of browsers and OSes, but give it a try anyway and let me know if you have any problems or suggestions.

It’s quite a fine balance between being basic/understandable/extensible and being functional/aesthetically pleasing, kind of limits how you design the theme. No images are used either which was an important factor.

I can add in extra functionality if you think it’s lacking anything important but don’t think we should go down the route of the default Wordpress 2011 theme with everything they can think of is bundled into the theme. This is, after all, just a simple starting point for users and most will overwrite it with their own designs or adapt what’s there to their own needs anyway.

I may toy with the idea of having a repo of optional extras which users could bolt into the theme if they wish to extend it (I’ve included some bits in the Github project as an extra options directory). That could be things such as a simple slider example, basic gallery or social media buttons.

Here it is in situ.

phiw13 · 2011-07-15 09:34:00

I’ve only looked at the demo site, nothing further yet.
You may want to have a closer look at font-sizing in Gecko based browser, particularly when the user/visitor has set a minimum font-size. You specify: html { font-size:62.5%; } then body { font-size:1.3rem; }
With my minimum font-size set to 12px, this results in quite large text all over (setting: Safari > Preferences > Advanced pane – Firefox > Preferences > Content pane, click the ‘advanced’ button under Fonts and Colors – Chrome has now a similar option, as does Opera).

Gecko and WebKit calculate minimum font-size in slightly different ways. For Gecko, it is set on the root (overriding your 62.5%) and everything is scaled from there (basically, in your case, 12px by 1.3 (rem)). WebKit applies/overrides on a per element basis (is the computed value for font-size on this element above or below the limit; if below, override).

(and me thought that that 62.5% hack had long been forgotten. Even the original author of that hack has disavowed it – in this article I think, see the comments).

philwareham · 2011-07-15 09:43:36

phiw13 wrote:

(and me thought that that 62.5% hack had long been forgotten. Even the original author of that hack has disavowed it – in this article I think, see the comments).

See this article from May 2011: Font sizing with rem

phiw13 · 2011-07-15 09:47:42

philwareham wrote:

See this article from May 2011: Font sizing with rem

That is not what I was referring to. I specifically talked about setting the font-size to 62.5% on the root element – which cause soo many problems. (I know mr snooks article, and I have used rem way before he ever mentioned it)

philwareham · 2011-07-15 10:00:44

In Jonathan Snook’s article his code example is as follows:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

To be honest I’ve never used this technique before on a production site but it seemed like a good idea. If you have a better solution then I’m all ears – otherwise I’ll just revert back to the standard way of sizing fonts – not really an great loss.

Destry · 2011-07-15 10:07:52

I’ve only looked at the demo site so far too, not the code, but what struck me about the responsiveness is there is no resizing, per se, rather just linearization (stacking) of the blocks as you narrow the viewport. This seems overly stiff, and little jarring when linearization does happen.

If the grid is fluid (percentages), images are flexible (width:100%; etc.), and fonts are ems then there should be more gradualness to the resizing, where columns narrow up to a point before they actually start dropping into vertical formation.

I also notice that when linearization does happen, there’s a period where the margins are quite wide until you drag the viewport further inward again. This shouldn’t be happening if the grid is truly fluid. It should just be maintaining a proportional margin according to targeted size. Again, I haven’t looked at the code, so I don’t know what the exact widths are where you start your media queries, but this table is pretty good baseline for widths to target (via Ethan Marcotte’s book, Responsive Web Design by A Book Apart)…

320 pixels – For small screen devices, like phones, held in portrait mode.
480 pixels – For small screen devices, like phones, held in landscape mode.
600 pixels – Smaller tablets, like the Amazon Kindle (600×800) and Nook (600×1024), held in portrait mode.
768 pixels – Ten-inch tablets like the iPad (768×1024) held in portrait mode.
1024 pixels – Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.
1200 pixels – For widescreen displays, primarily laptop and desktop browsers.

I really recommend (to everyone) reading Ethan’s book, if you haven’t. The ebook is not expensive and you can download it immediately. The thing I really picked up from it was the formula, target ÷ context = result, which is not only excellent for calculating relative container widths (for true responsive behavior), but also for calculating relative font-size in relation to responsive layouts (i.e, ems only). This latter use of the formula would address the issue raised by phiw13, I’m pretty sure.

Two cents.

Last edited by Destry (2011-07-15 10:13:13)

philwareham · 2011-07-15 10:13:18

Yeah, I’ve read Ethan’s book. Depends on how you define responsive and fluid – it’s currently a responsive grid layout not a fluid layout. It’s pretty easy for me to change that though, I personally prefer grid structures but if you think it’s a deal-breaker I can revise it.

Currently the grid changes at < 960px, then < 786px, then < 480px.

Last edited by philwareham (2011-07-15 10:18:04)

phiw13 · 2011-07-15 10:13:38

html { font-size: 1em; }
h1 { font-size: 1.5em; }
article {font-size: .875em; }

etc. etc (see Richard’s article at ALA I linked above). rem is interesting, useful, … when you need to go scaling deeply nested elements where various parent blocks also set a font-size.

Textpattern CMS

Textpattern CMS support forum

#13 2011-07-02 15:52:18

Re: New Default Theme

#14 2011-07-02 19:38:01

Re: New Default Theme

#15 2011-07-02 19:50:05

Re: New Default Theme

#16 2011-07-07 07:50:14

Re: New Default Theme

#17 2011-07-12 16:47:05

Re: New Default Theme

#18 2011-07-15 09:34:00

Re: New Default Theme

#19 2011-07-15 09:43:36

Re: New Default Theme

#20 2011-07-15 09:47:42

Re: New Default Theme

#21 2011-07-15 10:00:44

Re: New Default Theme

#22 2011-07-15 10:07:52

Re: New Default Theme

#23 2011-07-15 10:13:18

Re: New Default Theme

#24 2011-07-15 10:13:38

Re: New Default Theme

Board footer