non fluid rows

[tobeportable]

In Bootstrap i am using : <div class="input-append"> and <div class="input-prepend"> to slap some icon next to my input .

With Kraken : i settled for using the icon in a grid-1 and the input in a grid-5 however this doesn't render well on small screens since the icon is above the input

Would it be possible to have a class like non-fluid that we could add to row to make that row not fluid.

[cferdinandi]

@tobeportable - Fair point. I've used Bootstrap in the past, so I know exactly what you're referring to, and you're right - that just doesn't translate well in Kraken.

That's a great feature request, but it's unfortunately outside of the scope of Kraken, which is designed to be deliberately lightweight and minimal. To keep it that way, I need to say "no" to a lot of great features that have only specific use-case application.

This could be appropriate as an add-on, though. I have no immediate plans to create one, but if you extend Kraken with this functionality, please do let me know. I'd be happy to explore including it as an add-on.

[jwebcat]

@tobeportable hey there,

In all fairness I think that you will have an easy time creating what you want if you just adjust the grid-sizes for the said media query like below to create an extra set of classes for a small-grid:

/*  Still mostly single-column.
 *  Grid-third, grid-half, and grid-img 
 *  provide sub-gridding on smaller screens.  */

/* I HAVE ADDED AN EXTRA SET OF CLASSES FOR THIS MEDIA QUERY */

@media (min-width: 30em) {

    .row {
        margin-left: -1.515151515152%;
        margin-right: -1.515151515152%;
    }

    [class^="grid-"], 
    [class*=" grid-"] {
        float: left;
        width:96.969696969697%;
        margin-left: 1.515151515152%;
        margin-right: 1.515151515152%;
    }

    .grid-third {
        width: 30.30303030303%;
    }

    .grid-half,
    .grid-img {
        width: 46.969696969697%;
    }

    .grid-two-thirds {
        width: 63.636363636364%;
    }

/* HERE ARE THE EXTRA CLASSES WITH NAMESPACE small- */

    .small-grid-1 {
        width: 13.636363636364%;
    }

    .small-grid-2,
    .small-grid-third,
    .small-grid-img {
        width: 30.30303030303%;
    }

    .small-grid-3,
    .small-grid-half { 
        width: 46.969696969697%;
    }

    .small-grid-4,
    .small-grid-two-thirds { 
        width: 63.636363636364%;
    }

    .small-grid-5 { 
        width: 80.30303030303%;
    }

    .small-grid-6,
    .small-grid-full { 
        width: 96.969696969697%;
    }

    /*  Reverses order of grid for content choreography */
    .grid-flip {
        float: right;
    }

}

So, to create the effect I think you wanted just give those input and icon the small-grid classes as well like:

<i class="icon grid-1 small-grid-1"></i>
<input class="grid-5 small-grid-5 ">

• this should work like a charm.
• the above is untested but should work. Let me know if this is what you wanted

[jwebcat]

Note: the above rows will still be fluid, they will just scale down proportionately.

[tobeportable]

Yes this worked like a charm thanks. Note, I had to change the @media (min-width: 30em) to @media (min-width: 15em) for smaller screens compatibility.

[cferdinandi]

One note about these: you shouldn't need to include .grid-1 and .small-grid-1 on the same item. Based on @jwebcat implantation, just the .small-grid class should suffice.

Glad his tip got these working for you!

[jwebcat]

@cferdanandi

Actually the .grid-small class only exists inside of that media query so it will need the regular grid class in order to inherit the grid at the other view ports correctly. On Jun 18, 2013 4:23 AM, "Chris Ferdinandi" notifications@github.com wrote:

One note about these: you shouldn't need to include .grid-1 and .small-grid-1 on the same item. Based on @jwebcathttps://github.com/jwebcatimplantation, just the .small-grid class should suffice.

Glad his tip got these working for you!

— Reply to this email directly or view it on GitHubhttps://github.com/cferdinandi/kraken/issues/2#issuecomment-19605127 .

[cferdinandi]

@jwebcat - But if he dropped those in a @media (min-width: 15em) media query, then they should inherit for anything bigger than that. And it looks like the values for .small-grid-* match those of the non-small counterparts, but just start on smaller screens?

One note around an OOCSS approach - you might consider changing the names to .grid-small-* instead of .small-grid-*. I've tried to maintain the base namespace for all modifiers.

[jwebcat]

Yes you are very right.

On this note, I am thinking more and more that it is crucial in RWD to have namespaced grid modifiers. On Jun 18, 2013 5:59 AM, "Chris Ferdinandi" notifications@github.com wrote:

@jwebcat https://github.com/jwebcat - But if he dropped those in a @media (min-width: 15em) media query, then they should inherit for anything bigger than that. And it looks like the values for .small-grid-* match those of the non-small counterparts, but just start on smaller screens?

One note around an OOCSS approach - you might consider changing the names to .grid-small-* instead of .small-grid-*. I've tried to maintain the base namespace for all modifiers.

— Reply to this email directly or view it on GitHubhttps://github.com/cferdinandi/kraken/issues/2#issuecomment-19609287 .

[cferdinandi]

@jwebcat - Say more? I'm intrigued by where I think you're going with this...

[jwebcat]

Like in our other discussion of the grid add-on, and similarly to what css wizardry grid has done.

palm--grid

lap--grid

portable--grid

desk--grid

huge--grid

• thoughts? On Jun 18, 2013 6:08 AM, "Chris Ferdinandi" notifications@github.com wrote:

@jwebcat https://github.com/jwebcat - Say more? I'm intrigued by where I think you're going with this...

— Reply to this email directly or view it on GitHubhttps://github.com/cferdinandi/kraken/issues/2#issuecomment-19609774 .

[cferdinandi]

Ahh gotcha. Giving this more though, you might consider .grid-palm-*, .grid-lap-* and so on.

[jwebcat]

I'm curious to know where you thought i was going though?

Hmmm after Harry Roberts long post about OOCSS and BEM he decided on lap-- as a grid modifier to grid-.

That way if people want to ignore that style of namespacing grid then they can use the traditional grid-

This way you can also have other grid modifiers like lap--push-half etc.

Or other grid modifiers like full--grid for a grid with no margins etc.

Thoughts? On Jun 18, 2013 6:14 AM, "Chris Ferdinandi" notifications@github.com wrote:

Ahh gotcha. Giving this more though, you might consider .grid-palm-, .grid-lap- and so on.

— Reply to this email directly or view it on GitHubhttps://github.com/cferdinandi/kraken/issues/2#issuecomment-19610090 .

[cferdinandi]

One grid to rule them all!

[jwebcat]

Ha yes :-) On Jun 18, 2013 6:34 AM, "Chris Ferdinandi" notifications@github.com wrote:

One grid to rule them all!

— Reply to this email directly or view it on GitHubhttps://github.com/cferdinandi/kraken/issues/2#issuecomment-19611221 .