EzDevInfo.com

How do I override form styles in inuit.css?

Is there a recommended way to override/alter the form styles in inuit.css?

The inuit.css/base/_forms.scss has a rule setting label tags to display: block;, which is breaking a CMS I'm using. Certainly I could modify this file, or remove the import from _inuit.scss, but neither seems like a good approach.

Adding a rule in _vars.scss, which is a recommended approach for overriding defaults doesn't work. Both rules end up in the compiled css file, and the built-in one takes precedence.

Increasing the width of a 960px css grid

After sampling plenty css grids, i found love in the inuit.css grid (especially the negative margin gutter technique), i only wish it was wider.

Due to my lack of in-depth knowledge in grids and responsive/adaptive web design i was wondering:

• Where should i start?
• What are the things i should take into consideration?

If i wanted to widen the grid (or create another grid?). I have a feeling its a little bit more than just changing the width value of the columns

After freshly installing compass-inuit we get an error while starting up "compass watch"

We just created an compass project like described in the compass-inuit manual. When we now start "compass watch" we get the following error message:

user@VirtualXubuntu:/tmp/compass-test/my_project$ compass watch
>>> Change detected at 12:23:22 to: sass/style.scss
    error sass/sass/style.scss (Line 99: Invalid CSS after "}​": expected "{", was "")
identical stylesheets/sass/style.css 
>>> Compass is polling for changes. Press Ctrl-C to Stop.

Actually I don't know what this error means - since I'm a newbie in compass...

Version Info:

Ubuntu 12.10 [amd64]
ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux]
Compass 0.12.2 (Alnilam)

Inuit Css grid__items same height

I have recently been looking into responsive design for a website that i am creating and have started using the Inuit CSS framework. I have came across an issue that has me pulling my hair out.

I have created a grid with two grid items each one half of the grid. This works fine and is responsive, however one of the grid items is taller than the other and i would like them to both be the same height so i can center the right image vertically within the blank space.

<div class="grid full-item">
    <div class="grid__item one-half left-item">
        <img src="/img1.png" /><br/>
        <img src="/img2.png" /><br/>
        <img src="/img3.png" /><br/>
        <img src="/img4.png" />
    </div><!--
    --><div class="grid__item one-half right-item">
    <img src="/img5.png" />
    </div>
</div>

I have created a Fiddle to explain my problem.

Width for horizontal inline elements: one expanding to all available space; siblings just to their content

I need to structure a recurring "pattern" of elements.

I have a UL with a serie of LI with inline-blocks (horizontal alignment)

• the MIDDLE LI must take ALL the available space left from the siblings
• the other LIs must take the space of their content, and let all the rest to the MIDDLE LI sibling
  • here is the only exceptions, cause the other LIs could have a fixed width (in pixels or in percentage/em/rem)

Inside the middle LI are a FORM and a SPAN that stays horizontally inline as well

• the FORM must take ALL the available space left from the SPAN
• the SPAN must take the space of its content, and let all the rest to the sibling

Inside the FORM are an INPUT-TEXT and a BUTTON that stays horizontally inline as well

• the INPUT-TEXT must take ALL the available space left from the BUTTON
• the BUTTON must take the space of its content, and let all the rest to the sibling

As you can see the logic is always almost exactly the same. Additionally:

Wherever is given text-content i MUST NOT set a fixed width (it has to adapt as much as possible to all the kinds of content)

All this blocks MUST never wrap or create a new line. EVERYTHING needs to be on the same line.

Here is an example of the markup:

<ul>
    <li>a</li>
    <li>b</li>
    <li class="middle">
        <form>
            <input type="text" value="c1" />
            <button>c2</button>
        </form>
        <span>c3</span>
    </li>
    <li>d</li>
    <li>e</li>
</ul>

I currently rely on inuit-pack to display all the elements horizontally inline.

If I try to work on the single elements I get a mess, so I'm looking for a neater way to do this, maybe using always the same CSS rules in each inner level (cause the behaviour is recurrent)

Note: I'm not strictly asking a signle class with the same styling to apply onto all the nested levels, but more the general basic CSS rules to obtain this in each nested level.

CSS media object: Clearfix vs overflow

I recently came across this implementation of the OOCSS media object in the inuitcss framework:

.#{$inuit-media-namespace}media,
%#{$inuit-media-namespace}media {
    @extend %clearfix;
    display: block;
}

.#{$inuit-media-namespace}media__img,
%#{$inuit-media-namespace}media__img {
    float: left;
    margin-right: $inuit-media-gutter;

    > img {
        display: block;
    }

}

.#{$inuit-media-namespace}media__body,
%#{$inuit-media-namespace}media__body {
    overflow: hidden;
    display: block;

    &,
    > :last-child {
        margin-bottom: 0;
    }

}

While I know what a block formatting context is, I am still not sure why the author used a clearfix on .media instead of using overflow: hidden; like in the original media object.

I understood that the block formatting context on the object's body is necessary to prevent the content from flowing below the image, but what benefit has the clearfix on the parent over using the overflow property on it?

Facing Problems compiling inuit.css in CodeKit

I have 3 files in the sass/ directory , they are

1. style.scss
2. _responsive.scss & _defaults.scss

And I also have a vendor/ directory (outside the sass\) which contains the latest version of inuit.css from https://github.com/csswizardry/inuit.css.

When I am trying to compile the style.scss file in CodeKit I am getting the following error.

Syntax error: Invalid CSS after "...uote: \201C ": expected "}", was "!global;" on line 8 of /Users//Desktop/test/scss/../vendors/base/_quotes.scss from line 162 of /Users//Desktop/test/scss/../vendors/_inuit.scss from line 14 of /Users//Desktop/test/scss/style.scss Use --trace for backtrace.

Please help, it's very important & urgent.