spin jquery bs3

SPIN HTML/CSS — теперь бесплатно!

Введение

Тема SPIN Admin/Dashboard с минималистским дизайном и инновационным темным пользовательским интерфейсом позволит вам создать удивительное и мощное приложение с великолепным пользовательским интерфейсом. Идеально разработан для крупномасштабных приложений и снабжен подробной пошаговой документацией. Он построен на основе новейших стандартов и рекомендаций. Он основан на платформе Bootstrap 3.x, которая в настоящее время является одной из самых популярных платформ в мире.

Установка

1. Убедитесь, что у вас установлен Ruby (также Ruby DevKit для Windows), Jekyll gem, Bundler gem ( gem install bundler ), Node, Bower и Gulp.
2. Клонируйте этот репозиторий git clone https://github.com/0wczar/spin.jekyll.git
3. В терминале перейдите в каталог клонированного репозитория.
4. Запустите npm install , чтобы установить пакеты NPM.
5. Запустите bower install чтобы установить пакеты Bower.
6. Запустите gulp bower , чтобы прикрепить пакеты Bower к Jekyll.
7. Запустите bundler чтобы установить необходимые Gems.
8. (Опция) Запустите gulp , чтобы запустить Jekyll с наблюдателем HTML/JS/Styles. Чтобы начать просмотр ТОЛЬКО HTML-файлов, запустите gulp jekyll

Добавление компонентов Bower

1. В терминале перейдите в каталог проекта
2. Запустите bower install <package-name> --save например, bower install jquery --save . Список пакетов Bower можно найти здесь — http://bower.io/search/.
3. Когда установка завершится, запустите gulp bower , чтобы подключить новую библиотеку.

Добавление плагинов Less/Sass

1. Файлы Sass плагинов должны быть помещены в /src/assets/scss/<plugin-name>
2. Скомпилированный CSS должен быть помещен в /src/assets/stylesheets/<plugin-name>.css
3. Этот созданный пользовательский стиль должен быть связан с файлом /src/_includes/head.html , например, <link rel="stylesheet" href="assets/stylesheets/select2-bootstrap.css">

Создание новых страниц

1. Новые HTML-страницы следует добавлять в папку /src , например /src/new-page.html
2. Новая страница должна иметь переменные вверху, необходимые для layout: default . Другие используемые переменные: bodyClasses , который добавляет соответствующие классы в тег body, defaultContainer , который добавляет определенный контейнер в навигационную панель и нижний колонтитул, и title , который вводится в заголовок и может использоваться в контенте через {{ page.title }} . Пример:
3. Добавленная страница должна быть связана на боковой панели следующим образом: Пример ссылки: <li class="{% if page.url == "/default.html" %}active{% endif %}"><a href="/default.html"><span class="nav-label">Default</span></a></li>
4. Чтобы получить доступ к этой странице, вы можете использовать этот URL: localhost:3000/new-page/

Vanilla Source (полная версия приложения Light)

1. В основной папке введите в терминале gulp build:vanilla
2. Заходим в папку cd /site
3. Затем npm install
4. Следующая bower install
5. Следующая gulp build
6. Готовый исходник доступен в папке /dist

Начальный источник (стартовая разработка) (_inludes/starter...)

1. В основной папке введите в терминале gulp build:seed
2. Готовый исходник доступен в папке /starter

Сброс GIT

1. Перейдите в папку с cd /your_catalog
2. Введите git reset --hard origin/master
3. Получить через Github Dekstop

Новые возможности фейкера

1. Пример: 25–07–2016 – 12:03 (12 ч) <span data-faker="{{date.day}} {{date.monthDigit}} {{date.year}} {{date.time}}"></span>
2. Пример: Месяцы: январь, февраль, март и т. д. data-faker="[[date.monthShort]]"
3. Примеры: Дни: понедельник, вторник, среда и т. д. data-faker="[[date.weekdayShort]]"
4. Пример: 1–100 %: <span data-faker="[[random.percentage]]"><span>
5. Пример: 0–100,0 %: <span data-faker="[[random.percentagePoint]]"><span>