6 ms·

Glider - A minimal, text-focused theme for Wordpress

85 points by tomcreighton 14y ago

rkudeshi 14y ago
Title should be 'Glider'.
callmevlad 14y ago
I like the simplicity of it, but almost immediately ran into a usability/navigation issue: - I hit the arrow key to go to the menu, and choose "A Personal API". So far so good. - I click on the arrow again, it just fades out. Ok... let's try the back button. That removes the hash from the URL, but I'm still on "A Personal API". Pressing Forward adds the hash back, but there are no changes on the page. The only option I have to keep navigating is to refresh the page. I'm on Chrome Canary, and I'm not seeing any errors in the console. On my iPhone, the arrow button seems to work to go back to the menu, but the back button is also broken.
- tomcreighton 14y ago
  I guess I should have pointed out that this is very much a 1.0 release. This is obviously not desired behaviour - thanks for the heads up.
- Avshalom 14y ago
  same behavior on firefox 16.0.2 on windows xp.
- anabis 14y ago
  same on firefox 16.0 in Win7
halo 14y ago
The ridiculous leading makes it unreadable for me.
- alhaigh 14y ago
  I think the line height looks cool, but IS a bit hard to read on longer posts. Maybe dial it down to 30px?
gjulianm 14y ago
Nice :) I will try to add it to my blog later, it's perfect for me. Just one thing: it's me, or the theme looks better on Mac than on Windows? The font seems too sharp on Win.
- mimiflynn 14y ago
  fonts generally look worse in Windows than Mac. OS X does some magic to smooth out those fonts.
  - georgemcbay 14y ago
    > fonts generally look worse in Windows than Mac. This is subjective. See: http://www.joelonsoftware.com/items/2007/06/12.html http://www.joelonsoftware.com/items/2007/06/12.html I prefer the way fonts look on Windows. Other people prefer the way fonts look in MacOS. > OS X does some magic to smooth out those fonts. FWIW, it is Windows that is actually doing "magic" (in the sense that it is using a algorithm to fit pixels to grid) whereas MacOS just does a more direct rendering of the actual font curves. Whether or not you like that "magic" is up to you. Until we're using retina-style displays everywhere, I like the Windows "magic".
    - bpatrianakos 14y ago
      Eh, I think the consensus is that fonts are generally better on Mac. And this isn't one of those "Windows sucks because..." things, it's just that in general more fonts look better more often on Mac than Windows. You can definitely point to some fonts that render like crap on a Mac and you can definitely find people who think fonts look better on Windows but really, the truth is, nine times out of ten Mac wins when it comes to how good fonts look. I'm sure I'll be hated here for saying that especially since you linked to that HN post about it but HN is representative of a very very small and narrow but of the world of computer users. Go out into the world and ask around and you'll see. I never noticed it until I started using a Mac. Then it became abundantly clear when I had to start using Windows a lot again. I've seen hundreds of fonts on tens of displays on both platforms and Mac has got fonts in the bag most times. I know there's an element of subjectivity to this but at the same time I don't think it's subjective at all. It's almost like saying the jury is still out on evolution or global warming. That's kinda true but, nah, not really. Edit: After thinking about it for a moment, I still stand behind what I said but I want to narrow down "fonts" to web fonts only because that's where you see the biggest difference no matter the browser.
idodevops 14y ago
Feedback: I expected the arrow at the right of the screen to take me to the next article, not to a navigation/contents menu.
- bigiain 14y ago
  I did too, but it was pretty quick to work out what was going on when I clicked it the first time. Not "intuitive", but nicely "discoverable" behaviour.
yuchi 14y ago
Very good theme, but should html5 push State when possible, it would make it near-perfect.
- ckluis 14y ago
  pjax would work today on several browsers with graceful degradation.
  - tomcreighton 14y ago
    Great suggestions, thanks. This is very v1.0, I'm going to keep tinkering.
  - yuchi 14y ago
    And, btw, you should not provide animation to that browsers not supporting push state at all. You're going to have a bad time if you mix full solid urls and hastag ones. Ask twitter...
Casseres 14y ago
When clicking on the arrow to see the list of other posts and then clicking on one of those posts, I would expect the URL to change. Instead, of http://tomcreighton.com/2012/09/getting-something-off-my-toolchest/ http://tomcreighton.com/2012/09/getting-something-off-my-too... I get this: http://tomcreighton.com/2012/10/chipping-away/#/getting-something-off-my-toolchest http://tomcreighton.com/2012/10/chipping-away/#/getting-some... Other than that, I like it. Good work.
- tomcreighton 14y ago
  Thanks! Yeah, appending a hash is not ideal, but it got the job done - I'll be updating it with pushState or similar in the future.
navs 14y ago
Unfortunately that menu slide in animation just doesn't work out well on an iPad 3. I'm not able to checkout the code ATM but I assume you're using jquery for the animation. CSS3 animations generally perform better on iPads. This plugin is great: http://playground.benbarnett.net/jquery-animate-enhanced/ http://playground.benbarnett.net/jquery-animate-enhanced/
capex 14y ago
love it.
pwenzel 14y ago
Nice concept, but I would definitely consider using something like PJAX (https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax) in place of the javascript loading already in place. Also, text is really tiny on my iPhone.
chj 14y ago
If a text-focused theme doesn't do justified text align, it looks bad.
- hfz 14y ago
  Disagree. Justification causes the so called "River" http://en.wikipedia.org/wiki/River_(typography) http://en.wikipedia.org/wiki/River_(typography) that can cause readability problem. With the relative lack of typographical control on the web right now, it's best to keep text non-justified.
  - hdevalence 14y ago
    Rivers mean your justification algorithm is broken. It is true that the browser being broken isn't something you can change, but using CSS hyphens and falling back to something like hyphenator.js allows you to have justified text that is basically free of rivers in practice. It's perhaps not as easy as it should be, but it is possible.
  - chj 14y ago
    This problem is solvable (actually solved by TeX 30 years ago). Try to read the page on a narrow screen like mobile phone, you will know how bad it is without hyphenation.
gprasanth 14y ago
Looks nice. But, how about not executing any JS content that is injected by plugins or theme other than what is required(like jQuery etc.)? I am talking about the "Tweet" link. Is that possible?

85 points by tomcreighton 14y ago

Title should be 'Glider'.

I like the simplicity of it, but almost immediately ran into a usability/navigation issue: - I hit the arrow key to go to the menu, and choose "A Personal API". So far so good. - I click on the arrow again, it just fades out. Ok... let's try the back button. That removes the hash from the URL, but I'm still on "A Personal API". Pressing Forward adds the hash back, but there are no changes on the page. The only option I have to keep navigating is to refresh the page. I'm on Chrome Canary, and I'm not seeing any errors in the console. On my iPhone, the arrow button seems to work to go back to the menu, but the back button is also broken.

tomcreighton 14y ago
I guess I should have pointed out that this is very much a 1.0 release. This is obviously not desired behaviour - thanks for the heads up.
Avshalom 14y ago
same behavior on firefox 16.0.2 on windows xp.
anabis 14y ago
same on firefox 16.0 in Win7

halo 14y ago

The ridiculous leading makes it unreadable for me.

alhaigh 14y ago
I think the line height looks cool, but IS a bit hard to read on longer posts. Maybe dial it down to 30px?

gjulianm 14y ago

Nice :) I will try to add it to my blog later, it's perfect for me. Just one thing: it's me, or the theme looks better on Mac than on Windows? The font seems too sharp on Win.

mimiflynn 14y ago
fonts generally look worse in Windows than Mac. OS X does some magic to smooth out those fonts.
- georgemcbay 14y ago
  > fonts generally look worse in Windows than Mac. This is subjective. See: http://www.joelonsoftware.com/items/2007/06/12.html http://www.joelonsoftware.com/items/2007/06/12.html I prefer the way fonts look on Windows. Other people prefer the way fonts look in MacOS. > OS X does some magic to smooth out those fonts. FWIW, it is Windows that is actually doing "magic" (in the sense that it is using a algorithm to fit pixels to grid) whereas MacOS just does a more direct rendering of the actual font curves. Whether or not you like that "magic" is up to you. Until we're using retina-style displays everywhere, I like the Windows "magic".
  - bpatrianakos 14y ago
    Eh, I think the consensus is that fonts are generally better on Mac. And this isn't one of those "Windows sucks because..." things, it's just that in general more fonts look better more often on Mac than Windows. You can definitely point to some fonts that render like crap on a Mac and you can definitely find people who think fonts look better on Windows but really, the truth is, nine times out of ten Mac wins when it comes to how good fonts look. I'm sure I'll be hated here for saying that especially since you linked to that HN post about it but HN is representative of a very very small and narrow but of the world of computer users. Go out into the world and ask around and you'll see. I never noticed it until I started using a Mac. Then it became abundantly clear when I had to start using Windows a lot again. I've seen hundreds of fonts on tens of displays on both platforms and Mac has got fonts in the bag most times. I know there's an element of subjectivity to this but at the same time I don't think it's subjective at all. It's almost like saying the jury is still out on evolution or global warming. That's kinda true but, nah, not really. Edit: After thinking about it for a moment, I still stand behind what I said but I want to narrow down "fonts" to web fonts only because that's where you see the biggest difference no matter the browser.

idodevops 14y ago

Feedback: I expected the arrow at the right of the screen to take me to the next article, not to a navigation/contents menu.

bigiain 14y ago
I did too, but it was pretty quick to work out what was going on when I clicked it the first time. Not "intuitive", but nicely "discoverable" behaviour.

yuchi 14y ago

Very good theme, but should html5 push State when possible, it would make it near-perfect.

ckluis 14y ago
pjax would work today on several browsers with graceful degradation.
- tomcreighton 14y ago
  Great suggestions, thanks. This is very v1.0, I'm going to keep tinkering.
- yuchi 14y ago
  And, btw, you should not provide animation to that browsers not supporting push state at all. You're going to have a bad time if you mix full solid urls and hastag ones. Ask twitter...

Casseres 14y ago

When clicking on the arrow to see the list of other posts and then clicking on one of those posts, I would expect the URL to change. Instead, of http://tomcreighton.com/2012/09/getting-something-off-my-toolchest/ http://tomcreighton.com/2012/09/getting-something-off-my-too... I get this: http://tomcreighton.com/2012/10/chipping-away/#/getting-something-off-my-toolchest http://tomcreighton.com/2012/10/chipping-away/#/getting-some... Other than that, I like it. Good work.

tomcreighton 14y ago
Thanks! Yeah, appending a hash is not ideal, but it got the job done - I'll be updating it with pushState or similar in the future.

navs 14y ago

Unfortunately that menu slide in animation just doesn't work out well on an iPad 3. I'm not able to checkout the code ATM but I assume you're using jquery for the animation. CSS3 animations generally perform better on iPads. This plugin is great: http://playground.benbarnett.net/jquery-animate-enhanced/ http://playground.benbarnett.net/jquery-animate-enhanced/

capex 14y ago

love it.

pwenzel 14y ago

Nice concept, but I would definitely consider using something like PJAX (https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax) in place of the javascript loading already in place. Also, text is really tiny on my iPhone.

chj 14y ago

If a text-focused theme doesn't do justified text align, it looks bad.

hfz 14y ago
Disagree. Justification causes the so called "River" http://en.wikipedia.org/wiki/River_(typography) http://en.wikipedia.org/wiki/River_(typography) that can cause readability problem. With the relative lack of typographical control on the web right now, it's best to keep text non-justified.
- hdevalence 14y ago
  Rivers mean your justification algorithm is broken. It is true that the browser being broken isn't something you can change, but using CSS hyphens and falling back to something like hyphenator.js allows you to have justified text that is basically free of rivers in practice. It's perhaps not as easy as it should be, but it is possible.
- chj 14y ago
  This problem is solvable (actually solved by TeX 30 years ago). Try to read the page on a narrow screen like mobile phone, you will know how bad it is without hyphenation.

gprasanth 14y ago

Looks nice. But, how about not executing any JS content that is injected by plugins or theme other than what is required(like jQuery etc.)? I am talking about the "Tweet" link. Is that possible?