What is going on with purecss here?

StackOverflow https://stackoverflow.com/questions/17087808

  •  31-05-2022
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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>

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top