Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: New Default Theme
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.
Offline
Re: New Default Theme
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.
Offline
Re: New Default Theme
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).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: New Default Theme
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
Offline
Re: New Default Theme
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)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: New Default Theme
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.
Offline
Re: New Default Theme
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)
Offline
Re: New Default Theme
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)
Offline
Re: New Default Theme
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.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: New Default Theme
Well, I didn’t mean to sound like I’m advocating Marcotte’s philosophy, exactly. I’m just commenting on the fact the current stacking behavior—over actually seeing a little narrowing when viewports are dragged—seems a little stiff, but it could just be me.
Don’t get discouraged. If this is going to be a new theme, it has to go under fire. :)
Offline
Re: New Default Theme
You know, the more I look at the stacking current behavior, the less bothered I am, so just ignore me.
Last edited by Destry (2011-07-15 10:31:04)
Offline
Re: New Default Theme
Destry wrote:
Don’t get discouraged. If this is going to be a new theme, it has to go under fire. :)
Don’t worry, I know I’m going to feel some heat before this process is through, that’s the reason it’s on Github – so people can pick the code apart and suggest improvements/changes. I won’t be too precious over the direction.
As for the the fluid layout vs grid – I was trying to keep things relatively simple so that non-CSS experts could still have a grasp of how the layout actually works. Grids achieve that better end than Ethan’s technique IMO (things might start getting confusing if they see rules such as width:10.13564367875em for example!) – but I’ll do a totally fluid version of the layout sometime over the weekend and then compare the two for complexity.
Last edited by philwareham (2011-07-15 10:42:46)
Offline
Re: New Default Theme
The rem font sizes have now been backed out of the theme. Fixes the problem with user defined minimum font settings within browsers.
Offline
Re: New Default Theme
I’ve made the font rules relative em sizes now, as suggested by Philippe. Let me know if you have any more issues with type size.
Offline
Re: New Default Theme
as mentioned in the facebook group before, you need to fix the document outline.
The document outline sets out the semantic structure of the page. A proper outline is needed to make the page readable, both to human and searchbots.
That means simply said that you use headers h1, h2, h3, h4 etc. without skipping one.
New in HTML5 is that you can have more than one h1 header. So as you do correct in the article tags each of them has its own h1 tag. The page header (MY Site) has to be h1 (currently it is h2), and “my pithy slogan” has to change to h2 accordingly.
The article headline “Ut enim ad minima veniam” is set to h1 as it should but then you skip the h2 header and set the headline “Erat admodum amplum canis…” to h3. The next header “Caseus foetida! Caseus foetida!” in this article would be correct if the last was h2, but as you want to have the same styling you can also set it to h2.
Last edited by [Axel] (2011-07-20 17:33:38)
Greetz [Axel]
Offline