Skip to content
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
Closed

12 columns grid ? #217

franck34 opened this issue Jan 8, 2014 · 11 comments

Comments

@franck34
Copy link

@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
Copy link

@Anachron 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
Copy link
Author

@franck34 franck34 commented Jan 8, 2014

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

@saschadube
Copy link
Member

@saschadube 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
Copy link

@Lisa-Williams Lisa-Williams commented Jan 8, 2014

I believe that you forgot the push and pull classes.

@franck34
Copy link
Author

@franck34 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
Copy link
Author

@franck34 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
Copy link
Author

@franck34 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
Copy link

@m5o m5o commented Feb 4, 2014

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

push thread 👍

@kisin
Copy link

@kisin kisin commented Apr 6, 2014

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

@triooleg
Copy link

@triooleg triooleg commented Jun 4, 2016

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

@badpenguin
Copy link

@badpenguin 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.