feo-cz / lui-2 Goto Github PK

Allow setting up custom column paddings per breakpoint, both vertical, horizontal, both sides or only up/left/right/bottom

related to: #19

Possible classnames:

.pt-xs-15p (top)
.pl-xs-15p (left)
.pr-xs-15p (right)
.pb-xs-15p (bottom)

.ph-xs-15p (horizontal - left and right)
.pv-xs-15p (vertical - top and bottom)

.p-xs-15p  (all sides)

Example:
class="col-xs-12 pv-xs-15p col-lg-4 p-v-0" (15px vertical padding on XS, 0px padding on LG)

default horizontal padding will remain as default (15px left + right padding for columns)

iOS is dumb piece of ** as always and keeps ignoring my styles unless there is "appearance: none" style present

configure and test Gulp to minify and move updated files from js/* into dist/js/*

could be used for Less files as well, if someone likes living with pure CSS

this: http://devel.less-ui.net/demo/lui_pagebar

into lui2 repository

Rename grid breakpoints same style as clothes style? Instead of havinh HD or 2K, which basically defines resolution by itself - grid can be customized, so HD can be whatever user wants, same with 2K, someone could use it for resolutions larget than 3K or lower...

Breakpoints names idea:
.col-xs
.col-s (now as sm)
.col-m (now as md)
.col-l (now as lg)
.col-xl
.col-xxl (now as hd)

or shorter variant:
.c-xs
.c-s (now as sm)
.c-m (now as md)
.c-l (now as lg)
.c-xl
.c-xxl (now as hd)

original classnames were same as Bootstrap's ones, becouse of compatibility that was needed when moving away from Bootstrap grid on our projects

new idea:
.label-xs-block
.label-lg-inline

OS: Windows 7
Browser: Internet Explorer 10

make LUI styles always "mobile first"

it may already be tho

Try making grid layout using experimental CSS grid instead of flexbox

more: http://gridbyexample.com/
support: http://caniuse.com/#feat=css-grid

Test version 2.2.0 before release on all major browsers

make default button with transparent background

Move country_less component files to extra repository (which already exists just for icons)

.container width should be 100% or able to be set up per view (print / screen)

check solution with flexbox. Calculating size with javascript is not ideal

others do it with table / table-cell, meh

Browsers wont render warning message for "required" inputs unless they are actually rendered

input must be "visible" and "display"-ed

TODO: fake radio/check over default input or maybe overflow:hidden + default check somewhere under custom one

Tested in Chrome (warning will flash and hide), Edge wont show anything

someone should kick these browser devs in buts.

New idea:

.lui-button (global medium size)
.lui-button-small
.lui-button-big

.lui-button-xs-big
.lui-button-lg-small

fonts/ for font files only

styles and configuration in less/ - better for editing

OS: Windows 7
Browser: Internet Explorer 10

Use .lui_form input styles for input in pagebar - pagebar/pagebar.mixins.less - line 93

some projects / systems may need "dist" folder for all files that can be public on web.

Current solution with everyting in "components/[something]" is not ideal for that

OS: Windows 7
Browser: Internet Explorer 10

More here:
https://developers.google.com/web/fundamentals/getting-started/primers/customelements?hl=en

Current version is hardcoded to be inline from 768px and up and block 767px and bellow.

TODO: .xs-block .sm-inline, ... (same as table_list)

when you use (for example) ml-xs-2 and want it to reset for larget screens,
you can't cuz there is not ml-sm-0

TODO:
add ml-X-0 mr-X-0 (not needed for "XS" since grid is mobile first)

table_list/table_list.mixins.less - line 21

&.a-left {
	text-align: left;
}

&.a-center {
	text-align: center;
}

&.a-right {
	text-align: right;
}

&.va-top {
	vertical-align: top;
}

&.va-middle,
&.va-center {
	vertical-align: middle;
}

&.va-foot {
	vertical-align: baseline;
}

these for each breakpoint aka .va-xs-foot .va-xs-top, ...

Add option to use vertical spacing, Sometimes 2 columns are above each other and need some space

2k breakpoint needs to be renamed to something, that doesn't begin with number, even tho CSS should be UTF-8 compatible these days, looks like it still doesn't like number as first character for classname...