├── .gitattributes
├── .gitignore
├── README.md
├── bower.json
├── gulpfile.js
├── local
    └── templates
    │   └── main
    │       ├── fonts
    │           ├── SegoeUIRegular.eot
    │           ├── SegoeUIRegular.ttf
    │           └── SegoeUIRegular.woff
    │       ├── footer.php
    │       ├── header.php
    │       ├── images
    │           ├── krayt.png
    │           └── sprite.png
    │       ├── script.js
    │       └── template_styles.css
├── package.json
└── src
    ├── fonts
        ├── SegoeUIRegular.eot
        ├── SegoeUIRegular.ttf
        └── SegoeUIRegular.woff
    ├── images
        └── krayt.png
    ├── js
        ├── partials
        │   └── app.js
        └── script.js
    ├── sprite-svg-template.scss
    ├── sprite-svg
        └── done.svg
    ├── sprite-template.scss
    ├── sprite
        └── krayt.png
    └── styles
        ├── partials
            ├── fonts.scss
            ├── functions.scss
            ├── mixin.scss
            ├── sprite-svg.scss
            ├── sprite.scss
            └── variables.scss
        └── template_styles.scss


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .idea
 2 | node_modules
 3 | bower_components
 4 | bitrix
 5 | upload
 6 | 
 7 | local/templates/main/fonts
 8 | local/templates/main/images
 9 | local/templates/main/script.js
10 | local/templates/main/template_styles.css


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # frontend-bitrix with bootstrap-sass
 2 | for fast frontend-develop on bitrix<br>
 3 | <b>development template should be in "local"</b>
 4 | 
 5 | <h3>1. Place the files in the root</h3>
 6 | <h3>2. You need execute several commands:</h3>
 7 | <ul>
 8 |   <li>npm install or npm i</li>
 9 |   <li>bower install or bower i</li>
10 |   <li>gulp</li>
11 | </ul>
12 | 
13 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend-bitrix",
 3 |   "version": "0.0.1",
 4 |   "authors": [
 5 |     "jmaks1 <my.mailname@mail.ru>"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |     "jquery": "~2.1.4",
17 |     "bootstrap-sass": "~3.3.5"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // init
  4 | var gulp        = require('gulp'),
  5 |     watch       = require('gulp-watch'),        // Наблюдение за изменениями файлов
  6 |     prefixer    = require('gulp-autoprefixer'), // Автоматически добавляет вендорные префиксы к CSS свойствам
  7 |     uglify      = require('gulp-uglify'),       // Сжимать наш JS
  8 |     rigger      = require('gulp-rigger'),       // Позволяет импортировать один файл в другой простой конструкцией
  9 |     sass        = require('gulp-sass'),         // для компиляции нашего SCSS кода
 10 |     sourcemaps  = require('gulp-sourcemaps'),   // Для генерации css sourscemaps, помогает нам при отладке кода
 11 |     cssmin      = require('gulp-minify-css'),   // Сжатие CSS кода
 12 |     imagemin    = require('gulp-imagemin'),     // Сжатие картинок
 13 |     pngquant    = require('imagemin-pngquant'), // Сжатие картинок | работа с PNG
 14 |     plumber     = require('gulp-plumber'),      // Ловим ошибки, чтобы не прервался watch
 15 |     svgSprite   = require('gulp-svg-sprite'),   // Создаем спрайт из svg
 16 |     svgmin      = require('gulp-svgmin'),       // оптимизируем наш svg
 17 |     svg2png     = require('gulp-svg2png'),      // Создадим альтернативный спрайт из svg в png
 18 |     spritesmith = require('gulp.spritesmith');  // Создание png спрайтов
 19 | 
 20 | 
 21 | // write routs
 22 | var path = {
 23 |     build: {
 24 |         js:            'local/templates/main/',
 25 |         styles:        'local/templates/main/',
 26 |         images:        'local/templates/main/images/',
 27 |         fonts:         'local/templates/main/fonts/',
 28 |         fontBootstrap: 'local/templates/main/fonts/bootstrap/'
 29 |     },
 30 |     src: {
 31 |         js:                'src/js/*.*',
 32 |         styles:            'src/styles/*.*',
 33 |         stylesPartials:    'src/styles/partials/',
 34 |         images:            'src/images/**/*.*',
 35 |         sprite:            'src/sprite/*.*',
 36 |         spriteTemplate:    'src/sprite-template.scss',
 37 |         spriteSvg:         'src/sprite-svg/*.*',
 38 |         spriteSvgTemplate: 'src/sprite-svg-template.scss',
 39 |         fonts:             'src/fonts/**/*.*',
 40 |         fontBootstrap:     'bower_components/bootstrap-sass/assets/fonts/bootstrap/*.*'
 41 |     },
 42 |     watch: {
 43 |         js:        'src/js/**/*.js',
 44 |         styles:    'src/styles/**/*.scss',
 45 |         images:    'src/images/**/*.*',
 46 |         sprite:    'src/sprite/*.*',
 47 |         spriteSvg: 'src/sprite-svg/*.*',
 48 |         fonts:     'src/fonts/**/*.*'
 49 |     }
 50 | };
 51 | 
 52 | 
 53 | 
 54 | // javascript
 55 | gulp.task('js:build', function () {
 56 |     gulp.src(path.src.js)               // Найдем наш main файл
 57 |         .pipe(plumber())
 58 |         .pipe(rigger())                 // Прогоним через rigger
 59 |         .pipe(sourcemaps.init())        // Инициализируем sourcemap
 60 |         .pipe(uglify())                 // Сожмем наш js
 61 |         .pipe(sourcemaps.write())       // Пропишем карты
 62 |         .pipe(plumber.stop())
 63 |         .pipe(gulp.dest(path.build.js)) // Выплюнем готовый файл в build
 64 | });
 65 | // png sprite
 66 | gulp.task('sprite:build', function() {
 67 |     var spriteData =
 68 |         gulp.src(path.src.sprite)
 69 |             .pipe(spritesmith({
 70 |                 imgName: 'sprite.png',
 71 |                 cssName: 'sprite.scss',
 72 |                 cssFormat: 'scss',
 73 |                 algorithm: 'binary-tree',
 74 |                 padding: 5,
 75 |                 cssTemplate: path.src.spriteTemplate,
 76 |                 cssVarMap: function(sprite) {
 77 |                     sprite.name = 's-' + sprite.name
 78 |                 }
 79 |             }));
 80 | 
 81 |     spriteData.img.pipe(gulp.dest(path.build.images));
 82 |     spriteData.css.pipe(gulp.dest(path.src.stylesPartials));
 83 | });
 84 | // svg sprite
 85 | gulp.task('spriteSvg:build', function () {
 86 |     gulp.src(path.src.spriteSvg)
 87 |         .pipe(plumber())
 88 |         .pipe(svgmin())
 89 |         .pipe(svgSprite({
 90 |             "shape": {
 91 |                 "spacing": {
 92 |                     "padding": 5,
 93 |                 },
 94 |             },
 95 |             "mode": {
 96 |                 "css": {
 97 |                     "dest": "./",
 98 |                     "layout": "diagonal",
 99 |                     "sprite": path.build.images+"sprite-svg.svg",
100 |                     "bust": false,
101 |                     "render": {
102 |                         "scss": {
103 |                             "dest": path.src.stylesPartials+'sprite-svg.scss',
104 |                             "template": path.src.spriteSvgTemplate
105 |                         }
106 |                     }
107 |                 }
108 |             }
109 |         }))
110 |         .pipe(plumber.stop())
111 |         .pipe(gulp.dest("./"));
112 | });
113 | // svg to png sprite | for ie
114 | gulp.task('svg2png', function() {
115 |     gulp.src(path.build.images+"sprite-svg.svg")
116 |         .pipe(plumber())
117 |         .pipe(svg2png())
118 |         .pipe(plumber.stop())
119 |         .pipe(gulp.dest(path.build.images));
120 | });
121 | // images
122 | gulp.task('image:build', function () {
123 |     gulp.src(path.src.images)
124 |         .pipe(plumber())
125 |         .pipe(imagemin({
126 |             progressive: true,
127 |             svgoPlugins: [{removeViewBox: false}],
128 |             use: [pngquant()],
129 |             interlaced: true
130 |         }))
131 |         .pipe(plumber.stop())
132 |         .pipe(gulp.dest(path.build.images))
133 | });
134 | // move bootstrap icons(font) to build
135 | gulp.task('icons:build', function() {
136 |     gulp.src(path.src.fontBootstrap)
137 |         .pipe(gulp.dest(path.build.fontBootstrap));
138 | });
139 | // move custom fonts to build
140 | gulp.task('fonts:build', function() {
141 |     gulp.src(path.src.fonts)
142 |         .pipe(gulp.dest(path.build.fonts))
143 | });
144 | // styles
145 | gulp.task('styles:build', function () {
146 |     gulp.src(path.src.styles)               // Выберем наш main.scss
147 |         .pipe(plumber())
148 |         .pipe(sourcemaps.init())            // То же самое что и с js
149 |         .pipe(sass())                       // Скомпилируем
150 |         .pipe(prefixer())                   // Добавим вендорные префиксы
151 |         .pipe(cssmin())                     // Сожмем
152 |         .pipe(sourcemaps.write())           // Пропишем карты
153 |         .pipe(plumber.stop())
154 |         .pipe(gulp.dest(path.build.styles)) // И в build
155 | });
156 | 
157 | 
158 | gulp.task('build', [
159 |     'js:build',
160 |     'sprite:build',
161 |     'spriteSvg:build',
162 |     'image:build',
163 |     'icons:build',
164 |     'fonts:build',
165 |     'styles:build',
166 | ]);
167 | 
168 | gulp.task('watch', function(){
169 |     watch([path.watch.js], function(event, cb) {
170 |         gulp.start('js:build');
171 |     });
172 |     watch([path.watch.sprite], function(event, cb) {
173 |         gulp.start('sprite:build');
174 |     });
175 |     watch([path.watch.spriteSvg], function(event, cb) {
176 |         gulp.start('spriteSvg:build');
177 |     });
178 |     // watch for sprite-svg
179 |     watch([path.build.images+"sprite-svg.svg"], function(event, cb) {
180 |         gulp.start('svg2png');
181 |     });
182 |     watch([path.watch.images], function(event, cb) {
183 |         gulp.start('image:build');
184 |     });
185 |     watch([path.watch.fonts], function(event, cb) {
186 |         gulp.start('fonts:build');
187 |     });
188 |     watch([path.watch.styles], function(event, cb) {
189 |         gulp.start('styles:build');
190 |     });
191 | });
192 | 
193 | gulp.task('default', ['build', 'watch']);


--------------------------------------------------------------------------------
/local/templates/main/fonts/SegoeUIRegular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/local/templates/main/fonts/SegoeUIRegular.eot


--------------------------------------------------------------------------------
/local/templates/main/fonts/SegoeUIRegular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/local/templates/main/fonts/SegoeUIRegular.ttf


--------------------------------------------------------------------------------
/local/templates/main/fonts/SegoeUIRegular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/local/templates/main/fonts/SegoeUIRegular.woff


--------------------------------------------------------------------------------
/local/templates/main/footer.php:
--------------------------------------------------------------------------------
1 | <?php if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();?>
2 | 
3 | <!-- main scripts -->
4 | <script src="<?php echo SITE_TEMPLATE_PATH?>/script.js"></script>
5 | 
6 | 	</body>
7 | </html>


--------------------------------------------------------------------------------
/local/templates/main/header.php:
--------------------------------------------------------------------------------
 1 | <?php if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();?>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 	<head>
 5 | 		<meta charset="utf-8">
 6 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 		<title><?php $APPLICATION->ShowTitle(); ?></title>
 9 | 		<?php $APPLICATION->ShowHead(); ?>
10 | 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
11 | 		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
12 | 		<!--[if lt IE 9]>
13 | 			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
14 | 			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
15 | 		<![endif]-->
16 | 	</head>
17 | <body>
18 | <div id="panel">
19 | 	<?php $APPLICATION->ShowPanel();?>
20 | </div>
21 | 
22 | <h1 class="text-center"><span class="logo"></span> I <strike>hate</strike> love bitrix!</h1>
23 | 


--------------------------------------------------------------------------------
/local/templates/main/images/krayt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/local/templates/main/images/krayt.png


--------------------------------------------------------------------------------
/local/templates/main/images/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/local/templates/main/images/sprite.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend-bitrix",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "author": "jmaks",
 6 |   "license": "ISC",
 7 |   "dependencies": {
 8 |     "gulp": "^3.8.11",
 9 |     "gulp-watch": "^4.1.1",
10 |     "gulp-autoprefixer": "^2.1.0",
11 |     "gulp-uglify": "^1.1.0",
12 |     "gulp-rigger": "^0.5.8",
13 |     "gulp-sass": "^1.3.3",
14 |     "gulp-sourcemaps": "^1.5.0",
15 |     "gulp-minify-css": "^1.0.0",
16 |     "gulp-imagemin": "^2.2.1",
17 |     "imagemin-pngquant": "^4.0.0",
18 |     "gulp-plumber": "^1.0.1",
19 |     "gulp-svg-sprite": "^1.2.5",
20 |     "gulp-svgmin": "^1.1.2",
21 |     "gulp-svg2png": "^0.3.0",
22 |     "gulp.spritesmith": "^3.8.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/fonts/SegoeUIRegular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/src/fonts/SegoeUIRegular.eot


--------------------------------------------------------------------------------
/src/fonts/SegoeUIRegular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/src/fonts/SegoeUIRegular.ttf


--------------------------------------------------------------------------------
/src/fonts/SegoeUIRegular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/src/fonts/SegoeUIRegular.woff


--------------------------------------------------------------------------------
/src/images/krayt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/src/images/krayt.png


--------------------------------------------------------------------------------
/src/js/partials/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/src/js/partials/app.js


--------------------------------------------------------------------------------
/src/js/script.js:
--------------------------------------------------------------------------------
 1 | // include jquery
 2 | //= ../../bower_components/jquery/dist/jquery.min.js
 3 | 
 4 | // include bootstrap.js
 5 | //= ../../bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js
 6 | 
 7 | 
 8 | console.log("i'm a live!");
 9 | 
10 | 
11 | // another scripts
12 | //= partials/app.js


--------------------------------------------------------------------------------
/src/sprite-svg-template.scss:
--------------------------------------------------------------------------------
1 | $icons: (
2 |     sprite: (width: {{spriteWidth}}px, height: {{spriteHeight}}px, pngPath: 'images/sprite-svg.png', svgPath: 'images/sprite-svg.svg'),
3 | {{#shapes}}
4 |     {{base}}: (width: {{width.inner}}px, height: {{height.inner}}px, backgroundX: {{position.absolute.x}}px, backgroundY: {{position.absolute.y}}px),
5 | {{/shapes}});


--------------------------------------------------------------------------------
/src/sprite-svg/done.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="28.003px" height="19.999px" viewBox="0 0 28.003 19.999" enable-background="new 0 0 28.003 19.999" xml:space="preserve">
 6 | <path fill="#FFFFFF" d="M27.604,1.705l-1.297-1.302c-0.534-0.537-1.406-0.537-1.945,0L10.765,14.061L3.643,6.909
 7 | 	c-0.534-0.537-1.406-0.537-1.945,0L0.401,8.21c-0.534,0.536-0.534,1.412,0,1.953l9.388,9.427c0.27,0.271,0.616,0.408,0.968,0.408
 8 | 	s0.703-0.138,0.968-0.408L27.59,3.658C28.138,3.112,28.138,2.241,27.604,1.705z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/sprite-template.scss:
--------------------------------------------------------------------------------
1 | {{#items}}
2 | ${{name}}: {{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}';
3 | {{/items}}


--------------------------------------------------------------------------------
/src/sprite/krayt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmaks1/bitrix-frontend/9c165873f9710d0e0fd2be91fd81a879445f06cc/src/sprite/krayt.png


--------------------------------------------------------------------------------
/src/styles/partials/fonts.scss:
--------------------------------------------------------------------------------
 1 | /* font-family: "Segoe"; */
 2 | @font-face {
 3 |     font-family: "Segoe";
 4 |     src: url("fonts/SegoeUIRegular.eot");
 5 |     src: url("fonts/SegoeUIRegular.eot?#iefix")format("embedded-opentype"),
 6 |     url("fonts/SegoeUIRegular.woff") format("woff"),
 7 |     url("fonts/SegoeUIRegular.ttf") format("truetype");
 8 |     font-style: normal;
 9 |     font-weight: 500;
10 | }


--------------------------------------------------------------------------------
/src/styles/partials/functions.scss:
--------------------------------------------------------------------------------
 1 | // transform px to em
 2 | @function px2em($px, $base-font-size: $baseFontSize) {
 3 |     @if unitless($px) {
 4 |         @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
 5 |         @return px2em($px + 0px); // That may fail.
 6 |     } @else if unit($px) == em {
 7 |         @return $px;
 8 |     }
 9 |     @return ($px / $base-font-size) * 1em;
10 | }
11 | 
12 | // Gets an attribute from the sass map
13 | @function sprite-attr($icon, $attr) {
14 |     $newIcon: map-get($icons, $icon);
15 |     @if $newIcon == null {
16 |         @warn "Can't find an icon with the name #{$icon}";
17 |     }
18 |     @return map-get($newIcon, $attr);
19 | }
20 | @function icon-attr($icon) {
21 |     $attr: (
22 |         width: sprite-attr($icon, width),
23 |         height: sprite-attr($icon, height),
24 |         x: sprite-attr($icon, backgroundX),
25 |         y: sprite-attr($icon, backgroundY)
26 |     );
27 | 
28 |     @return $attr;
29 | }
30 | 
31 | // Simple functions for pick from the sass map
32 | // fonts
33 | @function font($key) {
34 |   @if map-has-key($fonts, $key) {
35 |     @return map-get($fonts, $key);
36 |   }
37 | 
38 |   @warn "Unknown `#{$key}` in $fonts.";
39 |   @return null;
40 | }
41 | 
42 | // colors
43 | @function color($key) {
44 |   @if map-has-key($colors, $key) {
45 |     @return map-get($colors, $key);
46 |   }
47 | 
48 |   @warn "Unknown `#{$key}` in $colors.";
49 |   @return null;
50 | }
51 | 
52 | // z-index
53 | @function z($key) {
54 |   @if map-has-key($z-layers, $key) {
55 |     @return map-get($z-layers, $key);
56 |   }
57 | 
58 |   @warn "Unknown `#{$key}` in $z-layers.";
59 |   @return null;
60 | }
61 | 
62 | // height
63 | @function height($key) {
64 |   @if map-has-key($height, $key) {
65 |     @return map-get($height, $key);
66 |   }
67 | 
68 |   @warn "Unknown `#{$key}` in $height.";
69 |   @return null;
70 | }
71 | 
72 | //width
73 | @function width($key) {
74 |   @if map-has-key($width, $key) {
75 |     @return map-get($width, $key);
76 |   }
77 | 
78 |   @warn "Unknown `#{$key}` in $width.";
79 |   @return null;
80 | }
81 | 


--------------------------------------------------------------------------------
/src/styles/partials/mixin.scss:
--------------------------------------------------------------------------------
  1 | // Simple png sprite
  2 | @mixin spriteWidth($sprite) { width: nth($sprite, 5); }
  3 | @mixin spriteHeight($sprite) { height: nth($sprite, 6); }
  4 | @mixin spritePosition($sprite) { background-position: nth($sprite, 3) nth($sprite, 4); }
  5 | @mixin spriteImage($sprite) { background-image: url(images/ nth($sprite, 9)); }
  6 | @mixin sprite($sprite) {
  7 | 	@include spriteImage($sprite);
  8 | 	@include spritePosition($sprite);
  9 | 	@include spriteWidth($sprite);
 10 | 	@include spriteHeight($sprite);
 11 | 	display: inline-block;
 12 | }
 13 | 
 14 | // Svg sprite
 15 | // Sets background image and size with IE fallback
 16 | %sprite-svg {
 17 |     display: inline-block;
 18 |     background-image: url(map-get($spriteSvg, svgPath));
 19 |     background-size: px2em(map-get($spriteSvg, width)) px2em(map-get($spriteSvg, height));
 20 | }
 21 | %ie-sprite-svg {
 22 |     background-image: url(map-get($spriteSvg, pngPath));
 23 | }
 24 | @mixin ie-spriteSvg($icon, $type: all) {
 25 | 	$iconMap: icon-attr($icon);
 26 | 
 27 | 	@if $ieSprite {
 28 | 		#{$ieSprite} & {
 29 | 			@if $type == all {
 30 | 				// Shares the PNG background
 31 | 				@extend %ie-sprite-svg;
 32 | 			}
 33 | 			// Outputs dimensions of icon
 34 | 			// @if $type == all or $type == size {
 35 | 			// 	width: map-get($iconMap, width);
 36 | 			// 	height: map-get($iconMap, height);
 37 | 			// }
 38 | 			// // Outputs background position
 39 | 			// @if $type == all or $type == bg {
 40 | 			// 	background-position: (map-get($iconMap, x)) (map-get($iconMap, y));
 41 | 			// }
 42 | 		}
 43 | 	}
 44 | }
 45 | // For use with the gulp sprite plugin
 46 | @mixin spriteSvg($icon, $type: all) {
 47 |     @if $type == all {
 48 |         // Shares the backgrounds
 49 |         @extend %sprite-svg;
 50 |     }
 51 | 
 52 |     $iconMap: icon-attr($icon);
 53 | 
 54 |     // Outputs dimensions in em
 55 |     @if $type == all or $type == width {
 56 |         width: px2em(map-get($iconMap, width) + 1);
 57 |     }
 58 |     // Outputs dimensions in em
 59 |     @if $type == all or $type == height {
 60 |         height: px2em(map-get($iconMap, height) + 1);
 61 |     }
 62 | 
 63 |     // Outputs background position in em | -5px because spacing:5
 64 |     @if $type == all or $type == bg {
 65 |         background-position: px2em(map-get($iconMap, x) - 5) px2em(map-get($iconMap, y) - 5);
 66 |     }
 67 | 
 68 |     // Add ie fallback
 69 | 	@include ie-spriteSvg($icon, $type);
 70 | }
 71 | 
 72 | // breakpoints with bootstrap sizes
 73 | @mixin breakpoint($point) {
 74 | 	@if $point == lg {
 75 | 		@media (min-width: $screen-lg-min) { @content ; }
 76 | 	}
 77 | 	@else if $point == md {
 78 | 		@media (min-width: $screen-md-min) { @content ; }
 79 | 	}
 80 | 	@else if $point == sm {
 81 | 		@media (min-width: $screen-sm-min) { @content ; }
 82 | 	}
 83 | 	@else if $point == xs {
 84 | 		@media (max-width: $screen-xs-max) { @content ; }
 85 | 	}
 86 | }
 87 | 
 88 | @mixin btn($height, $c-bg, $c-text: #fff, $font-size: 14px, $display: inline-block, $rounded: true) {
 89 | 	//@warn "height = #{$height}";
 90 | 	//@debug "height = #{$height}";
 91 | 	@if $rounded {
 92 | 		border-radius: $height / 2;
 93 | 	}
 94 | 	height: $height;
 95 | 	line-height:$height;
 96 | 	padding:0 $height / 2;
 97 | 	display: $display;
 98 | 	background-color:$c-bg;
 99 | 	color: $c-text;
100 | 	font-size: px2em($font-size);
101 | 	text-align: center;
102 | 	vertical-align: middle;
103 | 	-ms-touch-action: manipulation;
104 | 	touch-action: manipulation;
105 | 	cursor: pointer;
106 | 	border: 1px solid transparent;
107 | 	white-space: nowrap;
108 | 	-webkit-user-select: none;
109 | 	-moz-user-select: none;
110 | 	-ms-user-select: none;
111 | 	user-select: none;
112 | 	text-decoration:none;
113 | 	//@include transition(background-color $transition ease);
114 | 	&:hover,
115 | 	&:active,
116 | 	&:focus {
117 | 		color: $c-text;
118 | 		text-decoration:none;
119 | 		outline: none;
120 | 	}
121 | }
122 | 
123 | @mixin format-text($font-size: 14px, $font-weight: 500, $color: false, $line-height: false) {
124 | 	font-size: px2em($font-size);
125 | 	font-weight: $font-weight;
126 | 
127 | 	@if $color {
128 | 		color:$color;
129 | 	}
130 | 
131 | 	@if $line-height {
132 | 		line-height: px2em($line-height);
133 | 	}
134 | 	@else {
135 | 		line-height: 100%;
136 | 	}
137 | }
138 | 
139 | 
140 | @mixin center {
141 | 	position:absolute;
142 | 	margin:auto;
143 | 	left:0;
144 | 	top:0;
145 | 	right:0;
146 | 	bottom:0;
147 | }
148 | 
149 | // add muted bg
150 | @mixin muted($color: #000, $opacity: 0.5) {
151 | 	position:relative;
152 | 	&:before {
153 | 		content:'';
154 | 		position:absolute;
155 | 		left:0;
156 | 		right:0;
157 | 		top:0;
158 | 		bottom:0;
159 | 		background-color:rgba($color, $opacity);
160 | 	}
161 | }
162 | 
163 | @mixin background-type($size: cover) {
164 | 	background-position: center center;
165 | 	background-size: $size;
166 | 	background-repeat: no-repeat;
167 | }


--------------------------------------------------------------------------------
/src/styles/partials/sprite-svg.scss:
--------------------------------------------------------------------------------
1 | $icons: (
2 |     sprite: (width: 38px, height: 30px, pngPath: 'images/sprite-svg.png', svgPath: 'images/sprite-svg.svg'),
3 |     done: (width: 28px, height: 20px, backgroundX: 0px, backgroundY: 0px),
4 | );


--------------------------------------------------------------------------------
/src/styles/partials/sprite.scss:
--------------------------------------------------------------------------------
1 | $s-krayt: 0px, 0px, 0px, 0px, 40px, 40px, 40px, 40px, 'sprite.png';
2 | 


--------------------------------------------------------------------------------
/src/styles/partials/variables.scss:
--------------------------------------------------------------------------------
 1 | $fonts: (
 2 | 	openSans: ('Open Sans', sans-serif),
 3 | 	verdana: (Verdana, Geneva, sans-serif),
 4 | );
 5 | 
 6 | $colors: (
 7 | 	black: #000000,
 8 | 	egg: #00cccc,
 9 | 	white: #ffffff
10 | );
11 | 
12 | $z-layers: (
13 |   bottomless-pit: -9999,
14 |   default: 1,
15 |   aboveBx: 1030,
16 | );
17 | 
18 | //bitrix ie class
19 | $ieSprite: '.bx-ie9' !default;
20 | $spriteSvg: map-get($icons, sprite) !default;
21 | 
22 | $baseFontSize: 14px !default;
23 | $baseLineHeight: 24px !default;


--------------------------------------------------------------------------------
/src/styles/template_styles.scss:
--------------------------------------------------------------------------------
 1 | // set path for icons
 2 | $icon-font-path: "fonts/bootstrap/";
 3 | // include bootstrap sass
 4 | @import "../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
 5 | 
 6 | 
 7 | // include fonts
 8 | @import "partials/fonts";
 9 | // include sprite
10 | @import "partials/sprite";
11 | // include sprite-svg
12 | @import "partials/sprite-svg";
13 | // include variables
14 | @import "partials/variables";
15 | // include functions
16 | @import "partials/functions";
17 | // include mixin
18 | @import "partials/mixin";
19 | 
20 | 
21 | body {
22 | 	font-family: font(verdana);
23 | 	color: color(egg);
24 | 	font-size: $baseFontSize;
25 | 	line-height: $baseLineHeight;
26 | }
27 | 
28 | /* custom styles
29 | -----------------------------*/
30 | 
31 | .logo {
32 | 	@include sprite($s-krayt);
33 | }
34 | 
35 | /* header styles
36 | -----------------------------*/
37 | 
38 | 
39 | /* content styles
40 | -----------------------------*/
41 | 
42 | 
43 | /* footer styles
44 | -----------------------------*/
45 | 


--------------------------------------------------------------------------------