The "grid__item" don't work

[nanotime]

Well, not exactly, they works, but not "correctly".

I'm new at this, and i'm trying to create a really simple prototype in html and CSS with inuit and, obvioulsy, im using the "grid" abstraction.

BTW, when i use that, the "grid__item"s have a width: 100% and the classe's "one-third" ... have their % defined in the width but, are disabled in the browser, an image speak better: http://imgur.com/dw3r4qk

Hmm my "code" are here: https://gist.github.com/6077042

Note: yes, im settled to "true" the abstractions required :) and ... this is a reeeeaaally basic html file, but show my little experiment and my "problem" ... i'm doing something wrong?

Thanks --Nano

[HellPat]

Your .grid__item overrides your .one-third because it is behind it in the stylesheet and both have the same specitivity.

reorder your styles or use .grid__item.one-third as selector (better keep specitivity low)

[nanotime]

hmm ok ... so i'm using the examples in the code, i don't know why the .grid__item override the .one-third and same.

i'm a little noob, can show me a bit of code? :D (sorry for that, i'm newbie and my english is bad xD)

[austinteer]

@nanotime The new inuit grid system uses inline-block, so you can't have any whitespace between your .grid__item's.

Example. https://gist.github.com/austinteer/6081089

Hope that Helps.

[nanotime]

Hmm is necesary the period on ".one-third"? don't knew ... i'll try, and i'm back with the results :) thanks!

[austinteer]

No. That was my mistake. Leave the period off.

[kevva]

@austinteer, you can have white-space if you do this:

.grid {
  letter-spacing: -0.31em;
}

/* Opera hack */
.opera:-o-prefocus,
.grid {
  word-spacing: -0.43em;
}

.grid__item {
  letter-spacing: normal;
  word-spacing: normal;
}

[nanotime]

ok ok, wait, i can't have white spaces between the classes or elements inside the classes? ... i'm a little confused xD ...

For more clearness, i'm writing this:

<div class="grid">
  <div class="grid__item one-third head-img">
  <img src="img/NanotheCarrot.jpg" alt=""> <!-- an image goes here, but, this is a gist and their size is 250x250 -->
</div>

<div class="grid__item two-thirds">
  <header>
    <h1>Header</h1>
    <h5>Payoff</h5>
  </header>
</div>

What i'm doing exactly wrong here? D: i don't catch the problem u.u

Sorry dudes, my "noobness" it's hard xD

[austinteer]

It looks all good. You just have to have a comment between your grid__items.

Hope this helps.

<div class="grid">
  <div class="grid__item one-third head-img">
  <img src="img/NanotheCarrot.jpg" alt=""> <!-- an image goes here, but, this is a gist and their size is 250x250 -->
</div><!-- comment start
comment end --><div class="grid__item two-thirds">
  <header>
    <h1>Header</h1>
    <h5>Payoff</h5>
  </header>
</div>

[nanotime]

Good! but, i have my prototype exactly same like this, but, the grids EVER use width: 100% :(

Another img speaks better: http://imgur.com/kW5hWmc

And the edited code: https://gist.github.com/nanotime/6077042

[austinteer]

It still doesn't look like you have comments in between your grid__item's.

Like this https://gist.github.com/austinteer/6082631

[austinteer]

@kevva Your way is a lot cleaner html which is nice.

[nanotime]

@austinteer nope, i'm using your code and nothing, it still same, really don't know what happen :S

To you if it works?

[nanotime]

So, im untile the width: 100% in the dev tools and it works fine: http://imgur.com/delete/mrapFGEKeX7EsR2

But i'm still not understand WHY the .grid__item is settled to 100% D:

Note: i'm using the compass-inuit version, it can be a problem?

[austinteer]

Compass-inuit could be your problem.

Also, in your dev tools the grid__item shouldn't becoming before the one-third.

[nanotime]

"shouldn't becoming" Ok, but it is. The code hierarchy is .grid__item.one-third (or another class for the grids), right?

If my code are fine and don't have errors, Why behave like that? really, i don't know what happen here.

Sorry if I'm not understanding or taking away your time dude u.u

[austinteer]

I'd try and start fresh and just use inuit.css for know, and see if that works.

[nanotime]

ok, i'll try to start in fresh with inuit css, without compass

[nanotime]

Well, i clone the repo and i see some thigns ...

First, the "style.scss" don't exist, the "watch" file either. BTW, my question is: just need to create a style.scss and override my vars and abstractions?

And ... i have the "inuit.scss" file to import all, just delete the "" character and use sass watch?

I ask these questions because I want to do things right from the start :)

[unwiredbrain]

@nanotime, just follow these steps: https://github.com/csswizardry/inuit.css#installation

If you cloned the repo you should already have all you need; just follow the installation instructions.

Make sure you're using an updated version of Git and that Sass is at least version 3.2.

[nanotime]

thanks @unwiredbrain my problem was that i use "git clone" and not --recursive, just clone.

[unwiredbrain]

:+1:

[nanotime]

Hey! It works! Thanks! so, i only have a question, and is ... really i need to comment between all spaces into the div's? the hack proposed by @kevva solvent this and it can be apply in the _grids.scss?

Really, really thanks a lot, for all. :+1:

[kevva]

Yep, that'll fix it.

[nanotime]

@kevva thanks :)

Hey, i see one interesting thing; when i use a "wrapper", the responsiveness is lost, totally, e.g:

div.grid
  div.grid__item.one-whole <!-- header out of wrapper, totally responsive -->

div.wrapper <!-- wrapper, responsiveness totally broken -->
  div.grid
   div.grid__item.one-third
     ul.nav.nav--stacked ... (code of nav ... bla bla)
   div.grid__item.two-thirds
     div.island.greybox
     a paragraph ... bla bla

i'm checking with the debug tools and the widths have a correctly values, but, nothing, it doesn't work D:

Images: http://imgur.com/delete/OwiZIn8CtY2GMEq

And responsive broken: http://imgur.com/delete/1qi2sG96UcVLq2a

is weird, or, i'm a jerk one of both xD

[nanotime]

please, please, please, forget my comment, definitly i'm a big jerk, the solution was use "max-width", omg, really ... sorry

[csswizardry]

Please see #291.

Thank you.