andylight

KO | EN

gitlite — search

#react #golang #deep-learning #linux #docker #nodejs #macos #cli #kubernetes #awesome-list #pytorch #security #mcp #open-source

(★ 18)

Шаблон для быстрого старта верстки. Проект заморожен.

andylight 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Andylight

Шаблон для быстрого старта верстки.

## Как начать?

У вас должны быть установлены:

- [nodejs и npm](https://nodejs.org/)
- [gulp](http://gulpjs.com/)
- [yarn](https://yarnpkg.com/)

Далее выполняем:

```
yarn
gulp build
```

После выкачивания всех зависимостей проекта и успешной первичной сборки, запустите задачу `gulp` или `gulp serve` и можете приступать к работе.

## Что включено?

- [BrowserSync](http://www.browsersync.io/)
- компиляция jade и sass
- сжатие стилей, скриптов ([ES2015](https://github.com/lukehoban/es6features)) и изображений
- проверка javascript-кода на наличие ошибок ([eslint](http://eslint.org/))

### BrowserSync

Задача `gulp serve` откроет вкладку в браузере, и в консоли вы увидите local и external пути до вашего проекта. Так вы сможете отлаживать верстку сразу в нескольких браузерах и устройствах.

### Jade

В папке src/jade расположены шаблоны для генерации. После выполнения задачи `gulp jade` в корне проекта появятся html-файлы, которые будут результатом компиляции из вышеуказанной папки с исходниками.

По умолчанию имеется один index.jade, в котором импортируются includes/head.jade, includes/header.jade и includes/footer.jade. Их стоит использовать в других подобных создаваемых шаблонах.

Файлы, расположенные в папке src/jade/includes, не компилируются.

### Стили

Все стили находятся в папке src/sass. Gulp собирает их в один файл main.min.css и кладет в папку dist/css.

Все делится на логические блоки (файлы). Если вы хотите добавить еще один, создайте новый sass-файл и подключите его в main.sass.

Вы можете активировать плагин [gulp-uncss](https://www.npmjs.com/package/gulp-uncss), чтобы убрать ненужные стили (см. файл gulpfile.js: задача `sass-build`).

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

#### Postcss

В шаблоне для изменения скомпилированного css-кода используются [плагины](http://postcss.parts/) [Postcss](https://github.com/postcss/postcss).

- [autoprefixer](https://github.com/postcss/autoprefixer) (автоматически проставляет браузерные префиксы)
- [cssnano](https://github.com/ben-eb/cssnano) (сжимает css-код)

### Изображения

За сжатие изображений отвечает задача `gulp images` (в том числе `gulp webp`). Вы можете вызывать ее самостоятельно, либо запустить `gulp`, и после этого каждый файл изображения, размещенный в src/img (включая svg), будет сжат и положен в dist/img с тем же именем. Также используется генерация [WebP-изображений](https://developers.google.com/speed/webp/). Их можно использовать так:

**html:**

```
<picture>
	<source srcset="dist/img/image.webp" type="image/webp">
	<img src="dist/img/image.jpg">
</picture>
```

**css (вместе с [modernizr](https://modernizr.com/)):**

```
body
    background-position: center center
    background-attachment: fixed

.no-webp body
    background-image: url(#{$img}/bg-main.jpg)

.webp body
    background-image: url(#{$img}/bg-main.webp)
```

Вы можете использовать [систему символов SVG](https://css-tricks.com/svg-symbol-good-choice-icons/). Эти символы описываются единожды в самом начале документа (для этого заводится один скрытый тег svg), а затем их можно использовать повторно где-либо на страницах, менять их заливку, размер, применять трансформации (поворот и др.), а также анимировать какие-либо значения (fill и др.) с помощью [transition](http://www.w3schools.com/css/css3_transitions.asp) или применять сложную анимацию на основе [keyframes](http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp).

Пример:

```
...
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
        <symbol id="icon-test" viewBox="0 0 100 100">
            <path d="..."></path>
        </symbol>
    </svg>
    
	...
	
	<svg class="icon-test">
		<use xlink:href="#icon-test"></use>
	</svg>
	...
```

Для автоматизации процесса хорошо подходит плагин [gulp-svgstore](https://www.npmjs.com/package/gulp-svgstore). Именно он используется в Andylight. Все иконки в виде скрытого svg автоматически добавляются в шаблон, располагаясь сперва в подключаемом js-файле, а затем встраиваясь в страницу. Просто кладите нужные иконки в папку `src/img/svg/icons` и используйте их на страницах с помощью конструкции *svg use* (задача `gulp svgstore`).

#### Favicons

Для генерации favicons вы можете пользоваться сервисом [RealFaviconGenerator](http://realfavicongenerator.net/). Положите сгенерированные иконки в папку `/src/favicons`.

[Дополнительная информация про иконки](https://github.com/audreyr/favicon-cheat-sheet).

### Скрипты

Для сборки ваших и сторонних модулей используется [Browserify](http://browserify.org/).

Все необходимые пакеты устанавливаются через [yarn](https://yarnpkg.com/) (`yarn add package`) и после этого их можно использовать у себя в коде. Например:

`import _find from 'lodash/find';`

Входная точка приложения - src/js/app.js.

### Финальная сборка

После того, как вы закончили работу над очередной частью вашего проекта, выполните задачу `gulp build`, чтобы привести выходные файлы с правильное состояние. Так, например, вы добьетесь того, что js будет сжат и из него сборщик удалит карты кода.

### Тестируем баги верстки

Откройте отладчик и выполните следующий код:

```
var a,w=document.createTreeWalker(document,NodeFilter.SHOW_TEXT);while(a=w.nextNode()){if(a.textContent.trim().length)a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'}
```

Это поможет вам увидеть, где что поехало, какие блоки сломались.

Код взят [из статьи на Хабрахабре](http://habrahabr.ru/company/2gis/blog/246831/) от 2ГИС.

Вы также можете воспользоваться [расширением для Google Chrome](http://goo.gl/3xt6MV).

## Контакты

Если у вас имеются какие-либо вопросы или пожелания, пишите письма на [nikbelikov@me.com](mailto:nikbelikov@me.com) или воспользуйтесь [твиттером](https://twitter.com/_nikbelikov).

## Лицензия

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

andylight

andylight 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

andylight

andylight 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README