Front-end framework for fast and easy web development of responsive websites

Need more modularity? LUI-3 is now in development. New, completely modular version of this framework https://github.com/LUI-3

---

Repository for LUI 2.0 development

---

Features

• Completely responsive
• Flexbox grid with many options such as horizontal, vertical alignment, extra column sizes and more
• Completely modular. Need grid only? no problem!

Installation

• bower install LUI-2
• composer install Foreveryone-cz/LUI-2
• download or clone manualy

Using LUI in your project

• import router.less in your project less file
• if you want to use custom LUI configuration, copy config.less into your project directory (or simply copy variables you would like to change) and import it after LUI, so it will overwrite default configuration

Sample of your project.less

@import "/path/to/lui2/less/router.less"; // lui2

@import "/path/to/project-styles/config.less"; // project settings
@import "/path/to/project-styles/theme.less"; // project styles

Configuration

• config.less is main configuration file. If you use bower or composer to download LUI, you can create your own config and import it in your project less file. Make sure this config is imported after LUI, so it will overwrite default settings. Same applies for component's configs.
• Then each component has its own config. For example button have button.config.less which is inside less/components/button/ folder. If you know you wont use this component you can simply turn all styles off in button.config.less. However grid is required in LUI, as it's variables are used in other less files (grid breakpoints for example)

Minify JS files

• all JS files from js/ folder can be minified using gulp - just run gulp minify in console

Compatibility

• Android 5 and newer
• iOS 7 and newer
• Mac OS X Mavericks and newer (Safari 7.1)
• Internet Explorer 11 (IE 10 works without some align features in grid)

Supported by