Lindat common features

Advantages

Short list of main features

1. It doesn't rely on any external component or library.

2. Fully responsive using Flexbox

3. Can be integrated into any CSS framework. The classes are prefixed with lindat- prefix, so there should be no collisions. The only two global CSS rules are:

/* The only two global things we have to set */
body {
    margin: 0; padding: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
}

The application has to only adjust to these.

1. Low code duplication

2. By using LESS, we can define variables and mixins. For example createMenu will help generate all classes for every menu item based just on configuration ```.less // Generate css for menu items (see variables at the beginning of the file) .createMenu(@item:1) when (@item <= length(@menu-items)) { @name: extract(extract(@menu-items, @item), 1); @color: extract(extract(@menu-colors, @item), 1);

    #lindat-@{name} {
      .lindat-header,
      .lindat-menu > li > a:hover,
      .lindat-@{name}-item > a,
      {
        border-bottom-color: @color;
      }
    }
    .createMenu((@item + 1));
   

} .createMenu(); ```

1. By using Gulp we can setup build process and generate exactly files we need. For example localization is based on using gulp-data and YAML files with translation constants, see for example footer.html, footer.cs.yml and footer.en.yml

2. We can produce easily minified files for Javascript and CSS

3. Simplified development

BrowserSync allow easily test in multiple browsers at once and provides Livereload functionality to automatically refresh the page when files are changed in the code editor.

1. Bower support

Can be installed and updated using Bower

1. Angular support (Piwik and Google Analytics now work out-of-box in Angular projects)

Disadvantages

1. Requires NodeJS and Gulp to build and develop

2. It's not simple edit and commit style project

3. Requires basic knowledge of LESS and YAML (it's not just simple HTML, CSS and Javascript)

4. Requires making releases using gulp tag in order reflect new changes in projects that are using Bower