CODEWITHSUNDEEP
cssyui-pure-css
Anonymous
Anonymous

Reputation: 6251

What is going on with purecss here?

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.

Upvotes: 6

Views: 2428

Answers (2)

Russ Ferri
Russ Ferri

Reputation: 6589

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>

Upvotes: 8

Nomak22
Nomak22

Reputation: 123

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

Upvotes: 1

Related Questions