├── .gitignore ├── .jshintignore ├── License.md ├── bower.json ├── build ├── .gitignore ├── css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── style.css │ ├── style.min.css │ └── style.min.css.map ├── google4a51dca99c60ef07.html ├── humans.txt ├── img │ ├── images │ │ ├── favicon │ │ │ ├── android-icon-144x144.png │ │ │ ├── android-icon-192x192.png │ │ │ ├── android-icon-36x36.png │ │ │ ├── android-icon-48x48.png │ │ │ ├── android-icon-72x72.png │ │ │ ├── android-icon-96x96.png │ │ │ ├── apple-icon-114x114.png │ │ │ ├── apple-icon-120x120.png │ │ │ ├── apple-icon-144x144.png │ │ │ ├── apple-icon-152x152.png │ │ │ ├── apple-icon-180x180.png │ │ │ ├── apple-icon-57x57.png │ │ │ ├── apple-icon-60x60.png │ │ │ ├── apple-icon-72x72.png │ │ │ ├── apple-icon-76x76.png │ │ │ ├── apple-icon-precomposed.png │ │ │ ├── apple-icon.png │ │ │ ├── browserconfig.xml │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── favicon-96x96.png │ │ │ ├── favicon.ico │ │ │ ├── manifest.json │ │ │ ├── ms-icon-144x144.png │ │ │ ├── ms-icon-150x150.png │ │ │ ├── ms-icon-310x310.png │ │ │ └── ms-icon-70x70.png │ │ └── html5-2x.png │ ├── sprites │ │ ├── png │ │ │ ├── png-sprite-2x.png │ │ │ └── png-sprite.png │ │ └── svg │ │ │ ├── svg-sprite.png │ │ │ └── svg-sprite.svg │ └── svg │ │ └── html5.svg ├── index.html └── js │ ├── main.js │ ├── main.min.js │ └── main.min.js.map ├── design └── .gitignore ├── gulpfile.js ├── package.json ├── readme.md └── src ├── google4a51dca99c60ef07.html ├── html-blocks ├── .gitignore ├── common │ ├── .gitignore │ ├── head.html │ ├── if-ie.html │ └── modals │ │ └── .gitignore ├── pages--external │ ├── .gitignore │ ├── concept.html │ ├── concepts-tabs.html │ ├── disqus.html │ ├── footer--external.html │ ├── gulp-tasks.html │ ├── header--external.html │ ├── html-concept.html │ ├── img-svg-optimisation.html │ ├── js-concept.html │ ├── lead-block.html │ ├── less-concept.html │ ├── livereload.html │ ├── png-sprite.html │ ├── requires-and-install.html │ ├── svg-sprite.html │ └── utils.html └── pages--internal │ └── .gitignore ├── humans.txt ├── img ├── .gitignore ├── images │ ├── .gitignore │ ├── favicon │ │ ├── android-icon-144x144.png │ │ ├── android-icon-192x192.png │ │ ├── android-icon-36x36.png │ │ ├── android-icon-48x48.png │ │ ├── android-icon-72x72.png │ │ ├── android-icon-96x96.png │ │ ├── apple-icon-114x114.png │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-144x144.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-180x180.png │ │ ├── apple-icon-57x57.png │ │ ├── apple-icon-60x60.png │ │ ├── apple-icon-72x72.png │ │ ├── apple-icon-76x76.png │ │ ├── apple-icon-precomposed.png │ │ ├── apple-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── favicon.ico │ │ ├── manifest.json │ │ ├── ms-icon-144x144.png │ │ ├── ms-icon-150x150.png │ │ ├── ms-icon-310x310.png │ │ └── ms-icon-70x70.png │ └── html5-2x.png ├── sprites │ ├── png │ │ ├── .gitignore │ │ ├── html5-2x.png │ │ └── html5.png │ └── svg │ │ ├── .gitignore │ │ └── html5.svg └── svg │ ├── .gitignore │ └── html5.svg ├── index.html ├── js ├── .gitignore ├── common │ ├── .gitignore │ ├── google-analytics.js │ └── material-init.js ├── custom.js ├── pages--external │ └── .gitignore ├── pages--internal │ └── .gitignore └── vendor.js └── styles ├── .gitignore ├── common ├── .gitignore ├── _png-sprite.less ├── _svg-sprite-less.tpl ├── _svg-sprite-sass.tpl ├── _svg-sprite.less ├── _variables.less ├── google-prettify.less ├── icons.less ├── my-bootstrap-custom.less └── svg-icons.less ├── fonts ├── .gitignore ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf ├── fontawesome-webfont.woff └── fontawesome-webfont.woff2 ├── pages--external └── .gitignore ├── pages--internal └── .gitignore └── style.less /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Windows template 3 | # Windows image file caches 4 | Thumbs.db 5 | ehthumbs.db 6 | 7 | # Folder config file 8 | Desktop.ini 9 | 10 | # Recycle Bin used on file shares 11 | $RECYCLE.BIN/ 12 | 13 | # Windows Installer files 14 | *.cab 15 | *.msi 16 | *.msm 17 | *.msp 18 | 19 | # Windows shortcuts 20 | *.lnk 21 | 22 | 23 | ### NetBeans template 24 | nbproject/private/ 25 | nbbuild/ 26 | dist/ 27 | nbdist/ 28 | nbactions.xml 29 | nb-configuration.xml 30 | .nb-gradle/ 31 | 32 | 33 | ### OSX template 34 | .DS_Store 35 | .AppleDouble 36 | .LSOverride 37 | 38 | # Icon must end with two \r 39 | Icon 40 | 41 | # Thumbnails 42 | ._* 43 | 44 | # Files that might appear in the root of a volume 45 | .DocumentRevisions-V100 46 | .fseventsd 47 | .Spotlight-V100 48 | .TemporaryItems 49 | .Trashes 50 | .VolumeIcon.icns 51 | 52 | # Directories potentially created on remote AFP share 53 | .AppleDB 54 | .AppleDesktop 55 | Network Trash Folder 56 | Temporary Items 57 | .apdisk 58 | 59 | 60 | ### Linux template 61 | *~ 62 | 63 | # KDE directory preferences 64 | .directory 65 | 66 | # Linux trash folder which might appear on any partition or disk 67 | .Trash-* 68 | 69 | 70 | ### SublimeText template 71 | # cache files for sublime text 72 | *.tmlanguage.cache 73 | *.tmPreferences.cache 74 | *.stTheme.cache 75 | 76 | # workspace files are user-specific 77 | *.sublime-workspace 78 | 79 | # project files should be checked into the repository, unless a significant 80 | # proportion of contributors will probably not be using SublimeText 81 | # *.sublime-project 82 | 83 | # sftp configuration file 84 | sftp-config.json 85 | 86 | 87 | ### JetBrains template 88 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm 89 | 90 | *.iml 91 | 92 | ## Directory-based project format: 93 | .idea/ 94 | # if you remove the above rule, at least ignore the following: 95 | 96 | # User-specific stuff: 97 | # .idea/workspace.xml 98 | # .idea/tasks.xml 99 | # .idea/dictionaries 100 | 101 | # Sensitive or high-churn files: 102 | # .idea/dataSources.ids 103 | # .idea/dataSources.xml 104 | # .idea/sqlDataSources.xml 105 | # .idea/dynamic.xml 106 | # .idea/uiDesigner.xml 107 | 108 | # Gradle: 109 | # .idea/gradle.xml 110 | # .idea/libraries 111 | 112 | # Mongo Explorer plugin: 113 | # .idea/mongoSettings.xml 114 | 115 | ## File-based project format: 116 | *.ipr 117 | *.iws 118 | 119 | ## Plugin-specific files: 120 | 121 | # IntelliJ 122 | /out/ 123 | 124 | # mpeltonen/sbt-idea plugin 125 | .idea_modules/ 126 | 127 | # JIRA plugin 128 | atlassian-ide-plugin.xml 129 | 130 | # Crashlytics plugin (for Android Studio and IntelliJ) 131 | com_crashlytics_export_strings.xml 132 | crashlytics.properties 133 | crashlytics-build.properties 134 | 135 | 136 | ### TortoiseGit template 137 | # Project-level settings 138 | /.tgitconfig 139 | 140 | 141 | ### Store folders structure 142 | node_modules/ 143 | bower_components/ 144 | build/html-blocks 145 | .publish/html-blocks 146 | design/* 147 | !design/.gitignore 148 | build/humans.txt -------------------------------------------------------------------------------- /.jshintignore: -------------------------------------------------------------------------------- 1 | bower_components/* 2 | build/* -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | # The MIT License 2 | 3 | Copyright © 2015 Igor Timohin, http://igor-timohin.ru/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | --- 12 | 13 | # Лицензия MIT 14 | 15 | Copyright © 2010–2014 Вадим Макеев, http://pepelsbey.net/ 16 | 17 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: 18 | 19 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. 20 | 21 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-frontend", 3 | "version": "0.0.1", 4 | "authors": [ 5 | "Igor [Enkil] Timohin " 6 | ], 7 | "description": "Front-End template", 8 | "homepage": "", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ], 16 | "devDependencies": { 17 | "bootstrap": "~3.3.4", 18 | "bootstrap-material-design": "~0.3.0", 19 | "css_browser_selector": "rafaelp/css_browser_selector", 20 | "font-awesome": "~4.3.0", 21 | "modernizr": "~2.8.3", 22 | "social-likes": "~3.0.14" 23 | }, 24 | "dependencies": {} 25 | } 26 | -------------------------------------------------------------------------------- /build/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /build/css/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/css/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /build/css/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/css/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /build/css/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/css/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /build/css/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/css/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /build/css/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/css/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /build/google4a51dca99c60ef07.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google4a51dca99c60ef07.html -------------------------------------------------------------------------------- /build/humans.txt: -------------------------------------------------------------------------------- 1 | /* TEAM */ 2 | Developer: Igor Timohin 3 | Site: igor-timohin.ru 4 | Contact: timohin.i [at] gmail.com 5 | Twitter: @Igor_Timokhin 6 | From: Saint-Petersburg, Russia 7 | Location: Saint-Petersburg, Russia 8 | 9 | /* THANKS */ 10 | 11 | School: http://epixx.ru 12 | 13 | /* SITE */ 14 | Language: Russian 15 | Doctype:HTML5 16 | Standards: HTML5, CSS3 17 | Components: Modernizr, jQuery, Bootstrap, Bootstrap Material Design, etc. 18 | IDE: PhpShtorm, Gulp, Git, GitHub Pages 19 | Software: Software used for the development -------------------------------------------------------------------------------- /build/img/images/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /build/img/images/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /build/img/images/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /build/img/images/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /build/img/images/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /build/img/images/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /build/img/images/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/apple-icon.png -------------------------------------------------------------------------------- /build/img/images/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /build/img/images/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /build/img/images/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /build/img/images/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /build/img/images/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/favicon.ico -------------------------------------------------------------------------------- /build/img/images/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Front-End Projects start template", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /build/img/images/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /build/img/images/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /build/img/images/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /build/img/images/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /build/img/images/html5-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/images/html5-2x.png -------------------------------------------------------------------------------- /build/img/sprites/png/png-sprite-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/sprites/png/png-sprite-2x.png -------------------------------------------------------------------------------- /build/img/sprites/png/png-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/sprites/png/png-sprite.png -------------------------------------------------------------------------------- /build/img/sprites/svg/svg-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/build/img/sprites/svg/svg-sprite.png -------------------------------------------------------------------------------- /build/img/sprites/svg/svg-sprite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /build/img/svg/html5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gulp Awesome - front-end scaffolding boilerplate 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 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 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 80 | 81 |
82 |
83 | 84 |
85 | 90 | 91 | 92 | Gulp Awesome 93 | 94 |
95 | 96 |
97 |
    98 |
  • Fork
    • 99 |
  • Watch
    • 100 |
  • Star
    • 101 |
  • Download
    • 102 | 103 |
  • 104 | 110 |
    • 111 |
112 | 113 | 125 | 126 |
127 | 128 |
129 |
130 | 131 |
132 | 133 |
134 |
135 | 136 |
137 |

Gulp Awesome

138 |

Scaffolding boilerplate

139 |

Front-End Projects starts here.

140 |

Write on your way, Gulp will make all the routine things

141 |

142 | Learn more 143 | See on GitHub 144 |

145 |
146 | 147 |
148 |
149 |

Шаблон Front-End проектов. Общая концепция

150 |
151 |
152 |

153 | Репозиторий, служащий шаблоном для начала работ над Front-End проектами
154 | Компиляция и сборка осуществляется с помощью Gulp 155 |

156 |
    157 |
  • src/ - каталог для размещения рабочих файлов (html-шаблоны, less-файлы, файлы и библиотки js, изображения для сборки в спрайты и т.д.)
    • 158 |
  • build/ - каталог для размещения скомпилированной верстки
    • 159 |
  • design/ - каталог для локального хранения файлов макета. Содержимое не отслеживается в Git и не будет в последствии залито в репозиторий
    • 160 |
161 |

162 | Вся работа осуществляется в каталоге src/. В каталоге build/ никакие изменения напрямую в файлы не вносятся. Back-End разработчикам и/или Заказчиками передается содержимое каталога build/ или предоставляется доступ к репозиторию проекта. 163 |

164 |
165 |
166 | 167 | 179 | 180 |
181 |
182 |
183 |
184 |

Требования к установке

185 |

186 | Для корректной работы шаблона в системе должны быть глобально установлены bower и nodejs (вместе с npm)
187 | Установка Nodejs 188 |
189 | Установка Bower 190 |

191 | 192 |

193 |

Установка шаблона

194 | 195 | 
196 |                 $ git clone https://github.com/Enkil/template-frontend.git app-name
197 |                 $ cd app-name
198 |                 $ npm i -d
199 |                 $ bower install
200 | 201 | По окончанию выполнения будут установлены все необходимые пакеты и их зависимости.
202 | По умолчанию в шаблоне устанавливается и подключается Bootstrap 3, Bootstrap Material Design, Font-Awesome, Modernizr, social-likes. Однако, шаблон не накладывает никаких ограничений и не навязывает использование определенных фреймворков - с помощью bower можно установить/удалить нужные пакеты. 203 |

204 |
205 |
206 |
207 |
208 |
209 |
210 |

Задачи Gulp

211 | После установки шаблона можно приступать к работе над проектом. 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 |
#ЗадачаКраткое описание
1$ gulp htmlсборка HTML проекта с использованием простейшией шаблонизации.
2$ gulp jsсборка JavaScript проекта.
3$ gulp lessкомпилиция Less
4$ gulp imagesоптимизация изображений
5$ gulp svgоптимизация SVG
6$ gulp png-spriteсоздание PNG-спрайта
7$ gulp svg-spriteсоздание SVG-спрайта
8$ gulp fontsкопирование файлов шрифтов
9$ gulp cleanочистка каталога build/
10gulp svg-spriteсоздание SVG-спрайта
11$ gulp webserverзапуск локального веб-сервера для livereload и синхронного тестирования в разных браузерах
12$ gulp gh-pagesразмещение скомпилированного проекта на Github Pages
13$ gulp watchзапуск задачи webserver и отслеживания изменений
14$ gulp defaultзапуск задачи watch
293 |
294 |
295 |
296 |
297 |
298 |
299 |

HTML-разметка

300 |

Задача $ gulp html

301 |

302 | Страницы, которые необходимо сверстать размещаются в корне каталога src/ (пример index.html) 303 | Файлы html повторяющихся блоков (например, общий header, footer, модальные окна и т.д.) размещаются в каталоге src/html-blocks/ : 304 |

305 |
    306 |
  • src/html-blocks/common - файлы html-блоков, использующиеся на всех страницах сайта
    • 307 |
  • src/html-blocks/common/modals - файлы html модальных окон, использующихся на всех страницах сайта
    • 308 |
  • src/html-blocks/pages--external - файлы html-блоков, внешних страниц сайта (страниц, доступных любому пользователю без авторизации на сайте)
    • 309 |
  • src/html-blocks/pages--internal - файлы html-блоков, внутренних страниц сайта (страниц, доступных залогиненному пользователю - например, страницы раздела "Личный кабинет")
    • 310 |
311 |

312 | При необходимости внутри данных каталогов можно вводить дополнительную структуру, при этом сборка html пройдет корректно. 313 |

314 |

315 | Для указания того содержимое какого файла необходимо вставить используется конструкция вида 316 | 

317 | <!--build:include html-blocks/pages--external/file-name.html-->
318 | This will be replaced by the content of html-blocks/pages--external/file-name.html
319 | <!--/build-->
320 | - содержимое файла file-name.html будет вставлено на место данного блока.
321 |

322 |

323 | Допускается использование вложенности, то есть в одном файле, содержащим код html-разметки блока, можно вызвать содержимое другого файла с блоком разметки. 324 | При этом необходимо учитывать правильное написание пути к файлу.
325 | Например,
326 | В файле src/html-blocks/pages-external/header--external.html мы хотим вызвать содержимое файла src/html-blocks/common/modals/login.html 327 | В таком случае вызов пишеться так 328 | 329 | 

330 | <!--build:include ../common/modals/login.html-->
331 | This will be replaced by the content of ../common/modals/login.html
332 | <!--/build-->
333 |

334 |
335 |
336 |
337 |
338 |
339 |
340 |

Компиляция Less

341 |

Задача $ gulp less

342 |

343 | Файл src/styles/styles.less является диспетчером подключений для всех прочих less-файлов.
344 | Секция Third party предназначена для подключения less/css файлов сторонних библиотек и фреймворков.
345 | Секция Custom - для подключения собственных файлов стилей.
346 |

347 | 348 |

349 | При компиляции происходит объединение всех файлов, компиляция в CSS, форматирование стиля кодирования, добавление вендорных префиксов, минификация и запись sourcemaps. Итоговые файлы стилевых таблиц помещаются в каталог build/css (style.css, style.min.css, style.min.css.map) 350 |

351 |

352 | Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками. 353 |

354 |
355 |
356 |
357 |
358 |
359 |
360 |

Компиляция JavaScript

361 |

Задача $ gulp js

362 |

363 | Файл src/js/vendor.js является диспетчером подключений js файлов сторонних библиотек и фреймворков. 364 | Файл src/js/custom.js является диспетчером подключений собственных js файлов. 365 |

366 | 367 |

368 | При компиляции происходит объединение всех файлов, проверка на наличие ошибок (при этом исключаются из проверки файлы сторонних библиотек и проверяются только те, что написаны нами), минификация и запись sourcemaps. Итоговый файл помещается в каталог build/js (main.js, main.min.js, main.min.js.map) 369 |

370 |

371 | Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками. 372 |

373 |
374 |
375 |
376 |
377 |
378 |
379 |

Оптимизация изображений

380 |

Задача $ gulp images

381 | 382 |

383 | Все контентные изображения, а также любые изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог src/img/images. 384 |
385 |
386 | При выполнении задачи все изображения из этого каталога оптимизируются.
387 | Итоговые файлы помещаются в каталог build/img/images/. 388 |

389 | 390 |

Оптимизация SVG

391 |

Задача $ gulp svg

392 | 393 |

394 | Все SVG изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог src/img/svg. 395 |
396 | При выполнении задачи все SVG из этого каталога оптимизируются.
397 | Итоговые файлы помещаются в каталог build/img/svg/
398 |

399 |
400 |
401 |
402 |
403 |
404 |
405 |

Создание PNG-спрайта

406 |

Задача $ gulp png-sprite

407 | 408 |

409 | Все изображения, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог src/img/sprites/png. 410 |
411 | Итоговый спрайт будет оптимизирован и помещен в каталог build/img/sprites/png/png-sprite.png. 412 |
413 | Также будет создан или дополнен файл src/styles/common/_png-sprite.less, содержащий примеси (mixins) для вызова изображений спрайта. 414 |
415 | Имя примеси (mixin) всегда выглядит как @sprite-filename, где filename - имя изображения, добавленного к спрайту. 416 |

417 | 418 |

Пример работы с спрайтом и его стилями.

419 | 420 |
    421 |
  • Размещаем png-изображение иконки в каталоге src/img/sprites/png/html5.png
    • 422 |
  • Запускаем задачу $ gulp png-sprite
    • 423 |
  • Создаем файл src/styles/common/icons.less
    • 424 |
  • 425 | В нем создаем следующие CSS-классы: 426 | 
    .png-sprite{
427 |             &:before{
428 |                 content: '';
429 |                 display: inline-block;
430 |             }
431 | 
432 |             &--html5:before{
433 |                 .sprite(@sprite-html5);
434 |             }
435 |         }
    436 |
    • 437 |
  • Файл src/styles/common/icons.less подключаем в src/styles/style.less с помощью конструкции @import (@import "common/icons.less";)
    • 438 |
  • 439 | После компиляции less (запускаем задачу $ gulp less)получаем следующий CSS код 440 | 
    441 |         .png-sprite:before{
442 |             display: inline-block;
443 |             content: '';
444 |         }
445 | 
446 |         .png-sprite--html5:before{
447 |             width: 24px;
448 |             height: 24px;
449 |             background-image: url(../img/sprites/png/png-sprite.png);
450 |             background-position: 0 0;
451 |         }
    452 |
    • 453 |
  • html-тегу, около которого надо разместить иконку, добавляем CSS-классы png-sprite png-sprite--html5
    • 454 |
455 | 456 |

Пример: Test PNG sprite

457 | 458 |

459 | Работа с спрайтом в таком случае сводится к добавлению нужных изображений в каталог src/img/sprites/png 460 |
461 | и созданию CSS-класса, в котором вызывается примесь (mixin), созданная при генерации спрайта.
462 | Вы можете использовать примеси (mixins) и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before 463 |

464 | 465 |

466 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо 467 |

    468 |
  • добавить в каталог src/img/sprites/png изображение (html5.png)
    • 469 |
  • запустить задачу $ gulp png-sprite
    • 470 |
471 |

472 | 473 |

Создание Retina-ready PNG-спрайта

474 | 475 |

476 | Для создания PNG-спрайта адаптированного под Retina-экраны и экраны повышенной плотности, необходимо в каталог 477 | src/img/sprites/png поместить файл изображения вдвое большего размера, чем он должен отображаться. Имя файла обязательно 478 | должно содержать постфикс -2x (filename-2x.png).
479 | Обязательным условием для корректной работы является наличие двух файлов изображений для одной иконки (например, html5.png и html5-2x.png). 480 |
481 | В результате генерации спрайта создается спрайт build/img/sprites/png-sprite-2x.png и переменная вида @sprite-filename-group, 482 | (например, @sprite-html5-group).
483 | Для вызова данной переменной (mixin) необходимо использовать примесь (mixin) .retina-sprite() 484 | Например, .retina-sprite(@sprite-html5-group). 485 |

486 | 487 |

488 | Пример файла icons.less:
489 | 

.png-sprite{
490 |               &:before{
491 |                 content: '';
492 |                 display: inline-block;
493 |               }
494 | 
495 |               &--html5:before{
496 |                 .sprite(@sprite-html5);
497 |               }
498 | 
499 |               &--html5-retina:before{
500 |                 .retina-sprite(@sprite-html5-group)
501 |               }
502 |             }
503 |

504 | 505 |

506 | Пример использования в разметке: Test Retina-ready PNG sprite 507 |

508 | 509 |

510 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода Retina изображений необходимо 511 |

    512 |
  • добавить в каталог src/img/sprites/png два изображения - обычное и вдвое большее, отличающиеся в названии постфиксом -2x (html5.png, html5-2x.png)
    • 513 |
  • запустить задачу $ gulp png-sprite
    • 514 |
515 |

516 | 517 |
518 |
519 |
520 |
521 |
522 |
523 |

Создание SVG-спрайта

524 |

Задача $ gulp svg-sprite

525 | 526 |

527 | Все SVG, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог src/img/sprites/svg. 528 |
529 | Итоговый спрайт будет оптимизирован и помещен в каталог build/img/sprites/svg/svg-sprite.svg. 530 |
531 | Также будет создан или дополнен файл src/styles/common/_svg-sprite.less, содержащий CSS-классы для вызова изображений спрайта. 532 |
533 | Имя CSS-класса всегда выглядит как @svg-sprite-filename, где filename - имя изображения, добавленного к спрайту. 534 |

535 | 536 |

Пример работы с SVG-спрайтом и его стилями.

537 | 538 |
    539 |
  • Размещаем svg-изображение иконки в каталоге src/img/sprites/svg/html5.svg
    • 540 |
  • Запускаем задачу $ gulp svg-sprite
    • 541 |
  • Создаем файл src/styles/common/svg-icons.less
    • 542 |
  • 543 | В нем создаем следующие CSS-классы: 544 | 
    .svg-sprite{
545 |                   &:before{
546 |                     content: '';
547 |                     display: inline-block;
548 |                     width: 32px!important;
549 |                     height: 32px!important;
550 |                     background-size: contain!important;
551 |                   }
552 | 
553 |                   &--html5-icon:before{
554 |                     .svg-sprite--html5(); // CSS-класс, созданный при генерации SVG-спрайта.
555 |                   }
556 | 
557 |                 }
    558 |
    • 559 |
  • Файл src/styles/common/svg-icons.less подключаем в src/styles/style.less с помощью конструкции @import (@import "common/svg-icons.less";)
    • 560 |
  • 561 | После компиляции less (запускаем задачу $ gulp less)получаем следующий CSS код 562 | 
    .svg-sprite--html5
563 |                     {
564 |                         width: 47px;
565 |                         height: 47px;
566 | 
567 |                         background-image: url('../img/sprites/svg/svg-sprite.svg');
568 |                         background-repeat: no-repeat;
569 |                         background-position: 0 0;
570 |                         background-size: 47px 47px;
571 |                     }
572 |                     .no-svg .svg-sprite--html5
573 |                     {
574 |                         background-image: url('../img/sprites/svg/svg-sprite.png');
575 |                     }
576 | 
577 | 
578 |                     .svg-sprite:before
579 |                     {
580 |                         display: inline-block;
581 | 
582 |                         width: 32px!important;
583 |                         height: 32px!important;
584 | 
585 |                         content: '';
586 | 
587 |                         background-size: contain!important;
588 |                     }
589 |                     .svg-sprite--html5-icon:before
590 |                     {
591 |                         width: 47px;
592 |                         height: 47px;
593 | 
594 |                         background-image: url('../img/sprites/svg/svg-sprite.svg');
595 |                         background-repeat: no-repeat;
596 |                         background-position: 0 0;
597 |                         background-size: 47px 47px;
598 |                     }
599 |                     .no-svg .svg-sprite--html5-icon:before
600 |                     {
601 |                         background-image: url('../img/sprites/svg/svg-sprite.png');
602 |                     }
    603 |
    • 604 |
  • html-тегу, около которого надо разместить иконку, добавляем CSS-классы svg-sprite svg-sprite--html5-icon
    • 605 |
606 | 607 |

Пример: Test PNG sprite

608 | 609 |

610 | Работа с SVG-спрайтом в таком случае сводится к добавлению нужных SVG в каталог src/img/sprites/svg 611 |
612 | и созданию CSS-класса, в котором вызывается в качестве примеси (mixin) CSS-класс, созданный при генерации спрайта.
613 | Вы можете использовать CSS-классы и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before 614 |

615 | 616 |

617 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо 618 |

    619 |
  • добавить в каталог src/img/sprites/svg изображение (html5.png)
    • 620 |
  • запустить задачу $ gulp svg-sprite
    • 621 |
622 |

623 | 624 |
625 |
626 |
627 |
628 |
629 |
630 |

Livereload и синхронизация между браузерами

631 |

Задача $ gulp webserver

632 | 633 |

634 | При выполнении задчи запускается локальный веб-сервер BrowserSync и открыватся index.html проекта.
635 | Подробнее о BrowserSync 636 |

637 | 638 |

639 | Сервер использует каталог build/ в качестве корня проекта.
640 | При запуске формируются следующие данные: 641 | 642 | 

643 | [App Front-End] Access URLs:
644 |  ----------------------------------------------
645 |        Local: http://localhost:9000 // локальный URL проекта
646 |     External: http://192.168.0.100:9000 // внешний (в пределах локальной сети) URL проекта (по нему можно открыть на других устройствах в той же сети)
647 |       Tunnel: https://iuvrvzmmli.localtunnel.me // Туннель - защищенный уникальный URL, можно дать человеку на другом конце мира и он также будет видеть все обновления в реальном времени
648 |  ----------------------------------------------
649 |           UI: http://localhost:3001 // локальный URL WebUI BrowserSync
650 |  UI External: http://192.168.0.100:3001 // внешний (в пределах сети) URL WebUI BrowserSync
651 |  ----------------------------------------------
652 | [App Front-End] Serving files from: ./build // корень проекта для BrowserSync
653 |
654 |

655 |
656 |
657 |
658 |
659 |
660 |
661 |

Обработка шрифтов

662 |

Задача $ gulp fonts

663 |

664 | Файлы используемых шрифтов необходимо размещать в каталоге src/styles/fonts. 665 |
666 | При обработке шрифты будут скопированы в каталог build/css/fonts.
667 | Важно корректно прописать к ним пути в файле Less, описывающим типографику. 668 |

669 | 670 |

Очистка каталога сборки

671 |

Задача $ gulp clean

672 |

673 | При выполнении задачи полностью удаляется содержимое каталога build/ за исключением файла build/.gitignore 674 |

675 | 676 |

Публикация на Github Pages

677 |

Задача $ gulp gh-pages

678 |

679 | При запуске задачи будет создана ветка gh-pages и в нее залито текущее состояние каталога build/. 680 |

681 | 682 |

Полная сборка проекта

683 |

Задача $ gulp build

684 |

685 | При запуске задачи последовательно выполняются задачи clean, html, js, less, images, png-sprite, svg-sprite, svg, fonts, gh-pages. 686 |
687 | В итоге выполнения в каталоге build/ формируется полная сборка проекта с нуля. 688 |

689 | 690 |

Отслеживание изменений

691 |

Задача $ gulp watch

692 |

693 | При запуске сначала выполняется задача $ gulp webserver, затем при изменении или добавлении в каталоге src/ каких 694 | либо файлов, автоматически запускается соответсвующая задача по их обработке. 695 |

696 | 697 |

Настройки шаблона

698 |

699 | В файле gulpfile.js в секции Settings в разделе Path settings задаются 700 | пути к каталогам размещения обработанных файлов (итогов сборки), исходных файлов и путей для отслеживания изменений. 701 |
702 | Рекомендуется изменять пути и целевые файлы только через этот раздел, при необходимости его дополняя новыми переменными. 703 |

704 | 705 |
706 |
707 |
708 |
709 | 710 |
711 | 722 | 723 | 724 |
725 |
726 | 727 |
728 | 729 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | -------------------------------------------------------------------------------- /design/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /************/ 4 | /* Settings */ 5 | /************/ 6 | 7 | /* Gulp plugins */ 8 | var gulp = require('gulp'), // Task runner 9 | watch = require('gulp-watch'), // Watch, that actually is an endless stream 10 | rename = require("gulp-rename"), // Rename files 11 | del = require('del'), // Delete something 12 | rigger = require('gulp-rigger'), // // Include content of one file to another 13 | size = require('gulp-size'), // Display the size of something 14 | path = require('path'), 15 | processhtml = require('gulp-processhtml'), // Plugin uses Denis Ciccale's node-htmlprocessor to process/transform html files 16 | concat = require('gulp-concat'), // Concatenates files 17 | streamqueue = require('streamqueue'), // Pipe queued streams progressively, keeping datas order. 18 | sourcemaps = require('gulp-sourcemaps'), // Write source maps 19 | less = require('gulp-less'), // Compile Less to CSS 20 | lessReporter = require('gulp-less-reporter'), // Error reporter for gulp-less 21 | autoprefixer = require('gulp-autoprefixer'), // Prefix CSS 22 | csscomb = require('gulp-csscomb'), // Coding style formatter for CSS 23 | minifycss = require('gulp-minify-css'), // Minify CSS 24 | uglify = require('gulp-uglify'), // Minify JS 25 | jshint = require('gulp-jshint'), // JS code linter 26 | stylish = require('jshint-stylish'), // Reporter for JSHint 27 | imagemin = require('gulp-imagemin'), // Optimize images 28 | pngquant = require('imagemin-pngquant'), // PNG plugin for ImageMin 29 | spritesmith = require('gulp.spritesmith'), // Convert a set of images into a spritesheet and CSS variables 30 | svg2png = require('gulp-svg2png'), // Convert SVGs to PNGs 31 | svgmin = require('gulp-svgmin'), // Minify SVG with SVGO 32 | svgspritesheet = require('gulp-svg-spritesheet'), // Convert a set of SVGs into a spritesheet and CSS variables 33 | browserSync = require("browser-sync"), // Synchronised browser testing 34 | reload = browserSync.reload, 35 | ghPages = require('gulp-gh-pages'), // Publish contents to Github pages 36 | runSequence = require('run-sequence').use(gulp); // Run a series of dependent gulp tasks in order 37 | 38 | /* Path settings */ 39 | var projectPath = { 40 | build: { // Set build paths 41 | html: 'build/', 42 | js: 'build/js/', 43 | jsMainFile: 'main.js', 44 | css: 'build/css/', 45 | img: 'build/img/images/', 46 | svg: 'build/img/svg/', 47 | pngSprite: 'build/img/sprites/png/', 48 | pngSpriteCSS: 'src/styles/common/', 49 | svgSprite: 'build/img/sprites/svg/svg-sprite.svg', 50 | svgSpriteNoSvg: 'build/img/sprites/svg/svg-sprite.png', 51 | svgSpriteCSS: 'src/styles/common/_svg-sprite.less', 52 | fonts: 'build/css/fonts/' 53 | }, 54 | src: { // Set source paths 55 | html: ['src/**/*.html', 'humans.txt'], 56 | jsCustom: 'src/js/custom.js', 57 | jsVendor: 'src/js/vendor.js', 58 | style: 'src/styles/style.less', 59 | img: 'src/img/images/**/*.*', 60 | svg: 'src/img/svg/**/*.svg', 61 | pngSprite: 'src/img/sprites/png/**/*.png', 62 | pngRetinaSprite: 'src/img/sprites/png/**/*-2x.png', 63 | svgSprite: 'src/img/sprites/svg/**/*.svg', 64 | svgSpriteTpl: 'src/styles/common/_svg-sprite-less.tpl', 65 | fonts: 'src/styles/fonts/**/*.*' 66 | }, 67 | watch: { // Set watch paths 68 | html: 'src/**/*.html', 69 | js: 'src/js/**/*.js', 70 | style: 'src/styles/**/*.less', 71 | img: 'src/img/images/**/*.*', 72 | svg: 'src/img/svg/**/*.svg', 73 | pngSprite: 'src/img/sprites/png/**/*.png', 74 | svgSprite: 'src/img/sprites/svg/**/*.svg', 75 | fonts: 'src/styles/fonts/**/*.*' 76 | }, 77 | clean: ['build/**/*', '!build/.gitignore', '!build/humans.txt'], // Set paths and exludes for cleaning build dir 78 | ghPages: 'build/**/*' // Set dir that will be uploaded to GitHub Pages 79 | }; 80 | 81 | /* BrowserSync local web server settings */ 82 | var config = { 83 | server: { 84 | baseDir: "./build" 85 | }, 86 | tunnel: true, 87 | host: 'localhost', 88 | port: 9000, 89 | injectChanges: true, 90 | logPrefix: "App Front-End" 91 | }; 92 | 93 | /*********/ 94 | /* Tasks */ 95 | /*********/ 96 | 97 | /* BrowserSync local web server*/ 98 | gulp.task('webserver', function () { 99 | browserSync(config); 100 | }); 101 | 102 | /* HTML */ 103 | gulp.task('html', function () { 104 | return gulp.src(projectPath.src.html) 105 | .pipe(processhtml({ 106 | recursive: true 107 | })) 108 | .pipe(size({ 109 | title: 'HTML' 110 | })) 111 | .pipe(gulp.dest(projectPath.build.html)) 112 | .pipe(reload({stream: true})); 113 | }); 114 | 115 | /* JavaScript */ 116 | gulp.task('js', function () { 117 | return streamqueue( 118 | { objectMode: true }, 119 | gulp.src(projectPath.src.jsVendor).pipe(rigger()).pipe(size({title: 'Vendor JavaScript'})), 120 | gulp.src(projectPath.src.jsCustom).pipe(rigger()).pipe(jshint()).pipe(jshint.reporter(stylish)).pipe(size({title: 'Custom JavaScript'})) 121 | ) 122 | .pipe(concat(projectPath.build.jsMainFile)) 123 | .pipe(sourcemaps.init()) 124 | .pipe(gulp.dest(projectPath.build.js)) 125 | .pipe(rename({ suffix: '.min' })) 126 | .pipe(uglify()) 127 | .pipe(sourcemaps.write('./')) 128 | .pipe(size({ 129 | title: 'Total JavaScript' 130 | })) 131 | .pipe(gulp.dest(projectPath.build.js)) 132 | .pipe(reload({stream: true})); 133 | }); 134 | 135 | /* Less */ 136 | gulp.task('less', function() { 137 | return gulp.src(projectPath.src.style) 138 | .pipe(sourcemaps.init()) 139 | .pipe(less({ 140 | paths: [ path.join(__dirname, 'less', 'includes') ] 141 | })) 142 | .on('error', lessReporter) 143 | .pipe(autoprefixer('> 2%')) 144 | .pipe(csscomb()) 145 | .pipe(gulp.dest(projectPath.build.css)) 146 | .pipe(rename({ suffix: '.min' })) 147 | .pipe(minifycss()) 148 | .pipe(sourcemaps.write('./')) 149 | .pipe(size({ 150 | title: 'CSS' 151 | })) 152 | .pipe(gulp.dest(projectPath.build.css)) 153 | .pipe(reload({stream: true})); 154 | }); 155 | 156 | /* Images */ 157 | gulp.task('images', function () { 158 | return gulp.src(projectPath.src.img) 159 | .pipe(imagemin({ 160 | progressive: true, 161 | optimizationLevel: 5, 162 | use: [pngquant()], 163 | interlaced: true 164 | })) 165 | .pipe(size({ 166 | title: 'Images' 167 | })) 168 | .pipe(gulp.dest(projectPath.build.img)) 169 | .pipe(reload({stream: true})); 170 | }); 171 | 172 | /* SVG */ 173 | gulp.task('svg', function () { 174 | return gulp.src(projectPath.src.svg) 175 | .pipe(svgmin()) 176 | .pipe(size({ 177 | title: 'SVG' 178 | })) 179 | .pipe(gulp.dest(projectPath.build.svg)) 180 | .pipe(reload({stream: true})); 181 | }); 182 | 183 | /* PNG Sprite */ 184 | gulp.task('png-sprite', function () { 185 | // Generate spritesheet 186 | var spriteData = gulp.src(projectPath.src.pngSprite).pipe(spritesmith({ 187 | imgName: 'png-sprite.png', 188 | imgPath: '../img/sprites/png/png-sprite.png', 189 | retinaSrcFilter: projectPath.src.pngRetinaSprite, 190 | retinaImgName: 'png-sprite-2x.png', 191 | retinaImgPath: '../img/sprites/png/png-sprite-2x.png', 192 | padding: 0, 193 | cssName: '_png-sprite.less', 194 | cssVarMap: function (sprite) { 195 | sprite.name = 'sprite__' + sprite.name; 196 | } 197 | })); 198 | 199 | // Pipe image stream through image optimizer and onto disk 200 | spriteData.img 201 | .pipe(imagemin()) 202 | .pipe(gulp.dest(projectPath.build.pngSprite)); 203 | 204 | // Pipe CSS stream onto disk 205 | spriteData.css 206 | .pipe(gulp.dest(projectPath.build.pngSpriteCSS)) 207 | .pipe(reload({stream:true})); 208 | }); 209 | 210 | /* SVG sprite */ 211 | gulp.task('svg-sprite', function () { 212 | gulp.src(projectPath.src.svgSprite) 213 | .pipe(svgspritesheet({ 214 | cssPathNoSvg: '../img/sprites/svg/svg-sprite.png', 215 | cssPathSvg: '../img/sprites/svg/svg-sprite.svg', 216 | padding: 0, 217 | pixelBase: 16, 218 | positioning: 'packed', 219 | templateSrc: projectPath.src.svgSpriteTpl, 220 | templateDest: projectPath.build.svgSpriteCSS, 221 | units: 'px' 222 | })) 223 | .pipe(svgmin()) 224 | .pipe(gulp.dest(projectPath.build.svgSprite)) 225 | .pipe(svg2png()) 226 | .pipe(gulp.dest(projectPath.build.svgSpriteNoSvg)); 227 | }); 228 | 229 | /* Fonts */ 230 | gulp.task('fonts', function() { 231 | return gulp.src(projectPath.src.fonts) 232 | .pipe(size({ 233 | title: 'Fonts' 234 | })) 235 | .pipe(gulp.dest(projectPath.build.fonts)) 236 | .pipe(reload({stream: true})); 237 | }); 238 | 239 | /* Clean build directory */ 240 | gulp.task('clean', function (cb) { 241 | del(projectPath.clean, cb); 242 | }); 243 | 244 | /* Build */ 245 | gulp.task('build', function(callback) { 246 | runSequence( 247 | 'clean', 248 | 'html', 249 | 'js', 250 | 'less', 251 | 'images', 252 | 'png-sprite', 253 | 'svg-sprite', 254 | 'svg', 255 | 'fonts', 256 | 'gh-pages', 257 | callback) 258 | }); 259 | 260 | /* Github Pages */ 261 | gulp.task('gh-pages', function() { 262 | return gulp.src(projectPath.ghPages) 263 | .pipe(ghPages()); 264 | }); 265 | 266 | /* Watching */ 267 | gulp.task('watch',['webserver'], function(){ 268 | watch([projectPath.watch.html], function(event, cb) { 269 | gulp.start('html'); 270 | }); 271 | watch([projectPath.watch.js], function(event, cb) { 272 | gulp.start('js'); 273 | }); 274 | watch([projectPath.watch.style], function(event, cb) { 275 | gulp.start('less'); 276 | }); 277 | watch([projectPath.watch.img], function(event, cb) { 278 | gulp.start('images'); 279 | }); 280 | watch([projectPath.watch.svg], function(event, cb) { 281 | gulp.start('svg'); 282 | }); 283 | watch([projectPath.watch.pngSprite], function(event, cb) { 284 | gulp.start('png-sprite'); 285 | }); 286 | watch([projectPath.watch.svgSprite], function(event, cb) { 287 | gulp.start('svg-sprite'); 288 | }); 289 | watch([projectPath.watch.fonts], function(event, cb) { 290 | gulp.start('fonts'); 291 | }); 292 | }); 293 | 294 | /* Default */ 295 | gulp.task('default', ['watch'], function() { 296 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-frontend", 3 | "version": "1.0.0", 4 | "description": "Front-End template", 5 | "dependencies": { 6 | "browser-sync": "^2.7.3", 7 | "del": "^1.2.0", 8 | "gulp": "^3.8.11", 9 | "gulp-autoprefixer": "^2.3.0", 10 | "gulp-concat": "^2.5.2", 11 | "gulp-csscomb": "^3.0.3", 12 | "gulp-gh-pages": "^0.5.1", 13 | "gulp-imagemin": "^2.2.1", 14 | "gulp-jshint": "^1.11.0", 15 | "gulp-less": "^3.0.3", 16 | "gulp-less-reporter": "0.0.2", 17 | "gulp-minify-css": "^1.1.1", 18 | "gulp-processhtml": "^1.1.0", 19 | "gulp-rename": "^1.2.2", 20 | "gulp-rigger": "^0.5.8", 21 | "gulp-size": "^1.2.1", 22 | "gulp-sourcemaps": "^1.5.2", 23 | "gulp-svg-spritesheet": "^0.0.3", 24 | "gulp-svg2png": "^0.3.0", 25 | "gulp-svgmin": "^1.1.2", 26 | "gulp-uglify": "^1.2.0", 27 | "gulp-util": "^3.0.4", 28 | "gulp-watch": "^4.2.4", 29 | "gulp.spritesmith": "^3.6.1", 30 | "imagemin-pngquant": "^4.1.0", 31 | "jshint-stylish": "^2.0.0", 32 | "path": "^0.11.14", 33 | "rigger": "^0.5.10", 34 | "run-sequence": "^1.1.0", 35 | "streamqueue": "^0.1.3", 36 | "vinyl": "^0.4.6" 37 | }, 38 | "devDependencies": {}, 39 | "repository": { 40 | "type": "git", 41 | "url": "https://github.com/Enkil/template-frontend.git" 42 | }, 43 | "author": "Igor [Enkil] Timohin ", 44 | "bugs": { 45 | "url": "https://github.com/Enkil/template-frontend/issues" 46 | }, 47 | "homepage": "https://github.com/Enkil/template-frontend" 48 | } 49 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Шаблон Front-End проектов 2 | 3 | Репозиторий, служащий шаблоном для начала работ над Front-End проектами 4 | 5 | Компиляция и сборка осуществляется с помощью Gulp 6 | 7 | ## Требования 8 | 9 | Для корректной работы шаблона в системе должны быть глобально установлены `bower` и `nodejs` (вместе с `npm`) 10 | 11 | - [Установка Nodejs](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager "Installing Node.js via package manager") 12 | - [Установка Bower](http://bower.io/#install-bower "Install Bower") 13 | 14 | ## Установка шаблона 15 | 16 | ``` sh 17 | $ git clone https://github.com/Enkil/template-frontend.git app-name 18 | $ cd app-name 19 | $ npm i -d 20 | $ bower install 21 | ``` 22 | 23 | По окончанию выполнения будут установлены все необходимые пакеты и их зависимости. 24 | По умолчанию в шаблоне устанавливается и подключается Bootstrap 3 и Bootstrap Material Design. Однако, шаблон не накладывает никаких ограничений и не навязывает использование определенных фреймворков - с помощью `bower` можно установить/удалить нужные пакеты. 25 | 26 | ## Компиляция с помощью Gulp 27 | 28 | После установки шаблона можно приступать к работе над проектом. 29 | 30 | ### Задачи Gulp 31 | 32 | - `$ gulp html` - сборка HTML проекта с использованием простейшией шаблонизации. 33 | - `$ gulp js` - сборка JavaScript проекта 34 | - `$ gulp less` - компилиция Less 35 | - `$ gulp images` - оптимизация изображений 36 | - `$ gulp svg` - оптимизация SVG 37 | - `$ gulp png-sprite` - создание PNG-спрайта 38 | - `$ gulp svg-sprite` - создание SVG-спрайта 39 | - `$ gulp fonts` - копирование файлов шрифтов 40 | - `$ gulp clean` - очистка каталога `build/` 41 | - `$ gulp webserver` - запуск локального веб-сервера для livereload и синхронного тестирования в разных браузерах 42 | - `$ gulp gh-pages`- размещение скомпилированного проекта на Github Pages 43 | - `$ gulp build` - полная сборка проекта 44 | - `$ gulp watch` - запуск задачи `webserver` и отслеживания изменений 45 | - `$ gulp default` - запуск задачи `watch` 46 | 47 | ## Общая концепция 48 | 49 | - `src/` - каталог для размещения рабочих файлов (html-шаблоны, less-файлы, файлы и библиотки js, изображения для сборки в спрайты и т.д.) 50 | - `build/` - каталог для размещения скомпилированной верстки 51 | - `design/` - каталог для локального хранения файлов макета. Содержимое не отслеживается в Git и не будет в последствии залито в репозиторий 52 | 53 | Вся работа осуществляется в каталоге `src/`. В каталоге `build/` никакие изменения напрямую в файлы не вносятся. 54 | Back-End разработчикам и/или Заказчиками передается содержимое каталога `build/` или предоставляется доступ к репозиторию проекта. 55 | 56 | ## Концепции работы 57 | 58 | ### HTML-разметка 59 | 60 | Задача `$ gulp html` 61 | 62 | Страницы, которые необходимо сверстать размещаются в корне каталога `src/` (пример index.html) 63 | Файлы html повторяющихся блоков (например, общий header, footer, модальные окна и т.д.) размещаются в каталоге `src/html-blocks/` : 64 | - `src/html-blocks/common` - файлы html-блоков, использующиеся на всех страницах сайта 65 | - `src/html-blocks/common/modals` - файлы html модальных окон, использующихся на всех страницах сайта 66 | - `src/html-blocks/pages--external` - файлы html-блоков, внешних страниц сайта (страниц, доступных любому пользователю без авторизации на сайте) 67 | - `src/html-blocks/pages--internal` - файлы html-блоков, внутренних страниц сайта (страниц, доступных залогиненному пользователю - например, страницы раздела "Личный кабинет") 68 | 69 | При необходимости внутри данных каталогов можно вводить дополнительную структуру, при этом сборка html пройдет корректно. 70 | 71 | Для указания того содержимое какого файла необходимо вставить используется конструкция вида 72 | ```sh 73 | 74 | This will be replaced by the content of html-blocks/pages--external/file-name.html 75 | 76 | ``` 77 | - содержимое файла `file-name.html` будет вставлено на место данного блока 78 | 79 | Допускается использование вложенности, то есть в одном файле, содержащим код html-разметки блока, можно вызвать содержимое другого файла с блоком разметки. 80 | При этом необходимо учитывать правильное написание пути к файлу. 81 | 82 | Например, 83 | В файле `src/html-blocks/pages-external/header--external.html` мы хотим вызвать содержимое файла `src/html-blocks/common/modals/login.html` 84 | В таком случае вызов пишеться так 85 | 86 | ```sh 87 | 88 | This will be replaced by the content of ../common/modals/login.html 89 | 90 | ``` 91 | 92 | ### Компиляция Less 93 | 94 | Задача `$ gulp less` 95 | 96 | Файл `src/styles/styles.less` является диспетчером подключений для всех прочих less-файлов. 97 | Секция `Third party` предназначена для подключения less/css файлов сторонних библиотек и фреймворков. 98 | Секция `Custom` - для подключения собственных файлов стилей. 99 | 100 | При компиляции происходит объединение всех файлов, компиляция в CSS, форматирование стиля кодирования, добавление вендорных префиксов, минификация и запись sourcemaps. 101 | Итоговые файлы стилевых таблиц помещаются в каталог `build/css` (style.css, style.min.css, style.min.css.map) 102 | 103 | Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками. 104 | 105 | ### Компиляция JavaScript 106 | 107 | Задача `$ gulp js` 108 | 109 | Файл `src/js/vendor.js` является диспетчером подключений js файлов сторонних библиотек и фреймворков. 110 | Файл `src/js/custom.js` является диспетчером подключений собственных js файлов. 111 | 112 | При компиляции происходит объединение всех файлов, проверка на наличие ошибок (при этом исключаются из проверки файлы сторонних библиотек и проверяются только те, что написаны нами), минификация и запись sourcemaps. 113 | Итоговый файл помещается в каталог `build/js` (main.js, main.min.js, main.min.js.map) 114 | 115 | Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками. 116 | 117 | ### Оптимизация изображений 118 | 119 | Задача `$ gulp images` 120 | 121 | Все контентные изображения, а также любые изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог `src/img/images`. 122 | При выполнении задачи все изображения из этого каталога оптимизируются. 123 | Итоговые файлы помещаются в каталог `build/img/images/` 124 | 125 | ### Оптимизация SVG 126 | 127 | Задача `$ gulp svg` 128 | 129 | Все SVG изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог `src/img/svg`. 130 | При выполнении задачи все SVG из этого каталога оптимизируются. 131 | Итоговые файлы помещаются в каталог `build/img/svg/` 132 | 133 | ### Создание PNG-спрайта 134 | 135 | Задача `$ gulp png-sprite` 136 | 137 | Все изображения, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог `src/img/sprites/png`. 138 | Итоговый спрайт будет оптимизирован и помещен в каталог `build/img/sprites/png/png-sprite.png`. 139 | Также будет создан или дополнен файл `src/styles/common/_png-sprite.less`, содержащий примеси (mixins) для вызова изображений спрайта. 140 | Имя примеси (mixin) всегда выглядит как `@sprite-filename`, где filename - имя изображения, добавленного к спрайту. 141 | 142 | Пример работы с спрайтом и его стилями. 143 | 144 | - Размещаем png-изображение иконки в каталоге `src/img/sprites/png/html5.png` 145 | - Запускаем задачу `$ gulp png-sprite` 146 | - Создаем файл `src/styles/common/icons.less` 147 | - В нем создаем следующие CSS-классы: 148 | 149 | ``` sh 150 | .png-sprite{ 151 | &:before{ 152 | content: ''; 153 | display: inline-block; 154 | } 155 | 156 | &--html5:before{ 157 | .sprite(@sprite-html5); 158 | } 159 | } 160 | ``` 161 | 162 | - Файл `src/styles/common/icons.less` подключаем в `src/styles/style.less` с помощью конструкции `@import` (`@import "common/icons.less";`) 163 | - После компиляции less (запускаем задачу `$ gulp less`)получаем следующий CSS код 164 | 165 | ``` sh 166 | .png-sprite:before 167 | { 168 | display: inline-block; 169 | 170 | content: ''; 171 | } 172 | .png-sprite--html5:before 173 | { 174 | width: 24px; 175 | height: 24px; 176 | 177 | background-image: url(../img/sprites/png/png-sprite.png); 178 | background-position: 0 0; 179 | } 180 | ``` 181 | 182 | - html-тегу, около которого надо разместить иконку, добавляем CSS-классы `png-sprite png-sprite--html5` 183 | 184 | Пример: `

Test PNG sprite

` 185 | 186 | Работа с спрайтом в таком случае сводится к добавлению нужных изображений в каталог `src/img/sprites/png` 187 | и созданию CSS-класса, в котором вызывается примесь (mixin), созданная при генерации спрайта. 188 | Вы можете использовать примеси (mixins) и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before 189 | 190 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо 191 | - добавить в каталог `src/img/sprites/png` изображение (html5.png) 192 | - запустить задачу `$ gulp png-sprite` 193 | 194 | #### Создание Retina-ready спрайта 195 | 196 | Для создания PNG-спрайта адаптированного под Retina-экраны и экраны повышенной плотности, необходимо в каталог 197 | `src/img/sprites/png` поместить файл изображения вдвое большего размера, чем он должен отображаться. Имя файла обязательно 198 | должно содержать постфикс -2x (`filename-2x.png`). 199 | Обязательным условием для корректной работы является наличие двух файлов изображений для одной иконки (например, html5.png и html5-2x.png). 200 | В результате генерации спрайта создается спрайт `build/img/sprites/png-sprite-2x.png` и переменная вида `@sprite-filename-group`, 201 | (например, `@sprite-html5-group`). 202 | Для вызова данной переменной (mixin) необходимо использовать примесь (mixin) `.retina-sprite()` 203 | Например, `.retina-sprite(@sprite-html5-group)` 204 | 205 | Пример файла icons.less: 206 | 207 | ``` sh 208 | .png-sprite{ 209 | &:before{ 210 | content: ''; 211 | display: inline-block; 212 | } 213 | 214 | &--html5:before{ 215 | .sprite(@sprite-html5); 216 | } 217 | 218 | &--html5-retina:before{ 219 | .retina-sprite(@sprite-html5-group) 220 | } 221 | } 222 | ``` 223 | 224 | Пример использования в разметке 225 | 226 | ``` sh 227 |

Test Retina-ready PNG sprite

228 | ``` 229 | 230 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода Retina изображений необходимо 231 | - добавить в каталог `src/img/sprites/png` два изображения - обычное и вдвое большее, отличающиеся в названии постфиксом -2x (html5.png, html5-2x.png) 232 | - запустить задачу `$ gulp png-sprite` 233 | 234 | ### Создание SVG-спрайта 235 | 236 | Задача `$ gulp svg-sprite` 237 | 238 | Все SVG, которые необходимо собрать в спрайт (например, svg-файлы иконок) необходимо помещать в каталог `src/img/sprites/svg`. 239 | Итоговый спрайт будет оптимизирован и помещен в каталог `build/img/sprites/svg/svg-sprite.svg`, при этом будет создан дополнительный спрайт 240 | `build/img/sprites/svg/svg-sprite.png` для отображения в браузерах не поддерживающих SVG. 241 | Также будет создан или дополнен файл `src/styles/common/_svg-sprite.less`, содержащий CSS-классы для вызова изображений спрайта. 242 | Имя CSS-класса всегда выглядит как `@svg-sprite-filename`, где filename - имя изображения, добавленного к спрайту. 243 | 244 | Пример работы с SVG-спрайтом и его стилями. 245 | 246 | - Размещаем svg-изображение иконки в каталоге `src/img/sprites/svg/html5.svg` 247 | - Запускаем задачу `$ gulp svg-sprite` 248 | - Создаем файл `src/styles/common/svg-icons.less` 249 | - В нем создаем следующие CSS-классы: 250 | 251 | ``` sh 252 | .svg-sprite{ 253 | &:before{ 254 | content: ''; 255 | display: inline-block; 256 | width: 32px!important; 257 | height: 32px!important; 258 | background-size: contain!important; 259 | } 260 | 261 | &--html5-icon:before{ 262 | .svg-sprite--html5(); // CSS-класс, созданный при генерации SVG-спрайта. 263 | } 264 | 265 | } 266 | ``` 267 | 268 | - Файл `src/styles/common/svg-icons.less` подключаем в `src/styles/style.less` с помощью конструкции `@import` (`@import "common/svg-icons.less";`) 269 | - После компиляции less (запускаем задачу `$ gulp less`) получаем следующий CSS код 270 | 271 | ``` sh 272 | .svg-sprite--html5 273 | { 274 | width: 47px; 275 | height: 47px; 276 | 277 | background-image: url('../img/sprites/svg/svg-sprite.svg'); 278 | background-repeat: no-repeat; 279 | background-position: 0 0; 280 | background-size: 47px 47px; 281 | } 282 | .no-svg .svg-sprite--html5 283 | { 284 | background-image: url('../img/sprites/svg/svg-sprite.png'); 285 | } 286 | 287 | 288 | .svg-sprite:before 289 | { 290 | display: inline-block; 291 | 292 | width: 32px!important; 293 | height: 32px!important; 294 | 295 | content: ''; 296 | 297 | background-size: contain!important; 298 | } 299 | .svg-sprite--html5-icon:before 300 | { 301 | width: 47px; 302 | height: 47px; 303 | 304 | background-image: url('../img/sprites/svg/svg-sprite.svg'); 305 | background-repeat: no-repeat; 306 | background-position: 0 0; 307 | background-size: 47px 47px; 308 | } 309 | .no-svg .svg-sprite--html5-icon:before 310 | { 311 | background-image: url('../img/sprites/svg/svg-sprite.png'); 312 | } 313 | ``` 314 | 315 | - html-тегу, около которого надо разместить иконку, добавляем CSS-классы `svg-sprite svg-sprite--html5-icon` 316 | 317 | Пример: `

Test SVG sprite

` 318 | 319 | Работа с SVG-спрайтом в таком случае сводится к добавлению нужных SVG в каталог `src/img/sprites/svg` 320 | и созданию CSS-класса, в котором вызывается в качестве примеси (mixin) CSS-класс, созданный при генерации спрайта. 321 | Вы можете использовать CSS-классы, созданные при генерации спрайта и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before 322 | 323 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо 324 | - добавить в каталог `src/img/sprites/svg` изображение (html5.svg) 325 | - запустить задачу `$ gulp svg-sprite` 326 | 327 | ### Обработка файлов шрифтов 328 | 329 | Задача `$ gulp fonts` 330 | 331 | Файлы используемых шрифтов необходимо размещать в каталоге `src/styles/fonts`. 332 | При обработке шрифты будут скопированы в каталог `build/css/fonts`. 333 | Важно корректно прописать к ним пути в файле Less, описывающим типографику. 334 | 335 | ### Очистка каталога сборки 336 | 337 | Задача `$ gulp clean` 338 | 339 | При выполнении задачи полностью удаляется содержимое каталога `build/` за исключением файла `build/.gitignore` 340 | 341 | ### Полная сборка проекта 342 | 343 | Задача `$ gulp build` 344 | 345 | При запуске задачи последовательно выполняются задачи `clean`, `html`, `js`, `less`, `images`, `png-sprite`, `svg-sprite`, `svg`, `fonts`, `gh-pages`. 346 | В итоге выполнения в каталоге `build/` формируется полная сборка проекта с нуля. 347 | 348 | ### Livereload и синхронизация между браузерами 349 | 350 | Задача `$ gulp webserver` 351 | 352 | При выполнении задачи запускается локальный веб-сервер BrowserSync и открыватся index.html проекта. 353 | 354 | [Подробнее о BrowserSync](http://www.browsersync.io/ "Подробнее о BrowserSync") 355 | 356 | Сервер использует каталог `build/` в качестве корня проекта. 357 | 358 | При запуске формируются следующие данные: 359 | 360 | ``` sh 361 | [App Front-End] Access URLs: 362 | ---------------------------------------------- 363 | Local: http://localhost:9000 // локальный URL проекта 364 | External: http://192.168.0.100:9000 // внешний (в пределах локальной сети) URL проекта (по нему можно открыть на других устройствах в той же сети) 365 | Tunnel: https://iuvrvzmmli.localtunnel.me // Туннель - защищенный уникальный URL, можно дать человеку на другом конце мира и он также будет видеть все обновления в реальном времени 366 | ---------------------------------------------- 367 | UI: http://localhost:3001 // локальный URL WebUI BrowserSync 368 | UI External: http://192.168.0.100:3001 // внешний (в пределах сети) URL WebUI BrowserSync 369 | ---------------------------------------------- 370 | [App Front-End] Serving files from: ./build // корень проекта для BrowserSync 371 | ``` 372 | 373 | ### Публикация на Github Pages 374 | 375 | Задача `$ gulp gh-pages` 376 | 377 | При запуске задачи будет создана ветка gh-pages и в нее залито текущее состояние каталога `build/`. 378 | 379 | [Подробнее о GitHub Pages](https://pages.github.com/ "GitHub Pages") 380 | 381 | ### Отслеживание изменений 382 | 383 | Задача `$ gulp watch` 384 | 385 | При запуске сначала выполняется задача `$ gulp webserver`, затем при изменении или добавлении в каталоге `src/` каких 386 | либо файлов, автоматически запускается соответсвующая задача по их обработке. 387 | 388 | ### Настройки шаблона 389 | 390 | В файле `gulpfile.js` в секции Settings в разделе Path settings задаются 391 | пути к каталогам размещения обработанных файлов (итогов сборки), исходных файлов и путей для отслеживания изменений. 392 | 393 | Рекомендуется изменять пути и целевые файлы только через этот раздел, при необходимости дополняя его новыми переменными. 394 | 395 | 396 | 397 | ## [Igor Timohin, Front-End template](http://enkil.github.io/template-frontend/ "Igor Timohin, Front-End template") -------------------------------------------------------------------------------- /src/google4a51dca99c60ef07.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google4a51dca99c60ef07.html -------------------------------------------------------------------------------- /src/html-blocks/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/html-blocks/common/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/html-blocks/common/head.html: -------------------------------------------------------------------------------- 1 | 2 | Gulp Awesome - front-end scaffolding boilerplate 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 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 | 71 | -------------------------------------------------------------------------------- /src/html-blocks/common/if-ie.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/html-blocks/common/modals/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/html-blocks/pages--external/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/html-blocks/pages--external/concept.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Шаблон Front-End проектов. Общая концепция

4 |
5 |
6 |

7 | Репозиторий, служащий шаблоном для начала работ над Front-End проектами
8 | Компиляция и сборка осуществляется с помощью Gulp 9 |

10 |
    11 |
  • src/ - каталог для размещения рабочих файлов (html-шаблоны, less-файлы, файлы и библиотки js, изображения для сборки в спрайты и т.д.)
    • 12 |
  • build/ - каталог для размещения скомпилированной верстки
    • 13 |
  • design/ - каталог для локального хранения файлов макета. Содержимое не отслеживается в Git и не будет в последствии залито в репозиторий
    • 14 |
15 |

16 | Вся работа осуществляется в каталоге src/. В каталоге build/ никакие изменения напрямую в файлы не вносятся. Back-End разработчикам и/или Заказчиками передается содержимое каталога build/ или предоставляется доступ к репозиторию проекта. 17 |

18 |
19 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/concepts-tabs.html: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
16 | 17 | This will be replaced by the content of html-blocks/pages--external/requires-and-install.html 18 | 19 |
20 |
21 | 22 | This will be replaced by the content of html-blocks/pages--external/gulp-tasks.html 23 | 24 |
25 |
26 | 27 | This will be replaced by the content of html-blocks/pages--external/html-concept.html 28 | 29 |
30 |
31 | 32 | This will be replaced by the content of html-blocks/pages--external/less-concept.html 33 | 34 |
35 |
36 | 37 | This will be replaced by the content of html-blocks/pages--external/js-concept.html 38 | 39 |
40 |
41 | 42 | This will be replaced by the content of html-blocks/pages--external/img-svg-optimisation.html 43 | 44 |
45 |
46 | 47 | This will be replaced by the content of html-blocks/pages--external/png-sprite.html 48 | 49 |
50 |
51 | 52 | This will be replaced by the content of html-blocks/pages--external/svg-sprite.html 53 | 54 |
55 |
56 | 57 | This will be replaced by the content of html-blocks/pages--external/livereload.html 58 | 59 |
60 |
61 | 62 | This will be replaced by the content of html-blocks/pages--external/utils.html 63 | 64 |
65 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/disqus.html: -------------------------------------------------------------------------------- 1 |
2 | 13 | -------------------------------------------------------------------------------- /src/html-blocks/pages--external/footer--external.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/html-blocks/pages--external/gulp-tasks.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Задачи Gulp

4 | После установки шаблона можно приступать к работе над проектом. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 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 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
#ЗадачаКраткое описание
1$ gulp htmlсборка HTML проекта с использованием простейшией шаблонизации.
2$ gulp jsсборка JavaScript проекта.
3$ gulp lessкомпилиция Less
4$ gulp imagesоптимизация изображений
5$ gulp svgоптимизация SVG
6$ gulp png-spriteсоздание PNG-спрайта
7$ gulp svg-spriteсоздание SVG-спрайта
8$ gulp fontsкопирование файлов шрифтов
9$ gulp cleanочистка каталога build/
10gulp svg-spriteсоздание SVG-спрайта
11$ gulp webserverзапуск локального веб-сервера для livereload и синхронного тестирования в разных браузерах
12$ gulp gh-pagesразмещение скомпилированного проекта на Github Pages
13$ gulp watchзапуск задачи webserver и отслеживания изменений
14$ gulp defaultзапуск задачи watch
86 |
87 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/header--external.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 10 | 11 | 12 | Gulp Awesome 13 | 14 |
15 | 16 |
17 |
    18 |
  • Fork
    • 19 |
  • Watch
    • 20 |
  • Star
    • 21 |
  • Download
    • 22 | 23 |
  • 24 | 30 |
    • 31 |
32 | 33 | 45 | 46 |
47 | 48 |
49 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/html-concept.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

HTML-разметка

4 |

Задача $ gulp html

5 |

6 | Страницы, которые необходимо сверстать размещаются в корне каталога src/ (пример index.html) 7 | Файлы html повторяющихся блоков (например, общий header, footer, модальные окна и т.д.) размещаются в каталоге src/html-blocks/ : 8 |

9 |
    10 |
  • src/html-blocks/common - файлы html-блоков, использующиеся на всех страницах сайта
    • 11 |
  • src/html-blocks/common/modals - файлы html модальных окон, использующихся на всех страницах сайта
    • 12 |
  • src/html-blocks/pages--external - файлы html-блоков, внешних страниц сайта (страниц, доступных любому пользователю без авторизации на сайте)
    • 13 |
  • src/html-blocks/pages--internal - файлы html-блоков, внутренних страниц сайта (страниц, доступных залогиненному пользователю - например, страницы раздела "Личный кабинет")
    • 14 |
15 |

16 | При необходимости внутри данных каталогов можно вводить дополнительную структуру, при этом сборка html пройдет корректно. 17 |

18 |

19 | Для указания того содержимое какого файла необходимо вставить используется конструкция вида 20 | 

21 | <!--build:include html-blocks/pages--external/file-name.html-->
22 | This will be replaced by the content of html-blocks/pages--external/file-name.html
23 | <!--/build-->
24 | - содержимое файла file-name.html будет вставлено на место данного блока.
25 |

26 |

27 | Допускается использование вложенности, то есть в одном файле, содержащим код html-разметки блока, можно вызвать содержимое другого файла с блоком разметки. 28 | При этом необходимо учитывать правильное написание пути к файлу.
29 | Например,
30 | В файле src/html-blocks/pages-external/header--external.html мы хотим вызвать содержимое файла src/html-blocks/common/modals/login.html 31 | В таком случае вызов пишеться так 32 | 33 | 

34 | <!--build:include ../common/modals/login.html-->
35 | This will be replaced by the content of ../common/modals/login.html
36 | <!--/build-->
37 |

38 |
39 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/img-svg-optimisation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Оптимизация изображений

4 |

Задача $ gulp images

5 | 6 |

7 | Все контентные изображения, а также любые изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог src/img/images. 8 |
9 |
10 | При выполнении задачи все изображения из этого каталога оптимизируются.
11 | Итоговые файлы помещаются в каталог build/img/images/. 12 |

13 | 14 |

Оптимизация SVG

15 |

Задача $ gulp svg

16 | 17 |

18 | Все SVG изображения, которые не должны быть объединены в спрайт, необходимо помещать в каталог src/img/svg. 19 |
20 | При выполнении задачи все SVG из этого каталога оптимизируются.
21 | Итоговые файлы помещаются в каталог build/img/svg/
22 |

23 |
24 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/js-concept.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Компиляция JavaScript

4 |

Задача $ gulp js

5 |

6 | Файл src/js/vendor.js является диспетчером подключений js файлов сторонних библиотек и фреймворков. 7 | Файл src/js/custom.js является диспетчером подключений собственных js файлов. 8 |

9 | 10 |

11 | При компиляции происходит объединение всех файлов, проверка на наличие ошибок (при этом исключаются из проверки файлы сторонних библиотек и проверяются только те, что написаны нами), минификация и запись sourcemaps. Итоговый файл помещается в каталог build/js (main.js, main.min.js, main.min.js.map) 12 |

13 |

14 | Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками. 15 |

16 |
17 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/lead-block.html: -------------------------------------------------------------------------------- 1 |
2 |

Gulp Awesome

3 |

Scaffolding boilerplate

4 |

Front-End Projects starts here.

5 |

Write on your way, Gulp will make all the routine things

6 |

7 | Learn more 8 | See on GitHub 9 |

10 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/less-concept.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Компиляция Less

4 |

Задача $ gulp less

5 |

6 | Файл src/styles/styles.less является диспетчером подключений для всех прочих less-файлов.
7 | Секция Third party предназначена для подключения less/css файлов сторонних библиотек и фреймворков.
8 | Секция Custom - для подключения собственных файлов стилей.
9 |

10 | 11 |

12 | При компиляции происходит объединение всех файлов, компиляция в CSS, форматирование стиля кодирования, добавление вендорных префиксов, минификация и запись sourcemaps. Итоговые файлы стилевых таблиц помещаются в каталог build/css (style.css, style.min.css, style.min.css.map) 13 |

14 |

15 | Для упрощения навигации при работе над крупными проектами предполагается структура размещения исходных файлов схожая с html-блоками. 16 |

17 |
18 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/livereload.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Livereload и синхронизация между браузерами

4 |

Задача $ gulp webserver

5 | 6 |

7 | При выполнении задчи запускается локальный веб-сервер BrowserSync и открыватся index.html проекта.
8 | Подробнее о BrowserSync 9 |

10 | 11 |

12 | Сервер использует каталог build/ в качестве корня проекта.
13 | При запуске формируются следующие данные: 14 | 15 | 

16 | [App Front-End] Access URLs:
17 |  ----------------------------------------------
18 |        Local: http://localhost:9000 // локальный URL проекта
19 |     External: http://192.168.0.100:9000 // внешний (в пределах локальной сети) URL проекта (по нему можно открыть на других устройствах в той же сети)
20 |       Tunnel: https://iuvrvzmmli.localtunnel.me // Туннель - защищенный уникальный URL, можно дать человеку на другом конце мира и он также будет видеть все обновления в реальном времени
21 |  ----------------------------------------------
22 |           UI: http://localhost:3001 // локальный URL WebUI BrowserSync
23 |  UI External: http://192.168.0.100:3001 // внешний (в пределах сети) URL WebUI BrowserSync
24 |  ----------------------------------------------
25 | [App Front-End] Serving files from: ./build // корень проекта для BrowserSync
26 |
27 |

28 |
29 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/png-sprite.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Создание PNG-спрайта

4 |

Задача $ gulp png-sprite

5 | 6 |

7 | Все изображения, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог src/img/sprites/png. 8 |
9 | Итоговый спрайт будет оптимизирован и помещен в каталог build/img/sprites/png/png-sprite.png. 10 |
11 | Также будет создан или дополнен файл src/styles/common/_png-sprite.less, содержащий примеси (mixins) для вызова изображений спрайта. 12 |
13 | Имя примеси (mixin) всегда выглядит как @sprite-filename, где filename - имя изображения, добавленного к спрайту. 14 |

15 | 16 |

Пример работы с спрайтом и его стилями.

17 | 18 |
    19 |
  • Размещаем png-изображение иконки в каталоге src/img/sprites/png/html5.png
    • 20 |
  • Запускаем задачу $ gulp png-sprite
    • 21 |
  • Создаем файл src/styles/common/icons.less
    • 22 |
  • 23 | В нем создаем следующие CSS-классы: 24 | 
    .png-sprite{
 25 |             &:before{
 26 |                 content: '';
 27 |                 display: inline-block;
 28 |             }
 29 | 
 30 |             &--html5:before{
 31 |                 .sprite(@sprite-html5);
 32 |             }
 33 |         }
    34 |
    • 35 |
  • Файл src/styles/common/icons.less подключаем в src/styles/style.less с помощью конструкции @import (@import "common/icons.less";)
    • 36 |
  • 37 | После компиляции less (запускаем задачу $ gulp less)получаем следующий CSS код 38 | 
     39 |         .png-sprite:before{
 40 |             display: inline-block;
 41 |             content: '';
 42 |         }
 43 | 
 44 |         .png-sprite--html5:before{
 45 |             width: 24px;
 46 |             height: 24px;
 47 |             background-image: url(../img/sprites/png/png-sprite.png);
 48 |             background-position: 0 0;
 49 |         }
    50 |
    • 51 |
  • html-тегу, около которого надо разместить иконку, добавляем CSS-классы png-sprite png-sprite--html5
    • 52 |
53 | 54 |

Пример: Test PNG sprite

55 | 56 |

57 | Работа с спрайтом в таком случае сводится к добавлению нужных изображений в каталог src/img/sprites/png 58 |
59 | и созданию CSS-класса, в котором вызывается примесь (mixin), созданная при генерации спрайта.
60 | Вы можете использовать примеси (mixins) и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before 61 |

62 | 63 |

64 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо 65 |

    66 |
  • добавить в каталог src/img/sprites/png изображение (html5.png)
    • 67 |
  • запустить задачу $ gulp png-sprite
    • 68 |
69 |

70 | 71 |

Создание Retina-ready PNG-спрайта

72 | 73 |

74 | Для создания PNG-спрайта адаптированного под Retina-экраны и экраны повышенной плотности, необходимо в каталог 75 | src/img/sprites/png поместить файл изображения вдвое большего размера, чем он должен отображаться. Имя файла обязательно 76 | должно содержать постфикс -2x (filename-2x.png).
77 | Обязательным условием для корректной работы является наличие двух файлов изображений для одной иконки (например, html5.png и html5-2x.png). 78 |
79 | В результате генерации спрайта создается спрайт build/img/sprites/png-sprite-2x.png и переменная вида @sprite-filename-group, 80 | (например, @sprite-html5-group).
81 | Для вызова данной переменной (mixin) необходимо использовать примесь (mixin) .retina-sprite() 82 | Например, .retina-sprite(@sprite-html5-group). 83 |

84 | 85 |

86 | Пример файла icons.less:
87 | 

.png-sprite{
 88 |               &:before{
 89 |                 content: '';
 90 |                 display: inline-block;
 91 |               }
 92 | 
 93 |               &--html5:before{
 94 |                 .sprite(@sprite-html5);
 95 |               }
 96 | 
 97 |               &--html5-retina:before{
 98 |                 .retina-sprite(@sprite-html5-group)
 99 |               }
100 |             }
101 |

102 | 103 |

104 | Пример использования в разметке: Test Retina-ready PNG sprite 105 |

106 | 107 |

108 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода Retina изображений необходимо 109 |

    110 |
  • добавить в каталог src/img/sprites/png два изображения - обычное и вдвое большее, отличающиеся в названии постфиксом -2x (html5.png, html5-2x.png)
    • 111 |
  • запустить задачу $ gulp png-sprite
    • 112 |
113 |

114 | 115 |
116 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/requires-and-install.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Требования к установке

4 |

5 | Для корректной работы шаблона в системе должны быть глобально установлены bower и nodejs (вместе с npm)
6 | Установка Nodejs 7 |
8 | Установка Bower 9 |

10 | 11 |

12 |

Установка шаблона

13 | 14 | 
15 |                 $ git clone https://github.com/Enkil/template-frontend.git app-name
16 |                 $ cd app-name
17 |                 $ npm i -d
18 |                 $ bower install
19 | 20 | По окончанию выполнения будут установлены все необходимые пакеты и их зависимости.
21 | По умолчанию в шаблоне устанавливается и подключается Bootstrap 3, Bootstrap Material Design, Font-Awesome, Modernizr, social-likes. Однако, шаблон не накладывает никаких ограничений и не навязывает использование определенных фреймворков - с помощью bower можно установить/удалить нужные пакеты. 22 |

23 |
24 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/svg-sprite.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Создание SVG-спрайта

4 |

Задача $ gulp svg-sprite

5 | 6 |

7 | Все SVG, которые необходимо собрать в спрайт (например, png-файлы иконок) необходимо помещать в каталог src/img/sprites/svg. 8 |
9 | Итоговый спрайт будет оптимизирован и помещен в каталог build/img/sprites/svg/svg-sprite.svg. 10 |
11 | Также будет создан или дополнен файл src/styles/common/_svg-sprite.less, содержащий CSS-классы для вызова изображений спрайта. 12 |
13 | Имя CSS-класса всегда выглядит как @svg-sprite-filename, где filename - имя изображения, добавленного к спрайту. 14 |

15 | 16 |

Пример работы с SVG-спрайтом и его стилями.

17 | 18 |
    19 |
  • Размещаем svg-изображение иконки в каталоге src/img/sprites/svg/html5.svg
    • 20 |
  • Запускаем задачу $ gulp svg-sprite
    • 21 |
  • Создаем файл src/styles/common/svg-icons.less
    • 22 |
  • 23 | В нем создаем следующие CSS-классы: 24 | 
    .svg-sprite{
 25 |                   &:before{
 26 |                     content: '';
 27 |                     display: inline-block;
 28 |                     width: 32px!important;
 29 |                     height: 32px!important;
 30 |                     background-size: contain!important;
 31 |                   }
 32 | 
 33 |                   &--html5-icon:before{
 34 |                     .svg-sprite--html5(); // CSS-класс, созданный при генерации SVG-спрайта.
 35 |                   }
 36 | 
 37 |                 }
    38 |
    • 39 |
  • Файл src/styles/common/svg-icons.less подключаем в src/styles/style.less с помощью конструкции @import (@import "common/svg-icons.less";)
    • 40 |
  • 41 | После компиляции less (запускаем задачу $ gulp less)получаем следующий CSS код 42 | 
    .svg-sprite--html5
 43 |                     {
 44 |                         width: 47px;
 45 |                         height: 47px;
 46 | 
 47 |                         background-image: url('../img/sprites/svg/svg-sprite.svg');
 48 |                         background-repeat: no-repeat;
 49 |                         background-position: 0 0;
 50 |                         background-size: 47px 47px;
 51 |                     }
 52 |                     .no-svg .svg-sprite--html5
 53 |                     {
 54 |                         background-image: url('../img/sprites/svg/svg-sprite.png');
 55 |                     }
 56 | 
 57 | 
 58 |                     .svg-sprite:before
 59 |                     {
 60 |                         display: inline-block;
 61 | 
 62 |                         width: 32px!important;
 63 |                         height: 32px!important;
 64 | 
 65 |                         content: '';
 66 | 
 67 |                         background-size: contain!important;
 68 |                     }
 69 |                     .svg-sprite--html5-icon:before
 70 |                     {
 71 |                         width: 47px;
 72 |                         height: 47px;
 73 | 
 74 |                         background-image: url('../img/sprites/svg/svg-sprite.svg');
 75 |                         background-repeat: no-repeat;
 76 |                         background-position: 0 0;
 77 |                         background-size: 47px 47px;
 78 |                     }
 79 |                     .no-svg .svg-sprite--html5-icon:before
 80 |                     {
 81 |                         background-image: url('../img/sprites/svg/svg-sprite.png');
 82 |                     }
    83 |
    • 84 |
  • html-тегу, около которого надо разместить иконку, добавляем CSS-классы svg-sprite svg-sprite--html5-icon
    • 85 |
86 | 87 |

Пример: Test PNG sprite

88 | 89 |

90 | Работа с SVG-спрайтом в таком случае сводится к добавлению нужных SVG в каталог src/img/sprites/svg 91 |
92 | и созданию CSS-класса, в котором вызывается в качестве примеси (mixin) CSS-класс, созданный при генерации спрайта.
93 | Вы можете использовать CSS-классы и по другому, вызывая изображения с спрайта, не в псевдоэлементе :before 94 |

95 | 96 |

97 | Итого, для добавления в спрайт и генерации сопутствующего Less/CSS-кода изображений необходимо 98 |

    99 |
  • добавить в каталог src/img/sprites/svg изображение (html5.png)
    • 100 |
  • запустить задачу $ gulp svg-sprite
    • 101 |
102 |

103 | 104 |
105 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--external/utils.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Обработка шрифтов

4 |

Задача $ gulp fonts

5 |

6 | Файлы используемых шрифтов необходимо размещать в каталоге src/styles/fonts. 7 |
8 | При обработке шрифты будут скопированы в каталог build/css/fonts.
9 | Важно корректно прописать к ним пути в файле Less, описывающим типографику. 10 |

11 | 12 |

Очистка каталога сборки

13 |

Задача $ gulp clean

14 |

15 | При выполнении задачи полностью удаляется содержимое каталога build/ за исключением файла build/.gitignore 16 |

17 | 18 |

Публикация на Github Pages

19 |

Задача $ gulp gh-pages

20 |

21 | При запуске задачи будет создана ветка gh-pages и в нее залито текущее состояние каталога build/. 22 |

23 | 24 |

Полная сборка проекта

25 |

Задача $ gulp build

26 |

27 | При запуске задачи последовательно выполняются задачи clean, html, js, less, images, png-sprite, svg-sprite, svg, fonts, gh-pages. 28 |
29 | В итоге выполнения в каталоге build/ формируется полная сборка проекта с нуля. 30 |

31 | 32 |

Отслеживание изменений

33 |

Задача $ gulp watch

34 |

35 | При запуске сначала выполняется задача $ gulp webserver, затем при изменении или добавлении в каталоге src/ каких 36 | либо файлов, автоматически запускается соответсвующая задача по их обработке. 37 |

38 | 39 |

Настройки шаблона

40 |

41 | В файле gulpfile.js в секции Settings в разделе Path settings задаются 42 | пути к каталогам размещения обработанных файлов (итогов сборки), исходных файлов и путей для отслеживания изменений. 43 |
44 | Рекомендуется изменять пути и целевые файлы только через этот раздел, при необходимости его дополняя новыми переменными. 45 |

46 | 47 |
48 |
-------------------------------------------------------------------------------- /src/html-blocks/pages--internal/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/humans.txt: -------------------------------------------------------------------------------- 1 | /* TEAM */ 2 | Developer: Igor Timohin 3 | Site: igor-timohin.ru 4 | Contact: timohin.i [at] gmail.com 5 | Twitter: @Igor_Timokhin 6 | From: Saint-Petersburg, Russia 7 | Location: Saint-Petersburg, Russia 8 | 9 | /* THANKS */ 10 | 11 | School: http://epixx.ru 12 | 13 | /* SITE */ 14 | Language: Russian 15 | Doctype:HTML5 16 | Standards: HTML5, CSS3 17 | Components: Modernizr, jQuery, Bootstrap, Bootstrap Material Design, etc. 18 | IDE: PhpShtorm, Gulp, Git, GitHub Pages 19 | Software: Software used for the development -------------------------------------------------------------------------------- /src/img/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/img/images/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/img/images/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /src/img/images/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /src/img/images/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /src/img/images/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /src/img/images/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /src/img/images/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/img/images/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/apple-icon.png -------------------------------------------------------------------------------- /src/img/images/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /src/img/images/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/img/images/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/img/images/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /src/img/images/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/favicon.ico -------------------------------------------------------------------------------- /src/img/images/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Front-End Projects start template", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/img/images/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/img/images/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /src/img/images/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /src/img/images/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/img/images/html5-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/images/html5-2x.png -------------------------------------------------------------------------------- /src/img/sprites/png/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/img/sprites/png/html5-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/sprites/png/html5-2x.png -------------------------------------------------------------------------------- /src/img/sprites/png/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/img/sprites/png/html5.png -------------------------------------------------------------------------------- /src/img/sprites/svg/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/img/sprites/svg/html5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 51 | 86 | 88 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /src/img/svg/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/img/svg/html5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 51 | 86 | 88 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This will be replaced by the content of html-blocks/common/head.html 6 | 7 | 8 | 9 | 10 | 11 | This will be replaced by the content of html-blocks/common/if-ie.html 12 | 13 | 14 | 15 | This will be replaced by the content of html-blocks/pages--external/header--external.html 16 | 17 | 18 |
19 | 20 |
21 |
22 | 23 | 24 | This will be replaced by the content of html-blocks/pages--external/lead-block.html 25 | 26 | 27 | 28 | This will be replaced by the content of html-blocks/pages--external/concept.html 29 | 30 | 31 | 32 | This will be replaced by the content of html-blocks/pages--external/concepts-tabs.html 33 | 34 | 35 | 36 | This will be replaced by the content of html-blocks/pages--external/disqus.html 37 | 38 | 39 |
40 |
41 | 42 |
43 | 44 | 45 | This will be replaced by the content of html-blocks/pages--external/footer--external.html 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/js/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/js/common/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/js/common/google-analytics.js: -------------------------------------------------------------------------------- 1 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 2 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 3 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 4 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 5 | 6 | ga('create', 'UA-63576814-1', 'auto'); 7 | ga('require', 'linkid', 'linkid.js'); 8 | ga('send', 'pageview'); 9 | -------------------------------------------------------------------------------- /src/js/common/material-init.js: -------------------------------------------------------------------------------- 1 | // This command is used to initialize some elements of Bootstrap Material and make them work properly 2 | $.material.init(); 3 | -------------------------------------------------------------------------------- /src/js/custom.js: -------------------------------------------------------------------------------- 1 | /**************************************/ 2 | /* Custom JavaScript files supervisor */ 3 | /**************************************/ 4 | 5 | $(document).ready(function() { 6 | 7 | /* Custom */ 8 | 9 | //= ./common/material-init.js 10 | //= ./common/google-analytics.js 11 | 12 | }); -------------------------------------------------------------------------------- /src/js/pages--external/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/js/pages--internal/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/js/vendor.js: -------------------------------------------------------------------------------- 1 | /**************************************/ 2 | /* Vendor JavaScript files supervisor */ 3 | /**************************************/ 4 | 5 | /* Third party */ 6 | 7 | //= ../../bower_components/jquery/dist/jquery.js 8 | //= ../../bower_components/bootstrap/dist/js/bootstrap.js 9 | //= ../../bower_components/bootstrap-material-design/dist/js/ripples.js 10 | //= ../../bower_components/bootstrap-material-design/dist/js/material.js 11 | //= ../../bower_components/modernizr/modernizr.js 12 | //= ../../bower_components/social-likes/src/social-likes.js 13 | //= ../../bower_components/css_browser_selector/css_browser_selector.js 14 | -------------------------------------------------------------------------------- /src/styles/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/styles/common/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/styles/common/_png-sprite.less: -------------------------------------------------------------------------------- 1 | /* 2 | LESS variables are information about icon's compiled state, stored under its original file name 3 | 4 | .icon-home { 5 | width: @icon-home-width; 6 | } 7 | 8 | The large array-like variables contain all information about a single icon 9 | @icon-home: x y offset_x offset_y width height total_width total_height image_path name; 10 | 11 | At the bottom of this section, we provide information about the spritesheet itself 12 | @spritesheet: width height image @spritesheet-sprites; 13 | */ 14 | @sprite-html5-name: sprite__html5; 15 | @sprite-html5-x: 0px; 16 | @sprite-html5-y: 0px; 17 | @sprite-html5-offset-x: 0px; 18 | @sprite-html5-offset-y: 0px; 19 | @sprite-html5-width: 32px; 20 | @sprite-html5-height: 32px; 21 | @sprite-html5-total-width: 32px; 22 | @sprite-html5-total-height: 32px; 23 | @sprite-html5-image: '../img/sprites/png/png-sprite.png'; 24 | @sprite-html5: 0px 0px 0px 0px 32px 32px 32px 32px '../img/sprites/png/png-sprite.png' sprite__html5; 25 | @sprite-html5-2x-name: sprite__html5-2x; 26 | @sprite-html5-2x-x: 0px; 27 | @sprite-html5-2x-y: 0px; 28 | @sprite-html5-2x-offset-x: 0px; 29 | @sprite-html5-2x-offset-y: 0px; 30 | @sprite-html5-2x-width: 64px; 31 | @sprite-html5-2x-height: 64px; 32 | @sprite-html5-2x-total-width: 64px; 33 | @sprite-html5-2x-total-height: 64px; 34 | @sprite-html5-2x-image: '../img/sprites/png/png-sprite-2x.png'; 35 | @sprite-html5-2x: 0px 0px 0px 0px 64px 64px 64px 64px '../img/sprites/png/png-sprite-2x.png' sprite__html5-2x; 36 | @spritesheet-width: 32px; 37 | @spritesheet-height: 32px; 38 | @spritesheet-image: '../img/sprites/png/png-sprite.png'; 39 | @spritesheet-sprites: @sprite-html5; 40 | @spritesheet: 32px 32px '../img/sprites/png/png-sprite.png' @spritesheet-sprites; 41 | @retina-spritesheet-width: 64px; 42 | @retina-spritesheet-height: 64px; 43 | @retina-spritesheet-image: '../img/sprites/png/png-sprite-2x.png'; 44 | @retina-spritesheet-sprites: @sprite-html5-2x; 45 | @retina-spritesheet: 64px 64px '../img/sprites/png/png-sprite-2x.png' @retina-spritesheet-sprites; 46 | 47 | /* 48 | These "retina group" variables are mappings for the naming and pairing of normal and retina sprites. 49 | 50 | The list formatted variables are intended for mixins like `retina-sprite` and `retina-sprites`. 51 | */ 52 | @sprite-html5-group-name: sprite__html5; 53 | @sprite-html5-group: sprite__html5 @sprite-html5 @sprite-html5-2x; 54 | @retina-groups: @sprite-html5-group; 55 | 56 | /* 57 | The provided classes are intended to be used with the array-like variables 58 | 59 | .icon-home { 60 | .sprite-width(@icon-home); 61 | } 62 | .icon-email { 63 | .sprite(@icon-email); 64 | } 65 | */ 66 | .sprite-width(@sprite) { 67 | width: extract(@sprite, 5); 68 | } 69 | 70 | .sprite-height(@sprite) { 71 | height: extract(@sprite, 6); 72 | } 73 | 74 | .sprite-position(@sprite) { 75 | @sprite-offset-x: extract(@sprite, 3); 76 | @sprite-offset-y: extract(@sprite, 4); 77 | background-position: @sprite-offset-x @sprite-offset-y; 78 | } 79 | 80 | .sprite-image(@sprite) { 81 | @sprite-image: extract(@sprite, 9); 82 | @sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`; 83 | background-image: url(@sprite-image-bare); 84 | } 85 | 86 | .sprite(@sprite) { 87 | .sprite-image(@sprite); 88 | .sprite-position(@sprite); 89 | .sprite-width(@sprite); 90 | .sprite-height(@sprite); 91 | } 92 | 93 | /* 94 | The `retina-sprite` class sets up rules and a media query for a sprite/retina sprite. 95 | It should be used with a "retina group" variable. 96 | 97 | The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/ 98 | 99 | @icon-home-group: 'icon-home' @icon-home @icon-home-2x; 100 | 101 | .icon-home { 102 | .retina-sprite(@icon-home-group); 103 | } 104 | */ 105 | .sprite-background-size(@sprite) { 106 | @sprite-total-width: extract(@sprite, 7); 107 | @sprite-total-height: extract(@sprite, 8); 108 | background-size: @sprite-total-width @sprite-total-height; 109 | } 110 | 111 | .retina-sprite(@retina-group) { 112 | @normal-sprite: extract(@retina-group, 2); 113 | @retina-sprite: extract(@retina-group, 3); 114 | .sprite(@normal-sprite); 115 | 116 | @media (-webkit-min-device-pixel-ratio: 2), 117 | (min-resolution: 192dpi) { 118 | .sprite-image(@retina-sprite); 119 | .sprite-background-size(@normal-sprite); 120 | } 121 | } 122 | 123 | /* 124 | The `.sprites` mixin generates identical output to the CSS template 125 | but can be overridden inside of LESS 126 | 127 | This must be run when you have at least 2 sprites. 128 | If run with a single sprite, then there will be reference errors. 129 | 130 | .sprites(@spritesheet-sprites); 131 | */ 132 | .sprites(@sprites, @i: 1) when (@i <= length(@sprites)) { 133 | @sprite: extract(@sprites, @i); 134 | @sprite-name: extract(@sprite, 10); 135 | .@{sprite-name} { 136 | .sprite(@sprite); 137 | } 138 | .sprites(@sprites, @i + 1); 139 | } 140 | 141 | /* 142 | The `.retina-sprites` mixin generates a CSS rule and media query for retina groups 143 | This yields the same output as CSS retina template but can be overridden in LESS 144 | 145 | .retina-sprites(@retina-groups); 146 | */ 147 | .retina-sprites(@retina-groups, @i: 1) when (@i <= length(@retina-groups)) { 148 | @retina-group: extract(@retina-groups, @i); 149 | @sprite-name: extract(@retina-group, 1); 150 | .@{sprite-name} { 151 | .retina-sprite(@retina-group); 152 | } 153 | .retina-sprites(@retina-groups, @i + 1); 154 | } 155 | -------------------------------------------------------------------------------- /src/styles/common/_svg-sprite-less.tpl: -------------------------------------------------------------------------------- 1 | {{#sprites}} 2 | .svg-sprite--{{fileName}} { 3 | background-image: url("{{{cssPathSvg}}}"); 4 | background-position: {{x}}{{units}} {{y}}{{units}}; 5 | width: {{w}}{{units}}; 6 | height: {{h}}{{units}}; 7 | background-repeat: no-repeat; 8 | background-size: {{width}}{{units}} {{height}}{{units}}; 9 | {{#cssPathNoSvg}} 10 | .no-svg & { 11 | background-image: url("{{{cssPathNoSvg}}}"); 12 | } 13 | {{/cssPathNoSvg}} 14 | } 15 | {{/sprites}} 16 | 17 | -------------------------------------------------------------------------------- /src/styles/common/_svg-sprite-sass.tpl: -------------------------------------------------------------------------------- 1 | %sprite:before { 2 | content: ' '; 3 | background-image: url("{{{cssPathSvg}}}"); 4 | background-repeat: no-repeat; 5 | background-size: {{width}}{{units}} {{height}}{{units}}; 6 | display: inline-block; 7 | {{#cssPathNoSvg}} 8 | .no-svg & { 9 | background-image: url("{{{cssPathNoSvg}}}"); 10 | } 11 | {{/cssPathNoSvg}} 12 | } 13 | 14 | {{#sprites}} 15 | .sprite__{{fileName}}:before { 16 | @extend %sprite; 17 | background-position: {{x}}{{units}} {{y}}{{units}}; 18 | width: {{w}}{{units}}; 19 | height: {{h}}{{units}}; 20 | } 21 | {{/sprites}} -------------------------------------------------------------------------------- /src/styles/common/_svg-sprite.less: -------------------------------------------------------------------------------- 1 | .svg-sprite--html5 { 2 | background-image: url("../img/sprites/svg/svg-sprite.svg"); 3 | background-position: 0px 0px; 4 | width: 47px; 5 | height: 47px; 6 | background-repeat: no-repeat; 7 | background-size: 47px 47px; 8 | .no-svg & { 9 | background-image: url("../img/sprites/svg/svg-sprite.png"); 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/styles/common/_variables.less: -------------------------------------------------------------------------------- 1 | /***************************************************/ 2 | /* Set custom or change third-party Less variables */ 3 | /***************************************************/ 4 | 5 | /* Third party */ 6 | @fa-font-path: "./fonts"; // Path to fonts in Font-Awesome -------------------------------------------------------------------------------- /src/styles/common/google-prettify.less: -------------------------------------------------------------------------------- 1 | .prettyprint { 2 | white-space: inherit; 3 | ol li { 4 | list-style-type: inherit; 5 | } 6 | } -------------------------------------------------------------------------------- /src/styles/common/icons.less: -------------------------------------------------------------------------------- 1 | .png-sprite{ 2 | &:before{ 3 | content: ''; 4 | display: inline-block; 5 | } 6 | 7 | &--html5:before{ 8 | .sprite(@sprite-html5); 9 | } 10 | 11 | &--html5-retina:before{ 12 | .retina-sprite(@sprite-html5-group) 13 | } 14 | } -------------------------------------------------------------------------------- /src/styles/common/my-bootstrap-custom.less: -------------------------------------------------------------------------------- 1 | .navbar .navbar-nav>li>iframe { 2 | margin-top: 20px; 3 | margin-left: 5px; 4 | } 5 | 6 | .navbar .navbar-nav>li>.social-likes{ 7 | margin-top: 15px!important; 8 | margin-left: 15px!important; 9 | } -------------------------------------------------------------------------------- /src/styles/common/svg-icons.less: -------------------------------------------------------------------------------- 1 | .svg-sprite{ 2 | &:before{ 3 | content: ''; 4 | display: inline-block; 5 | width: 32px!important; 6 | height: 32px!important; 7 | background-size: contain!important; 8 | } 9 | 10 | &--html5-icon:before{ 11 | .svg-sprite--html5(); 12 | } 13 | 14 | } -------------------------------------------------------------------------------- /src/styles/fonts/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/styles/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/styles/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/styles/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/styles/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/styles/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/styles/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/styles/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/styles/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/styles/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Enkil/template-frontend/df6f854069d8014d2e9df1c7c2fc3666cff4bdd6/src/styles/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/styles/pages--external/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/styles/pages--internal/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) -------------------------------------------------------------------------------- /src/styles/style.less: -------------------------------------------------------------------------------- 1 | /**************************************/ 2 | /* Styles (LESS/CSS) files supervisor */ 3 | /**************************************/ 4 | 5 | /* Third party */ 6 | //@import "../../bower_components/bootstrap/less/bootstrap.less"; 7 | @import "../../bower_components/bootstrap-material-design/less/material.less"; 8 | @import "../../bower_components/bootstrap-material-design/less/roboto.less"; 9 | @import "../../bower_components/bootstrap-material-design/less/ripples.less"; 10 | //@import "../../bower_components/bootstrap-material-design/less/material-fullpalette.less"; 11 | //@import "../../bower_components/bootstrap-material-design/dist/css/material.min.css"; 12 | //@import "../../bower_components/bootstrap-material-design/dist/css/roboto.min.css"; 13 | //@import "../../bower_components/bootstrap-material-design/dist/css/ripples.min.css"; 14 | @import "../../bower_components/font-awesome/less/font-awesome.less"; 15 | @import "../../bower_components/social-likes/social-likes_classic.css"; 16 | 17 | /* Custom */ 18 | @import "common/_variables.less"; 19 | @import "common/_png-sprite.less"; 20 | @import "common/_svg-sprite.less"; 21 | @import "common/icons.less"; 22 | @import "common/svg-icons.less"; 23 | @import "common/google-prettify.less"; 24 | @import "common/my-bootstrap-custom.less"; 25 | 26 | 27 | --------------------------------------------------------------------------------