6

I'm trying to integrate purecss with a project I've been working on.

It was just borking my layout for some reason, so I tried to create an extremely primitive template (below), and I'm just getting funny letter spacing. What is going on?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
    </head>
    <body>
      <div class="pure-g-r">
        <div class="pure-u-2-4">
          <p>Left side.</p>
        </div>
        <div class="pure-u-2-4">
          <p>Right side.</p>
        </div>
      </div>
    </body>
</html>

JSBin showing issue:

http://jsbin.com/ubarag/1/edit

My code appears to be correct when looking at examples, so I must be doing something really obvious/stupid...

Edit:

Appears to be linked to these two issues, except none of the work-arounds in the comments are working for me.

Paolo
  • 20,112
  • 21
  • 72
  • 113
Anonymous
  • 6,181
  • 7
  • 45
  • 72

2 Answers2

8

The class pure-u-2-4 is not recognized by Pure. Instead, use the class pure-u-1-2 to get columns with 50% width:

<div class="pure-g-r">
  <div class="pure-u-1-2">
    <p>Left side.</p>
  </div>
  <div class="pure-u-1-2">
    <p>Right side.</p>
  </div>
</div>
Russ Ferri
  • 6,459
  • 2
  • 22
  • 24
  • Perfect, that was it thanks. Does purecss not automagically float the div's to make columns or do I need my own css for that? – Anonymous Jun 13 '13 at 13:50
  • 1
    If I understand what you are asking correctly, it should. If you expand the width of the output pane of your JSBin example, the two columns will eventually hop up to the same row. – Russ Ferri Jun 13 '13 at 13:57
  • Right again. Forgot I was using pure-g-r rather than pure-g. Thanks for your help. – Anonymous Jun 13 '13 at 14:07
1

in pure-min.css on line 14 you have this

.pure-g-r {
letter-spacing: -.31em;
}

this cause crazy letter spacing

remove it or rewrite in other css file

Nomak22
  • 123
  • 2
  • 9
  • I know that's the specific rule causing it, but why would that be there by default? (Both in the versions on the CDN and on Github). Something else must be amiss here. – Anonymous Jun 13 '13 at 13:21
  • 3
    The answer of "why" is in one of the issues you linked to (see: https://github.com/yui/pure/issues/41#issuecomment-18747575). Don't like it? Either don't use Pure or override it manually. – cimmanon Jun 13 '13 at 13:45
  • 1
    @cimmanon - That comment (Github) wasn't helpful, Russ Ferri's answer is correct. – Anonymous Jun 13 '13 at 13:52