Дизайн система FLAMIX

Система предназнчена для сборки приложени/админок компании FLAMIX. Система построена на базе Bootstrap с нашими модификаторами. В систему включены некоторые готовые блоки и такие модули:

Bootstrap - сетка + элементы бутсрапа;
Bootstrap Notifications - всплывающие окна (Пример);
Magnific Popup - модальное окно(Пример);
SweetAlert2 - модальное окно(Пример);
Animate.css - для анимации Bootstrap Notifications
Select2 - для стилизации кастомных полей выбора

UI набор поддерживает мультиязычность, лицензии^Скоро и оплату^Скоро.

Как подключить

Система предназначена для фреймворка Laravel. Данная инструкция подразумивает что у вас уже установелн чистый Laravel (UI перезатирает CSS и JS файлы). Подключение:

 
    #В composer.json прописываем такое
    
    "require": {
            ….
            "flamix/ui": "dev-master"
    },
    "repositories" : [
        {
            "type": "vcs",
            "url":  "git@bitbucket.org:flamixlaravel/ui.git"
        }
    ]


    #Через консоль копируем файлы (--force - файлы будут перезаписаны, не использовать при обновлении)
    php artisan vendor:publish --provider="Flamix\UI\UIServiceProvider" --tag="init" --force

CSS + JS

Вы загружаете исходники. Для того чтобы приложение работало, нужно их скомпилировать и выкладывать на сервер в скомпилированом виде.

 
    npm install
    npm run watch

    #Загружаем скомпилированные файлы из папки /public

Как поддерживать

При обнаружении бага/фичи или добавлении нового пакета, Вы можете обновить наш мастер репозиторий (Запросить доступ к репозиторию можно у Ромы).

 
    # Заходим в vendors/flamix/ui
    $ git init
    $ git checkout -b master
    $ git add .
    $ git commit -m "Что ты сделал"
    $ git tag v1.1.1 (версия всегда +1 к последнему числу)
    #Тут либо от моего имени, либо берете ссылку со своего битбакета
    $ git remote add origin https://rshkabko@bitbucket.org/flamixlaravel/ui.git
    $ git push -u origin --all
    $ git push -u origin --tags

Типографика Основной шрифт Montserrat

Заголовки

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

 
- Использовать можно так -

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

- или так -

<span class="h1">h1. Bootstrap heading</span>

<span class="h2">h2. Bootstrap heading</span>

<span class="h3">h3. Bootstrap heading</span>

<span class="h4">h4. Bootstrap heading</span>

<span class="h5">h5. Bootstrap heading</span>

<span class="h6">h6. Bootstrap heading</span>

Приложение не активировано

 
<h2>Приложение не активировано</h2>


- страница не активна

Таблицы

Дата	Статус
20:19:41 05.04.2019	Давно выяснено, что при оценке дизайна и композиции
20:19:41 05.04.2019	Многие программы електронной верстки
20:19:41 05.04.2019	В результате сгенерированный Lorem Ipsum выглядить...

Дата	Статус
20:19:41 05.04.2019	Давно выяснено, что при оценке дизайна и композиции
20:19:41 05.04.2019	Многие программы електронной верстки
20:19:41 05.04.2019	В результате сгенерированный Lorem Ipsum выглядить...

 

<table class="table">
 <thead>
    <tr>
        <th scope="col">Дата</th>
        <th scope="col">Статус</th>
    </tr>
 </thead>
 <tbody>
    <tr>
        <td scope="row">20:19:41 05.04.2019</td>
        <td>Давно выяснено, что при оценке дизайна и композиции</td>
    </tr>
    <tr>
        <td scope="row">20:19:41 05.04.2019</td>
        <td>Многие программы електронной верстки</td>
    </tr>
    <tr>
        <td scope="row">20:19:41 05.04.2019</td>
        <td>В результате сгенерированный Lorem Ipsum выглядить...</td>
    </tr>
 </tbody>
</table>


- class="flamix-table-no-border" - таблица без бордера

- class="flamix-table-border" - таблица с бордером