├── .babelrc ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .htaccess ├── README.md ├── gulpfile.js ├── package.json ├── src ├── favicons │ ├── android-chrome-192x192.png │ ├── android-chrome-384x384.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── manifest.json │ ├── mstile-150x150.png │ └── safari-pinned-tab.svg ├── img │ ├── image.jpg │ └── svg │ │ ├── icons │ │ └── icon-nature.svg │ │ └── logo.svg ├── jade │ ├── includes │ │ ├── footer.jade │ │ ├── head.jade │ │ └── header.jade │ └── index.jade ├── js │ ├── app.js │ └── modules │ │ └── main.js └── sass │ ├── _buttons.sass │ ├── _content.sass │ ├── _fonts.sass │ ├── _forms.sass │ ├── _helpers.sass │ ├── _layout.sass │ ├── _normalize.sass │ ├── _radiocheck.sass │ ├── _scroll.sass │ ├── _select.sass │ ├── _variables.sass │ └── main.sass └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in 2 | # this file, please see the EditorConfig documentation: 3 | # http://editorconfig.org/ 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_size = 2 11 | indent_style = space 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | 18 | [{.travis.yml,package.json}] 19 | # The indent size used in the `package.json` file cannot be changed 20 | # https://github.com/npm/npm/pull/3180#issuecomment-16336516 21 | indent_size = 2 22 | indent_style = space 23 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es6": true 6 | }, 7 | "parserOptions": { 8 | "ecmaFeatures": { 9 | "ecmaVersion": 6, 10 | "experimentalObjectRestSpread": true, 11 | "jsx": true 12 | }, 13 | "sourceType": "module" 14 | }, 15 | "extends": "airbnb", 16 | "plugins": [ 17 | "react", 18 | "jsx-a11y", 19 | "import" 20 | ], 21 | "rules": { 22 | "react/prefer-es6-class": [ 23 | 2, 24 | "always" 25 | ], 26 | "react/prefer-stateless-function": [0], 27 | "react/forbid-prop-types": [0], 28 | "react/jsx-no-bind": [0], 29 | "react/no-find-dom-node": [0], 30 | "import/no-extraneous-dependencies": [0], 31 | "import/no-unresolved": [1], 32 | "class-methods-use-this": [0], 33 | "jsx-a11y/label-has-for": [0], 34 | "no-underscore-dangle": ["error", { "allow": ["b_"] }], 35 | "jsx-a11y/no-static-element-interactions": [0] 36 | }, 37 | "globals": { 38 | "Swiper": true, 39 | "asset_path": true 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | .sass-cache 4 | node_modules 5 | dist 6 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | AddDefaultCharset utf-8 2 | 3 | AddType image/webp webp 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Andylight 2 | 3 | Шаблон для быстрого старта верстки. 4 | 5 | ## Как начать? 6 | 7 | У вас должны быть установлены: 8 | 9 | - [nodejs и npm](https://nodejs.org/) 10 | - [gulp](http://gulpjs.com/) 11 | - [yarn](https://yarnpkg.com/) 12 | 13 | Далее выполняем: 14 | 15 | ``` 16 | yarn 17 | gulp build 18 | ``` 19 | 20 | После выкачивания всех зависимостей проекта и успешной первичной сборки, запустите задачу `gulp` или `gulp serve` и можете приступать к работе. 21 | 22 | ## Что включено? 23 | 24 | - [BrowserSync](http://www.browsersync.io/) 25 | - компиляция jade и sass 26 | - сжатие стилей, скриптов ([ES2015](https://github.com/lukehoban/es6features)) и изображений 27 | - проверка javascript-кода на наличие ошибок ([eslint](http://eslint.org/)) 28 | 29 | ### BrowserSync 30 | 31 | Задача `gulp serve` откроет вкладку в браузере, и в консоли вы увидите local и external пути до вашего проекта. Так вы сможете отлаживать верстку сразу в нескольких браузерах и устройствах. 32 | 33 | ### Jade 34 | 35 | В папке src/jade расположены шаблоны для генерации. После выполнения задачи `gulp jade` в корне проекта появятся html-файлы, которые будут результатом компиляции из вышеуказанной папки с исходниками. 36 | 37 | По умолчанию имеется один index.jade, в котором импортируются includes/head.jade, includes/header.jade и includes/footer.jade. Их стоит использовать в других подобных создаваемых шаблонах. 38 | 39 | Файлы, расположенные в папке src/jade/includes, не компилируются. 40 | 41 | ### Стили 42 | 43 | Все стили находятся в папке src/sass. Gulp собирает их в один файл main.min.css и кладет в папку dist/css. 44 | 45 | Все делится на логические блоки (файлы). Если вы хотите добавить еще один, создайте новый sass-файл и подключите его в main.sass. 46 | 47 | Вы можете активировать плагин [gulp-uncss](https://www.npmjs.com/package/gulp-uncss), чтобы убрать ненужные стили (см. файл gulpfile.js: задача `sass-build`). 48 | 49 | Стоит придерживаться единому стилю написания кода, чтобы обеспечить высокую скорость разработки и поддерживаемость ваших проектов. 50 | 51 | #### Postcss 52 | 53 | В шаблоне для изменения скомпилированного css-кода используются [плагины](http://postcss.parts/) [Postcss](https://github.com/postcss/postcss). 54 | 55 | - [autoprefixer](https://github.com/postcss/autoprefixer) (автоматически проставляет браузерные префиксы) 56 | - [cssnano](https://github.com/ben-eb/cssnano) (сжимает css-код) 57 | 58 | ### Изображения 59 | 60 | За сжатие изображений отвечает задача `gulp images` (в том числе `gulp webp`). Вы можете вызывать ее самостоятельно, либо запустить `gulp`, и после этого каждый файл изображения, размещенный в src/img (включая svg), будет сжат и положен в dist/img с тем же именем. Также используется генерация [WebP-изображений](https://developers.google.com/speed/webp/). Их можно использовать так: 61 | 62 | **html:** 63 | 64 | ``` 65 | 66 | 67 | 68 | 69 | ``` 70 | 71 | **css (вместе с [modernizr](https://modernizr.com/)):** 72 | 73 | ``` 74 | body 75 | background-position: center center 76 | background-attachment: fixed 77 | 78 | .no-webp body 79 | background-image: url(#{$img}/bg-main.jpg) 80 | 81 | .webp body 82 | background-image: url(#{$img}/bg-main.webp) 83 | ``` 84 | 85 | Вы можете использовать [систему символов 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). 86 | 87 | Пример: 88 | 89 | ``` 90 | ... 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | ... 100 | 101 | 102 | 103 | 104 | ... 105 | ``` 106 | 107 | Для автоматизации процесса хорошо подходит плагин [gulp-svgstore](https://www.npmjs.com/package/gulp-svgstore). Именно он используется в Andylight. Все иконки в виде скрытого svg автоматически добавляются в шаблон, располагаясь сперва в подключаемом js-файле, а затем встраиваясь в страницу. Просто кладите нужные иконки в папку `src/img/svg/icons` и используйте их на страницах с помощью конструкции *svg use* (задача `gulp svgstore`). 108 | 109 | #### Favicons 110 | 111 | Для генерации favicons вы можете пользоваться сервисом [RealFaviconGenerator](http://realfavicongenerator.net/). Положите сгенерированные иконки в папку `/src/favicons`. 112 | 113 | [Дополнительная информация про иконки](https://github.com/audreyr/favicon-cheat-sheet). 114 | 115 | ### Скрипты 116 | 117 | Для сборки ваших и сторонних модулей используется [Browserify](http://browserify.org/). 118 | 119 | Все необходимые пакеты устанавливаются через [yarn](https://yarnpkg.com/) (`yarn add package`) и после этого их можно использовать у себя в коде. Например: 120 | 121 | `import _find from 'lodash/find';` 122 | 123 | Входная точка приложения - src/js/app.js. 124 | 125 | ### Финальная сборка 126 | 127 | После того, как вы закончили работу над очередной частью вашего проекта, выполните задачу `gulp build`, чтобы привести выходные файлы с правильное состояние. Так, например, вы добьетесь того, что js будет сжат и из него сборщик удалит карты кода. 128 | 129 | ### Тестируем баги верстки 130 | 131 | Откройте отладчик и выполните следующий код: 132 | 133 | ``` 134 | var a,w=document.createTreeWalker(document,NodeFilter.SHOW_TEXT);while(a=w.nextNode()){if(a.textContent.trim().length)a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'} 135 | ``` 136 | 137 | Это поможет вам увидеть, где что поехало, какие блоки сломались. 138 | 139 | Код взят [из статьи на Хабрахабре](http://habrahabr.ru/company/2gis/blog/246831/) от 2ГИС. 140 | 141 | Вы также можете воспользоваться [расширением для Google Chrome](http://goo.gl/3xt6MV). 142 | 143 | ## Контакты 144 | 145 | Если у вас имеются какие-либо вопросы или пожелания, пишите письма на [nikbelikov@me.com](mailto:nikbelikov@me.com) или воспользуйтесь [твиттером](https://twitter.com/_nikbelikov). 146 | 147 | ## Лицензия 148 | 149 | Copyright (c) 2014-2017 [nikbelikov.ru](http://nikbelikov.ru/) 150 | 151 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: 152 | 153 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. 154 | 155 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. 156 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserSync = require('browser-sync').create(); 3 | var autoprefixer = require('autoprefixer'); 4 | var cssnano = require('cssnano'); 5 | var browserify = require('browserify'); 6 | var babel = require('babelify'); 7 | var vinylSourceStream = require('vinyl-source-stream'); 8 | var es = require('event-stream'); 9 | var $ = require('gulp-load-plugins')(); 10 | 11 | gulp.task('copy-bootstrap', function () { 12 | gulp.src('node_modules/bootstrap-sass/assets/**/*') 13 | .pipe(gulp.dest('src/sass/bootstrap')); 14 | }); 15 | 16 | gulp.task('copy-favicons', function () { 17 | gulp.src('src/favicons/*') 18 | .pipe($.newer('dist/favicons')) 19 | .pipe(gulp.dest('dist/favicons')); 20 | }); 21 | 22 | gulp.task('serve', ['sass', 'browserify'], function () { 23 | browserSync.init({ 24 | server: "./dist" 25 | }); 26 | 27 | gulp.watch('src/jade/**/*.jade', ['jade']); 28 | gulp.watch(['src/sass/**/*.sass', 'src/sass/**/*.scss'], ['sass']); 29 | gulp.watch('src/img/svg/icons/**/*', ['svgstore']); 30 | gulp.watch(['src/img/**/*', '!src/img/svg/icons/**/*'], ['webp']); 31 | gulp.watch('src/js/**/*', ['browserify']); 32 | }); 33 | 34 | gulp.task('jade', function () { 35 | return gulp.src('src/jade/*.jade') 36 | .pipe($.jade({ 37 | pretty: " " 38 | }).on('error', $.notify.onError({ 39 | title: "Jade Error", 40 | message: "<%= error.message %>" 41 | }))) 42 | .pipe(gulp.dest('dist')) 43 | .pipe(browserSync.stream({once: true})); 44 | }); 45 | 46 | var postcssPlugins = [ 47 | autoprefixer({ 48 | browsers: ['last 2 versions'] 49 | }), 50 | cssnano({ 51 | zindex: false, 52 | reduceIdents: false, 53 | discardUnused: false, 54 | mergeIdents: false 55 | }) 56 | ]; 57 | 58 | gulp.task('sass-build', function () { 59 | gulp.src('src/sass/**/*.sass') 60 | .pipe($.sass() 61 | .on('error', $.notify.onError({ 62 | title: "Sass Error", 63 | message: "<%= error.message %>" 64 | }))) 65 | .pipe($.rename({ 66 | suffix: ".min" 67 | })) 68 | //.pipe($.uncss({ 69 | // html: ['index.html'], 70 | // ignore: [ 71 | // '.my-selector' 72 | // ] 73 | //})) 74 | .pipe($.postcss(postcssPlugins)) 75 | .pipe(gulp.dest('dist/css')) 76 | .pipe(browserSync.stream()); 77 | }); 78 | 79 | gulp.task('sass', function () { 80 | gulp.src('src/sass/**/*.sass') 81 | .pipe($.sourcemaps.init()) 82 | .pipe($.sass() 83 | .on('error', $.notify.onError({ 84 | title: "Sass Error", 85 | message: "<%= error.message %>" 86 | }))) 87 | .pipe($.rename({ 88 | suffix: ".min" 89 | })) 90 | .pipe($.postcss([ 91 | autoprefixer({ 92 | browsers: ['last 2 versions'] 93 | }) 94 | ])) 95 | .pipe($.sourcemaps.write()) 96 | .pipe(gulp.dest('dist/css')) 97 | .pipe(browserSync.stream()); 98 | }); 99 | 100 | gulp.task('svgstore', function () { 101 | return gulp 102 | .src('src/img/svg/icons/**/*.svg') 103 | .pipe($.svgmin({ 104 | plugins: [ 105 | { 106 | removeAttrs: { 107 | attrs: ['fill'] 108 | } 109 | } 110 | ] 111 | })) 112 | .pipe($.svgstore({inlineSvg: true})) 113 | .pipe($.svg2string()) 114 | .pipe(gulp.dest('dist/img/svg')); 115 | }); 116 | 117 | gulp.task('images', function () { 118 | return gulp.src('src/img/**/*') 119 | .pipe($.newer('dist/img')) 120 | .pipe($.imagemin({ 121 | progressive: true 122 | })) 123 | .pipe(gulp.dest('dist/img')); 124 | }); 125 | 126 | gulp.task('webp', ['images'], function () { 127 | return gulp.src(['dist/img/**/*.jpg', 'dist/img/**/*.png']) 128 | .pipe($.cached('dist/img')) 129 | .pipe($.webp({ 130 | quality: 85 131 | })) 132 | .pipe(gulp.dest('dist/img')) 133 | .pipe(browserSync.stream({once: true})); 134 | }); 135 | 136 | gulp.task('uglify', ['browserify'], function () { 137 | return gulp.src('dist/js/*.js') 138 | .pipe($.uglify({ 139 | preserveComments: 'some' 140 | })) 141 | .pipe(gulp.dest('dist/js')); 142 | }); 143 | 144 | gulp.task('browserify', ['lint'], function () { 145 | var files = [ 146 | 'app.js' 147 | ]; 148 | var tasks = files.map(function (entry) { 149 | return browserify({ 150 | entries: ['src/js/' + entry], 151 | debug: true 152 | }) 153 | .transform(babel) 154 | .bundle() 155 | .on('error', $.notify.onError({ 156 | title: "Scripts Error", 157 | message: "<%= error.message %>" 158 | })) 159 | .pipe(vinylSourceStream(entry)) 160 | .pipe($.rename({ 161 | extname: '.bundle.js' 162 | })) 163 | .pipe(gulp.dest('dist/js')) 164 | .pipe(browserSync.stream({once: true})); 165 | }); 166 | return es.merge.apply(null, tasks); 167 | }); 168 | 169 | gulp.task('lint', () => { 170 | return gulp.src('src/js/**/*') 171 | .pipe($.eslint()) 172 | .pipe($.eslint.format()) 173 | .pipe($.eslint.failAfterError()); 174 | }); 175 | 176 | gulp.task('build', ['jade', 'sass-build', 'svgstore', 'webp', 'uglify', 'copy-favicons']); 177 | gulp.task('default', ['serve']); 178 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Project", 3 | "version": "1.0.0", 4 | "description": "Your project description", 5 | "repository": { 6 | "type": "git", 7 | "url": "your git repo" 8 | }, 9 | "author": "Author", 10 | "dependencies": { 11 | "autoprefixer": "6.3.7", 12 | "babel-eslint": "7.1.1", 13 | "babel-preset-es2015": "6.9.0", 14 | "babelify": "7.3.0", 15 | "bootstrap-sass": "3.3.6", 16 | "browser-sync": "2.13.0", 17 | "browserify": "13.0.1", 18 | "browsernizr": "2.1.0", 19 | "cssnano": "3.7.3", 20 | "eslint-config-airbnb": "14.0.0", 21 | "eslint-plugin-import": "2.2.0", 22 | "eslint-plugin-jsx-a11y": "3.0.2", 23 | "eslint-plugin-react": "6.9.0", 24 | "event-stream": "3.3.4", 25 | "gulp": "3.9.1", 26 | "gulp-cached": "1.1.0", 27 | "gulp-clean": "0.3.2", 28 | "gulp-concat": "2.6.0", 29 | "gulp-eslint": "3.0.1", 30 | "gulp-imagemin": "3.0.2", 31 | "gulp-jade": "1.1.0", 32 | "gulp-load-plugins": "1.2.4", 33 | "gulp-newer": "1.2.0", 34 | "gulp-notify": "2.2.0", 35 | "gulp-postcss": "6.1.1", 36 | "gulp-rename": "1.2.2", 37 | "gulp-sass": "2.3.2", 38 | "gulp-sourcemaps": "1.6.0", 39 | "gulp-svg2string": "0.1.1", 40 | "gulp-svgmin": "1.2.2", 41 | "gulp-svgstore": "6.0.0", 42 | "gulp-uglify": "1.5.4", 43 | "gulp-uncss": "1.0.6", 44 | "gulp-webp": "2.3.0", 45 | "vinyl-source-stream": "1.1.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/favicons/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/android-chrome-384x384.png -------------------------------------------------------------------------------- /src/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /src/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ffc40d 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /src/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /src/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/favicon.ico -------------------------------------------------------------------------------- /src/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Andylight", 3 | "icons": [ 4 | { 5 | "src": "/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, 9 | { 10 | "src": "/android-chrome-384x384.png", 11 | "sizes": "384x384", 12 | "type": "image/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "background_color": "#ffffff", 17 | "display": "standalone" 18 | } -------------------------------------------------------------------------------- /src/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /src/favicons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikbelikov/andylight/33fac257fe582c990b29d2edeb2441859ea22ed5/src/img/image.jpg -------------------------------------------------------------------------------- /src/img/svg/icons/icon-nature.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/img/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/jade/includes/footer.jade: -------------------------------------------------------------------------------- 1 | footer.footer 2 | .wrapper footer 3 | 4 | script(src="js/app.bundle.js") 5 | -------------------------------------------------------------------------------- /src/jade/includes/head.jade: -------------------------------------------------------------------------------- 1 | head 2 | meta(charset="utf-8") 3 | meta(http-equiv="X-UA-Compatible", content="IE=edge") 4 | meta(name="viewport", content="width=device-width, initial-scale=1") 5 | title Your title 6 | meta(name="keywords", content="") 7 | meta(name="description", content="") 8 | 9 | //- http://realfavicongenerator.net/ 10 | link(rel="apple-touch-icon", sizes="180x180", href="favicons/apple-touch-icon.png") 11 | link(rel="icon", type="image/png", href="favicons/favicon-32x32.png", sizes="32x32") 12 | link(rel="icon", type="image/png", href="favicons/favicon-16x16.png", sizes="16x16") 13 | link(rel="manifest", href="favicons/manifest.json") 14 | link(rel="mask-icon", href="favicons/safari-pinned-tab.svg", color="#5bbad5") 15 | meta(name="theme-color", content="#ffffff") 16 | 17 | link(href="css/main.min.css", rel="stylesheet") 18 | 19 | script(src="img/svg/icons.js") 20 | -------------------------------------------------------------------------------- /src/jade/includes/header.jade: -------------------------------------------------------------------------------- 1 | header.header 2 | .wrapper header 3 | -------------------------------------------------------------------------------- /src/jade/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | html.no-js 4 | 5 | include includes/head 6 | 7 | body 8 | .svg-placeholder(style="height: 0; width: 0; position: absolute; visibility: hidden") 9 | script(type='text/javascript'). 10 | document.querySelector('.svg-placeholder').innerHTML = SVG_SPRITE; 11 | 12 | include includes/header 13 | 14 | main.content 15 | .wrapper 16 | h1 Andylight - шаблон для быстрого старта верстки 17 | 18 | svg.icon-nature 19 | use(xlink:href="#icon-nature") 20 | 21 | include includes/footer 22 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | // modernizr (webp support check only) 2 | import 'browsernizr/test/img/webp'; 3 | import 'browsernizr'; 4 | 5 | import mainModule from './modules/main'; 6 | 7 | mainModule.init(); 8 | -------------------------------------------------------------------------------- /src/js/modules/main.js: -------------------------------------------------------------------------------- 1 | export default { 2 | init() { 3 | const projectName = 'Andylight'; 4 | this.showMessage(`${projectName} works!`); 5 | }, 6 | showMessage(message) { 7 | console.log(message); 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /src/sass/_buttons.sass: -------------------------------------------------------------------------------- 1 | .btn, .btn:visited 2 | padding: 11px 33px 3 | font: 14px Arial, sans-serif 4 | color: white 5 | border: none 6 | background: orange 7 | outline: none !important 8 | cursor: pointer 9 | display: inline-block 10 | position: relative 11 | 12 | &:hover, &:focus 13 | background: lighten(orange, 10%) 14 | color: white 15 | 16 | &:active 17 | background: darken(orange, 10%) 18 | -------------------------------------------------------------------------------- /src/sass/_content.sass: -------------------------------------------------------------------------------- 1 | .icon-nature 2 | width: 100px 3 | fill: green 4 | -------------------------------------------------------------------------------- /src/sass/_fonts.sass: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=PT+Sans&subset=latin,cyrillic") 2 | -------------------------------------------------------------------------------- /src/sass/_forms.sass: -------------------------------------------------------------------------------- 1 | input, textarea 2 | font: 14px Arial, sans-serif 3 | outline: none 4 | border: 1px solid gray 5 | padding: 10px 6 | -webkit-appearance: none 7 | 8 | &:focus, &:active 9 | border-color: orange 10 | 11 | textarea 12 | resize: none 13 | overflow: auto 14 | -------------------------------------------------------------------------------- /src/sass/_helpers.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | =placeholder($color) 4 | ::-webkit-input-placeholder 5 | color: $color 6 | :-moz-placeholder 7 | color: $color 8 | opacity: 1 9 | ::-moz-placeholder 10 | color: $color 11 | opacity: 1 12 | :-ms-input-placeholder 13 | color: $color 14 | 15 | =ellipsis 16 | overflow: hidden 17 | text-overflow: ellipsis 18 | white-space: nowrap 19 | 20 | =font($name, $size) 21 | font-family: $name, sans-serif 22 | font-size: $size 23 | 24 | .ellipsis 25 | +ellipsis 26 | 27 | .full-width 28 | width: 100% 29 | -------------------------------------------------------------------------------- /src/sass/_layout.sass: -------------------------------------------------------------------------------- 1 | html 2 | min-width: $layout-min-width 3 | height: 100% 4 | 5 | body 6 | display: flex 7 | flex-direction: column 8 | height: 100% 9 | 10 | ::selection 11 | background: $select-text-bg 12 | color: $select-text-color 13 | 14 | ::-moz-selection 15 | background: $select-text-bg 16 | color: $select-text-color 17 | 18 | .header 19 | flex: 0 0 auto 20 | height: $header-height 21 | background: #127BB9 22 | color: white 23 | 24 | .content 25 | flex: 1 0 auto 26 | 27 | .wrapper 28 | width: $layout-min-width 29 | max-width: $layout-max-width 30 | margin: 0 auto 31 | 32 | .footer 33 | flex: 0 0 auto 34 | height: $footer-height 35 | background: #127BB9 36 | color: white 37 | -------------------------------------------------------------------------------- /src/sass/_normalize.sass: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css 2 | 3 | /* Document 4 | * ========================================================================== 5 | 6 | /** 7 | * 1. Change the default font family in all browsers (opinionated). 8 | * 2. Correct the line height in all browsers. 9 | * 3. Prevent adjustments of font size after orientation changes in 10 | * IE on Windows Phone and in iOS. 11 | 12 | html 13 | font-family: sans-serif 14 | /* 1 15 | line-height: 1.15 16 | /* 2 17 | -ms-text-size-adjust: 100% 18 | /* 3 19 | -webkit-text-size-adjust: 100% 20 | /* 3 21 | 22 | /* Sections 23 | * ========================================================================== 24 | 25 | /** 26 | * Remove the margin in all browsers (opinionated). 27 | 28 | body 29 | margin: 0 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | 34 | article, aside, footer, header, nav, section 35 | display: block 36 | 37 | /** 38 | * Correct the font size and margin on `h1` elements within `section` and 39 | * `article` contexts in Chrome, Firefox, and Safari. 40 | 41 | h1 42 | font-size: 2em 43 | margin: 0.67em 0 44 | 45 | /* Grouping content 46 | * ========================================================================== 47 | 48 | /** 49 | * Add the correct display in IE 9-. 50 | * 1. Add the correct display in IE. 51 | 52 | figcaption, figure, main 53 | /* 1 54 | display: block 55 | 56 | /** 57 | * Add the correct margin in IE 8. 58 | 59 | figure 60 | margin: 1em 40px 61 | 62 | /** 63 | * 1. Add the correct box sizing in Firefox. 64 | * 2. Show the overflow in Edge and IE. 65 | 66 | hr 67 | box-sizing: content-box 68 | /* 1 69 | height: 0 70 | /* 1 71 | overflow: visible 72 | /* 2 73 | 74 | /** 75 | * 1. Correct the inheritance and scaling of font size in all browsers. 76 | * 2. Correct the odd `em` font sizing in all browsers. 77 | 78 | pre 79 | font-family: monospace, monospace 80 | /* 1 81 | font-size: 1em 82 | /* 2 83 | 84 | /* Text-level semantics 85 | * ========================================================================== 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | 91 | a 92 | background-color: transparent 93 | /* 1 94 | -webkit-text-decoration-skip: objects 95 | /* 2 96 | &:active, &:hover 97 | outline-width: 0 98 | 99 | /** 100 | * Remove the outline on focused links when they are also active or hovered 101 | * in all browsers (opinionated). 102 | 103 | /** 104 | * 1. Remove the bottom border in Firefox 39-. 105 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 106 | 107 | abbr[title] 108 | border-bottom: none 109 | /* 1 110 | text-decoration: underline 111 | /* 2 112 | text-decoration: underline dotted 113 | /* 2 114 | 115 | /** 116 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 117 | 118 | b, strong 119 | font-weight: inherit 120 | 121 | /** 122 | * Add the correct font weight in Chrome, Edge, and Safari. 123 | 124 | b, strong 125 | font-weight: bolder 126 | 127 | /** 128 | * 1. Correct the inheritance and scaling of font size in all browsers. 129 | * 2. Correct the odd `em` font sizing in all browsers. 130 | 131 | code, kbd, samp 132 | font-family: monospace, monospace 133 | /* 1 134 | font-size: 1em 135 | /* 2 136 | 137 | /** 138 | * Add the correct font style in Android 4.3-. 139 | 140 | dfn 141 | font-style: italic 142 | 143 | /** 144 | * Add the correct background and color in IE 9-. 145 | 146 | mark 147 | background-color: #ff0 148 | color: #000 149 | 150 | /** 151 | * Add the correct font size in all browsers. 152 | 153 | small 154 | font-size: 80% 155 | 156 | /** 157 | * Prevent `sub` and `sup` elements from affecting the line height in 158 | * all browsers. 159 | 160 | sub, sup 161 | font-size: 75% 162 | line-height: 0 163 | position: relative 164 | vertical-align: baseline 165 | 166 | sub 167 | bottom: -0.25em 168 | 169 | sup 170 | top: -0.5em 171 | 172 | /* Embedded content 173 | * ========================================================================== 174 | 175 | /** 176 | * Add the correct display in IE 9-. 177 | 178 | audio, video 179 | display: inline-block 180 | 181 | /** 182 | * Add the correct display in iOS 4-7. 183 | 184 | audio:not([controls]) 185 | display: none 186 | height: 0 187 | 188 | /** 189 | * Remove the border on images inside links in IE 10-. 190 | 191 | img 192 | border-style: none 193 | 194 | /** 195 | * Hide the overflow in IE. 196 | 197 | svg:not(:root) 198 | overflow: hidden 199 | 200 | /* Forms 201 | * ========================================================================== 202 | 203 | /** 204 | * 1. Change the font styles in all browsers (opinionated). 205 | * 2. Remove the margin in Firefox and Safari. 206 | 207 | button, input, optgroup, select, textarea 208 | font-family: sans-serif 209 | /* 1 210 | font-size: 100% 211 | /* 1 212 | line-height: 1.15 213 | /* 1 214 | margin: 0 215 | /* 2 216 | 217 | /** 218 | * Show the overflow in IE. 219 | * 1. Show the overflow in Edge. 220 | 221 | button, input 222 | /* 1 223 | overflow: visible 224 | 225 | /** 226 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 227 | * 1. Remove the inheritance of text transform in Firefox. 228 | 229 | button, select 230 | /* 1 231 | text-transform: none 232 | 233 | /** 234 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 235 | * controls in Android 4. 236 | * 2. Correct the inability to style clickable types in iOS and Safari. 237 | 238 | button, html [type="button"], [type="reset"], [type="submit"] 239 | -webkit-appearance: button 240 | /* 2 241 | 242 | /** 243 | * Remove the inner border and padding in Firefox. 244 | 245 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner 246 | border-style: none 247 | padding: 0 248 | 249 | /** 250 | * Restore the focus styles unset by the previous rule. 251 | 252 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring 253 | outline: 1px dotted ButtonText 254 | 255 | /** 256 | * Change the border, margin, and padding in all browsers (opinionated). 257 | 258 | fieldset 259 | border: 1px solid #c0c0c0 260 | margin: 0 2px 261 | padding: 0.35em 0.625em 0.75em 262 | 263 | /** 264 | * 1. Correct the text wrapping in Edge and IE. 265 | * 2. Correct the color inheritance from `fieldset` elements in IE. 266 | * 3. Remove the padding so developers are not caught out when they zero out 267 | * `fieldset` elements in all browsers. 268 | 269 | legend 270 | box-sizing: border-box 271 | /* 1 272 | color: inherit 273 | /* 2 274 | display: table 275 | /* 1 276 | max-width: 100% 277 | /* 1 278 | padding: 0 279 | /* 3 280 | white-space: normal 281 | /* 1 282 | 283 | /** 284 | * 1. Add the correct display in IE 9-. 285 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 286 | 287 | progress 288 | display: inline-block 289 | /* 1 290 | vertical-align: baseline 291 | /* 2 292 | 293 | /** 294 | * Remove the default vertical scrollbar in IE. 295 | 296 | textarea 297 | overflow: auto 298 | 299 | /** 300 | * 1. Add the correct box sizing in IE 10-. 301 | * 2. Remove the padding in IE 10-. 302 | 303 | [type="checkbox"], [type="radio"] 304 | box-sizing: border-box 305 | /* 1 306 | padding: 0 307 | /* 2 308 | 309 | /** 310 | * Correct the cursor style of increment and decrement buttons in Chrome. 311 | 312 | [type="number"] 313 | &::-webkit-inner-spin-button, &::-webkit-outer-spin-button 314 | height: auto 315 | 316 | /** 317 | * 1. Correct the odd appearance in Chrome and Safari. 318 | * 2. Correct the outline style in Safari. 319 | 320 | [type="search"] 321 | -webkit-appearance: textfield 322 | /* 1 323 | outline-offset: -2px 324 | /* 2 325 | &::-webkit-search-cancel-button, &::-webkit-search-decoration 326 | -webkit-appearance: none 327 | 328 | /** 329 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 330 | 331 | /** 332 | * 1. Correct the inability to style clickable types in iOS and Safari. 333 | * 2. Change font properties to `inherit` in Safari. 334 | 335 | \::-webkit-file-upload-button 336 | -webkit-appearance: button 337 | /* 1 338 | font: inherit 339 | /* 2 340 | 341 | /* Interactive 342 | * ========================================================================== 343 | 344 | /* 345 | * Add the correct display in IE 9-. 346 | * 1. Add the correct display in Edge, IE, and Firefox. 347 | 348 | details, menu 349 | display: block 350 | 351 | /* 352 | * Add the correct display in all browsers. 353 | 354 | summary 355 | display: list-item 356 | 357 | /* Scripting 358 | * ========================================================================== 359 | 360 | /** 361 | * Add the correct display in IE 9-. 362 | 363 | canvas 364 | display: inline-block 365 | 366 | /** 367 | * Add the correct display in IE. 368 | 369 | template, [hidden] 370 | display: none 371 | 372 | /* Hidden 373 | * ========================================================================== 374 | 375 | /** 376 | * Add the correct display in IE 10-. 377 | -------------------------------------------------------------------------------- /src/sass/_radiocheck.sass: -------------------------------------------------------------------------------- 1 | .canvas 2 | input[type="checkbox"], 3 | input[type="radio"] 4 | display: none 5 | 6 | + label 7 | font: 18px bold 8 | color: #444 9 | cursor: pointer 10 | user-select: none 11 | 12 | &:before 13 | content: "" 14 | display: inline-block 15 | height: 18px 16 | width: 18px 17 | margin: 0 5px 0 0 18 | background-image: url(http://uniformjs.com/images/sprite.png) 19 | background-repeat: no-repeat 20 | 21 | input[type="checkbox"] + label:before 22 | background-position: -38px -260px 23 | 24 | input[type="radio"] + label:before 25 | background-position: 0px -279px 26 | 27 | input[type="checkbox"]:checked + label:before 28 | background-position: -114px -260px 29 | 30 | input[type="radio"]:checked + label:before 31 | background-position: -108px -279px 32 | 33 | input[type="checkbox"]:disabled + label:before 34 | background-position: -152px -260px 35 | 36 | input[type="checkbox"]:checked:disabled + label:before 37 | background-position: -171px -260px 38 | 39 | input[type="radio"]:disabled + label:before 40 | background-position: -144px -279px 41 | 42 | input[type="radio"]:checked:disabled + label:before 43 | background-position: -162px -279px 44 | 45 | // 63 | // 77 | -------------------------------------------------------------------------------- /src/sass/_scroll.sass: -------------------------------------------------------------------------------- 1 | // http://manos.malihu.gr/jquery-custom-content-scroller/ 2 | .mCS-dark.mCSB_scrollTools 3 | .mCSB_draggerRail 4 | background-color: #000 5 | background-color: rgba(0, 0, 0, 0.15) 6 | 7 | .mCSB_dragger 8 | .mCSB_dragger_bar 9 | background-color: #000 10 | background-color: rgba(0, 0, 0, 0.75) 11 | 12 | &:hover .mCSB_dragger_bar 13 | background-color: rgba(0, 0, 0, 0.85) 14 | 15 | &:active .mCSB_dragger_bar, &.mCSB_dragger_onDrag .mCSB_dragger_bar 16 | background-color: rgba(0, 0, 0, 0.9) 17 | -------------------------------------------------------------------------------- /src/sass/_select.sass: -------------------------------------------------------------------------------- 1 | // http://adam.co/lab/jquery/customselect/ 2 | //.customSelect 3 | //.customSelect.customSelectHover 4 | //.customSelect.customSelectOpen 5 | //.customSelect.customSelectFocus 6 | //.customSelectInner 7 | -------------------------------------------------------------------------------- /src/sass/_variables.sass: -------------------------------------------------------------------------------- 1 | // layout 2 | $layout-min-width: 960px 3 | $layout-max-width: 1920px 4 | $header-height: 150px 5 | $footer-height: 100px 6 | 7 | // colors 8 | $select-text-color: white 9 | $select-text-bg: black 10 | 11 | $mainFont: 'PT Sans', sans-serif 12 | -------------------------------------------------------------------------------- /src/sass/main.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | @import normalize 3 | @import helpers 4 | @import fonts 5 | @import layout 6 | @import content 7 | @import buttons 8 | @import forms 9 | //@import radiocheck 10 | //@import select 11 | //@import scroll 12 | --------------------------------------------------------------------------------