feo-cz / lui-2 Goto Github PK

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

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.

OS: Windows 7
Browser: Internet Explorer 10

OS: Windows 7
Browser: Internet Explorer 10

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)

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

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

make LUI styles always "mobile first"

it may already be tho

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

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, ...

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)

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

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

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

others do it with table / table-cell, meh

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

Test version 2.2.0 before release on all major browsers

Try making grid layout using experimental CSS grid instead of flexbox

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

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

into lui2 repository

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)

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...

make default button with transparent background

fonts/ for font files only

styles and configuration in less/ - better for editing

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

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

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

OS: Windows 7
Browser: Internet Explorer 10

New idea:

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

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