New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

12 columns grid ? #217

Closed
franck34 opened this Issue Jan 8, 2014 · 11 comments

Comments

Projects
None yet
8 participants
@franck34

franck34 commented Jan 8, 2014

Hi, thanks for uikit !

Question, i've started a really well designed project with uikit 3 weeks ago. I didn't read all the doc before choose uikit so i didn't see that grid system was limited to 10 columns, compared to most grid system which provide 12 columns.

I'd like to continu to work with uikit, but i really need 12 columns grid. If i need to use a third party grid, i think i'll just abandon uikit. I don't like this idea.

Why this limitation ?

Can it be improved ?

How ?

Thanks a lot
Cheers

@Anachron

This comment has been minimized.

Show comment
Hide comment
@Anachron

Anachron Jan 8, 2014

Why not just submit this as PR?
You have to add it here: https://github.com/uikit/uikit/blob/master/src/less/grid.less#L262

@uikit: Maybe it's not bad if you let LESS calculate the grid sizes. So you can have dynamic grid system like bootstrap: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L246

Anachron commented Jan 8, 2014

Why not just submit this as PR?
You have to add it here: https://github.com/uikit/uikit/blob/master/src/less/grid.less#L262

@uikit: Maybe it's not bad if you let LESS calculate the grid sizes. So you can have dynamic grid system like bootstrap: https://github.com/twbs/bootstrap/blob/master/less/variables.less#L246

@franck34

This comment has been minimized.

Show comment
Hide comment
@franck34

franck34 Jan 8, 2014

I think i don't have enought skill to do that :(

franck34 commented Jan 8, 2014

I think i don't have enought skill to do that :(

@saschadube

This comment has been minimized.

Show comment
Hide comment
@saschadube

saschadube Jan 8, 2014

Member

It is very easy to extend the width classes with the one you need. When you create your own UIkit theme just add the following code to the .hook-grid-misc() {}

.uk-width-1-12 { width: 8.333%; }
.uk-width-2-12 { width: 16.666%; }
.uk-width-3-12 { width: 25%; }
.uk-width-4-12 { width: 33.333%; }
.uk-width-5-12 { width: 41.666%; }
.uk-width-6-12 { width: 50%; }
.uk-width-7-12 { width: 58.333%; }
.uk-width-8-12 { width: 66.666%; }
.uk-width-9-12 { width: 75%; }
.uk-width-10-12 { width: 83.333%; }
.uk-width-11-12 { width: 91.666%; }

/* Only tablets and desktop */
@media (min-width: @breakpoint-medium) {

    .uk-width-medium-1-12 { width: 8.333%; }
    .uk-width-medium-2-12 { width: 16.666%; }
    .uk-width-medium-3-12 { width: 25%; }
    .uk-width-medium-4-12 { width: 33.333%; }
    .uk-width-medium-5-12 { width: 41.666%; }
    .uk-width-medium-6-12 { width: 50%; }
    .uk-width-medium-7-12 { width: 58.333%; }
    .uk-width-medium-8-12 { width: 66.666%; }
    .uk-width-medium-9-12 { width: 75%; }
    .uk-width-medium-10-12 { width: 83.333%; }
    .uk-width-medium-11-12 { width: 91.666%; }

}

/* Only desktop */
@media (min-width: @breakpoint-large) {

    .uk-width-large-1-12 { width: 8.333%; }
    .uk-width-large-2-12 { width: 16.666%; }
    .uk-width-large-3-12 { width: 25%; }
    .uk-width-large-4-12 { width: 33.333%; }
    .uk-width-large-5-12 { width: 41.666%; }
    .uk-width-large-6-12 { width: 50%; }
    .uk-width-large-7-12 { width: 58.333%; }
    .uk-width-large-8-12 { width: 66.666%; }
    .uk-width-large-9-12 { width: 75%; }
    .uk-width-large-10-12 { width: 83.333%; }
    .uk-width-large-11-12 { width: 91.666%; }

}
Member

saschadube commented Jan 8, 2014

It is very easy to extend the width classes with the one you need. When you create your own UIkit theme just add the following code to the .hook-grid-misc() {}

.uk-width-1-12 { width: 8.333%; }
.uk-width-2-12 { width: 16.666%; }
.uk-width-3-12 { width: 25%; }
.uk-width-4-12 { width: 33.333%; }
.uk-width-5-12 { width: 41.666%; }
.uk-width-6-12 { width: 50%; }
.uk-width-7-12 { width: 58.333%; }
.uk-width-8-12 { width: 66.666%; }
.uk-width-9-12 { width: 75%; }
.uk-width-10-12 { width: 83.333%; }
.uk-width-11-12 { width: 91.666%; }

/* Only tablets and desktop */
@media (min-width: @breakpoint-medium) {

    .uk-width-medium-1-12 { width: 8.333%; }
    .uk-width-medium-2-12 { width: 16.666%; }
    .uk-width-medium-3-12 { width: 25%; }
    .uk-width-medium-4-12 { width: 33.333%; }
    .uk-width-medium-5-12 { width: 41.666%; }
    .uk-width-medium-6-12 { width: 50%; }
    .uk-width-medium-7-12 { width: 58.333%; }
    .uk-width-medium-8-12 { width: 66.666%; }
    .uk-width-medium-9-12 { width: 75%; }
    .uk-width-medium-10-12 { width: 83.333%; }
    .uk-width-medium-11-12 { width: 91.666%; }

}

/* Only desktop */
@media (min-width: @breakpoint-large) {

    .uk-width-large-1-12 { width: 8.333%; }
    .uk-width-large-2-12 { width: 16.666%; }
    .uk-width-large-3-12 { width: 25%; }
    .uk-width-large-4-12 { width: 33.333%; }
    .uk-width-large-5-12 { width: 41.666%; }
    .uk-width-large-6-12 { width: 50%; }
    .uk-width-large-7-12 { width: 58.333%; }
    .uk-width-large-8-12 { width: 66.666%; }
    .uk-width-large-9-12 { width: 75%; }
    .uk-width-large-10-12 { width: 83.333%; }
    .uk-width-large-11-12 { width: 91.666%; }

}

@saschadube saschadube closed this Jan 8, 2014

@Lisa-Williams

This comment has been minimized.

Show comment
Hide comment
@Lisa-Williams

Lisa-Williams Jan 8, 2014

I believe that you forgot the push and pull classes.

Lisa-Williams commented Jan 8, 2014

I believe that you forgot the push and pull classes.

@franck34

This comment has been minimized.

Show comment
Hide comment
@franck34

franck34 Jan 9, 2014

Thanks a lot, i followed your instructions and it's working like a charm.

Hope i'll not need push/pulll as @Lisa-Williams said

Thanks again for your fastresponsivibiquicklity

franck34 commented Jan 9, 2014

Thanks a lot, i followed your instructions and it's working like a charm.

Hope i'll not need push/pulll as @Lisa-Williams said

Thanks again for your fastresponsivibiquicklity

@franck34

This comment has been minimized.

Show comment
Hide comment
@franck34

franck34 Jan 9, 2014

I need 7 columns grid too (in fact it's more a fake need to learn things about uikit internals), and i've used http://www.responsivegridsystem.com/calculator/ to fetch ratio for each width, with 0% margin. Am i right ?

franck34 commented Jan 9, 2014

I need 7 columns grid too (in fact it's more a fake need to learn things about uikit internals), and i've used http://www.responsivegridsystem.com/calculator/ to fetch ratio for each width, with 0% margin. Am i right ?

@franck34

This comment has been minimized.

Show comment
Hide comment
@franck34

franck34 Jan 9, 2014

I've customized breakingpoints too, but the result should be something like

.uk-width-1-7 { width: 14.28%; }
.uk-width-2-7 { width: 28.57%; }
.uk-width-3-7 { width: 42.85%; }
.uk-width-4-7 { width: 57.14%; }
.uk-width-5-7 { width: 71.42%; }
.uk-width-6-7 { width: 85.71%; }

@media (min-width: @breakpoint-1) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-2) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-3) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-4) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-5) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

franck34 commented Jan 9, 2014

I've customized breakingpoints too, but the result should be something like

.uk-width-1-7 { width: 14.28%; }
.uk-width-2-7 { width: 28.57%; }
.uk-width-3-7 { width: 42.85%; }
.uk-width-4-7 { width: 57.14%; }
.uk-width-5-7 { width: 71.42%; }
.uk-width-6-7 { width: 85.71%; }

@media (min-width: @breakpoint-1) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-2) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-3) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-4) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}

@media (min-width: @breakpoint-5) {
    .uk-width-1-7 { width: 14.28%; }
    .uk-width-2-7 { width: 28.57%; }
    .uk-width-3-7 { width: 42.85%; }
    .uk-width-4-7 { width: 57.14%; }
    .uk-width-5-7 { width: 71.42%; }
    .uk-width-6-7 { width: 85.71%; }
}
@m5o

This comment has been minimized.

Show comment
Hide comment
@m5o

m5o Feb 4, 2014

a 12-column grid should be shipped out of the box with uikit

push thread 👍

m5o commented Feb 4, 2014

a 12-column grid should be shipped out of the box with uikit

push thread 👍

@kisin

This comment has been minimized.

Show comment
Hide comment
@kisin

kisin Apr 6, 2014

@m5o is right.
12-column is kind of a standard these days

kisin commented Apr 6, 2014

@m5o is right.
12-column is kind of a standard these days

@triooleg

This comment has been minimized.

Show comment
Hide comment
@triooleg

triooleg Jun 4, 2016

uikit-addon-grid.css.zip
i added to grid 1-7 1-8 1-9

triooleg commented Jun 4, 2016

uikit-addon-grid.css.zip
i added to grid 1-7 1-8 1-9

@badpenguin

This comment has been minimized.

Show comment
Hide comment
@badpenguin

badpenguin May 9, 2018

The problem with @mixin hook-width-misc(){} is that your @s classes are going to override any @m, @l, etc. core classes.

badpenguin commented May 9, 2018

The problem with @mixin hook-width-misc(){} is that your @s classes are going to override any @m, @l, etc. core classes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment