uikit / uikit

A lightweight and modular front-end framework for developing fast and powerful web interfaces
http://getuikit.com
MIT License
18.33k stars 2.33k forks source link

[feature request] .uk-container-medium #2882

Open SlavaAurim opened 7 years ago

SlavaAurim commented 7 years ago

.uk-container-medium { max-width: 1024px; }

Some layout do not need for wide width.

aarongerig commented 7 years ago

For that you could simply change the value of the following variable: LESS: @container-max-width: 1024px / Sass: $container-max-width: 1024px

No need for .uk-container-medium

SlavaAurim commented 7 years ago

In some sites i need both containers: wide (1200 or more for portfolio page) and medium -1024 (for text pages). I can manual add this style in my theme, but may be some people need this feature too. It is like core feature, not for theme.

zzseba78 commented 7 years ago

Well, i have this implemented in muy custom container.less file, for improve readability in some article sections in one column layout, something like this:

BTW, with the 3 container sizes in UIkit i think it´s sufficient for most use cases, use the Small, Default and Large sizes as you wish.

// Variables
// ========================================================================

@container-max-width:                   1250px;

// New sizes

@container-tiny-max-width:              35rem; 
@container-small-max-width:             45rem;
@container-medium-max-width:            900px;
@container-large-max-width:             1450px;

@container-padding-horizontal:          14px;
@container-padding-horizontal-s:        @global-gutter;
@container-padding-horizontal-m:        @global-medium-gutter;

// Miscellaneous
// ========================================================================

.hook-container-misc() {

.uk-container-tiny { max-width: @container-tiny-max-width; }
.uk-container-medium { max-width: @container-medium-max-width; }

}

The result is something like this:

captura de pantalla 2017-09-14 a la s 11 52 55