├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── images ├── about │ ├── carol.svg │ ├── george.svg │ ├── martin.svg │ ├── nicole.svg │ ├── patricia.svg │ └── thomas.svg ├── articles │ ├── macbook-photo.jpg │ ├── macbook-promo-1.jpg │ ├── macbook-promo-2.jpg │ ├── macbook-promo-3.jpg │ ├── macbook-promo-4.jpg │ └── macos.jpg ├── avatar.jpg ├── brands │ ├── acer.svg │ ├── apple.svg │ ├── asus.svg │ ├── canon.svg │ ├── dell.svg │ ├── hp.svg │ ├── intel.svg │ ├── lenovo.svg │ ├── lg.svg │ ├── microsoft.svg │ ├── samsung.svg │ └── sony.svg ├── catalog │ ├── cameras.png │ ├── computers.svg │ ├── consoles.png │ ├── games.svg │ ├── laptops.png │ ├── phones.svg │ ├── photo.svg │ ├── smartphones.png │ ├── tablets.png │ ├── tv.svg │ └── watches.png ├── logo-inverse.svg ├── logo.svg ├── mastercard-securecode.svg ├── products │ ├── 1 │ │ ├── 1-add-1-large.jpg │ │ ├── 1-add-1-small.jpg │ │ ├── 1-add-2-large.jpg │ │ ├── 1-add-2-small.jpg │ │ ├── 1-add-3-large.jpg │ │ ├── 1-add-3-small.jpg │ │ ├── 1-add-4-large.jpg │ │ ├── 1-add-4-small.jpg │ │ ├── 1-large.jpg │ │ ├── 1-medium.jpg │ │ └── 1-small.jpg │ ├── 2 │ │ ├── 2-medium.jpg │ │ └── 2-small.jpg │ ├── 3 │ │ ├── 3-medium.jpg │ │ └── 3-small.jpg │ ├── 4 │ │ ├── 4-medium.jpg │ │ └── 4-small.jpg │ ├── 5 │ │ ├── 5-medium.jpg │ │ └── 5-small.jpg │ ├── 6 │ │ ├── 6-medium.jpg │ │ └── 6-small.jpg │ ├── 7 │ │ ├── 7-medium.jpg │ │ └── 7-small.jpg │ └── 8 │ │ ├── 8-medium.jpg │ │ └── 8-small.jpg ├── promo │ ├── ipad.jpg │ ├── iphone.jpg │ └── macbook-new.jpg └── verified-by-visa.svg ├── scripts ├── script.js ├── uikit-icons.js └── uikit.js ├── styles ├── _uikit.less ├── _uikit.theme.less ├── components │ └── mixin.less └── style.less └── templates ├── components ├── _navbar.pug └── _toolbar.pug ├── data └── _data.pug ├── layouts ├── _account.pug ├── _article.pug ├── _checkout.pug ├── _default.pug ├── _index.pug ├── _informational.pug └── _pages.pug ├── mixins ├── _article.pug ├── _icon.pug ├── _import.pug ├── _link-to-all.pug ├── _product-small.pug ├── _product.pug └── _quantity.pug ├── pages ├── 404.pug ├── about.pug ├── account.pug ├── article.pug ├── blog.pug ├── brands.pug ├── cart.pug ├── catalog.pug ├── category.pug ├── checkout.pug ├── compare.pug ├── contacts.pug ├── delivery.pug ├── faq.pug ├── favorites.pug ├── index.pug ├── news.pug ├── personal.pug ├── product.pug ├── settings.pug └── subcategory.pug └── partials ├── _article.pug ├── _cart-offcanvas.pug ├── _footer.pug ├── _head.pug ├── _header.pug ├── _nav-offcanvas.pug └── _products.pug /.gitignore: -------------------------------------------------------------------------------- 1 | dest 2 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Roman Chekurov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UIkit E-commerce Template 2 | 3 | Responsive e-commerce template containing catalog, filters, product page, shopping cart and other elements of the online store. Built with [UIkit](https://getuikit.com). 4 | 5 | Demo: https://chekromul.github.io/uikit-ecommerce-template 6 | 7 | Also you can see `Sass` port of this theme: [vkovic/uikit-computer-store-template](https://github.com/vkovic/uikit-computer-store-template) 8 | 9 | [![UIkit E-commerce Template](https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/gh-pages/images/preview.png "UIkit E-commerce Template")](https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/gh-pages/images/preview.png "UIkit E-commerce Template") 10 | 11 | ## Overview 12 | 13 | ### Technologies 14 | 15 | The project leverages: 16 | 17 | - [UIkit](https://getuikit.com) 18 | - [Pug](https://pugjs.org) 19 | - [Less](http://lesscss.org) 20 | - [Gulp](https://gulpjs.com) 21 | 22 | 23 | ### Browser Support 24 | | Chrome Chrome | IE IE | Edge Edge | Safari Safari | Firefox Firefox | 25 | | :---------: | :---------: | :---------: | :---------: | :---------: | 26 | | Yes | 11+ | Yes | Yes | Yes | 27 | 28 | ## Quick start 29 | 30 | ### What's included 31 | 32 | ``` 33 | uikit-ecommerce-store/ 34 | ├── src/ 35 | | ├── scripts/ 36 | │ | ├── script.js 37 | | ├── styles/ 38 | │ | ├── components/ 39 | | | ├── style.less 40 | | ├── templates/ 41 | │ | ├── components/ 42 | | | ├── data/ 43 | | | ├── layouts/ 44 | | | ├── mixins/ 45 | | | ├── pages/ 46 | | | | ├── index.pug 47 | | | ├── partials/ 48 | | ├── images/ 49 | 50 | ``` 51 | 52 | ### Build 53 | 54 | To clone and run this project, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](https://npmjs.com)) installed on your computer. From your command line: 55 | 56 | ```bash 57 | # Clone this repository 58 | $ git clone https://github.com/chekromul/uikit-ecommerce-template.git 59 | 60 | # Go into the repository 61 | $ cd uikit-ecommerce-template 62 | 63 | # Install dependencies 64 | $ npm install 65 | 66 | # Start 67 | $ gulp 68 | ``` 69 | 70 | ## Copyright and Credits 71 | 72 | [Shopping Categories Colection](https://thenounproject.com/jarosigrist/collection/shopping-categories) icons by Jaro Sigrist from Noun Project. Licensed under Creative Commons Attribution 3.0. 73 | 74 | ## License 75 | 76 | This software is licensed under the MIT License © [Roman Chekurov](https://github.com/chekromul) 77 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | less = require('gulp-less'), 3 | sync = require('browser-sync'), 4 | concat = require('gulp-concat'), 5 | del = require('del'), 6 | imagemin = require('gulp-imagemin'), 7 | pngquant = require('imagemin-pngquant'), 8 | cache = require('gulp-cache'), 9 | autoprefixer = require('autoprefixer'), 10 | postcss = require('gulp-postcss'), 11 | csso = require('gulp-csso'), 12 | pug = require('gulp-pug'), 13 | jsmin = require('gulp-jsmin'), 14 | ghPages = require('gulp-gh-pages'), 15 | include = require('gulp-include'); 16 | 17 | // HTML 18 | 19 | gulp.task('html', function() { 20 | return gulp.src(['src/templates/pages/**/*.pug']) 21 | .pipe(pug({ 22 | basedir: 'src/templates' 23 | })) 24 | .pipe(gulp.dest('dest')) 25 | .pipe(sync.stream()); 26 | }); 27 | 28 | // Styles 29 | 30 | gulp.task('styles', function() { 31 | return gulp.src(['src/styles/**/*.less', '!src/styles/**/_*.less']) 32 | .pipe(less({ relativeUrls: true })) 33 | .pipe(concat('style.css')) 34 | .pipe(postcss([autoprefixer({ browsers: 'last 2 versions' })])) 35 | .pipe(csso()) 36 | .pipe(gulp.dest('dest/styles')) 37 | .pipe(sync.stream({ 38 | once: true 39 | })); 40 | }); 41 | 42 | // Scripts 43 | 44 | gulp.task('scripts', function() { 45 | return gulp.src('src/scripts/*.js') 46 | .pipe(include({ 47 | extensions: 'js', 48 | hardFail: true, 49 | includePaths: [ 50 | __dirname + '/node_modules', 51 | __dirname + '/src/js' 52 | ] 53 | })) 54 | .pipe(jsmin()) 55 | .pipe(gulp.dest('dest/scripts')) 56 | .pipe(sync.stream({ 57 | once: true 58 | })); 59 | }); 60 | 61 | // Images 62 | 63 | gulp.task('images', function() { 64 | return gulp.src('src/images/**/*') 65 | .pipe(cache(imagemin({ 66 | interlaced: true, 67 | progressive: true, 68 | svgoPlugins: [{ removeViewBox: false }], 69 | use: [pngquant()] 70 | }))) 71 | .pipe(gulp.dest('dest/images')); 72 | }); 73 | 74 | // Copy 75 | 76 | gulp.task('copy', function() { 77 | return gulp.src([ 78 | 'src/*', 79 | 'src/fonts/*', 80 | '!src/images/*', 81 | '!src/styles/*', 82 | '!src/scripts/*' 83 | ], { 84 | base: 'src' 85 | }) 86 | .pipe(gulp.dest('dest')) 87 | .pipe(sync.stream({ 88 | once: true 89 | })); 90 | }); 91 | 92 | // Server 93 | 94 | gulp.task('server', function() { 95 | sync.init({ 96 | notify: false, 97 | //ui: false, 98 | //tunnel: true, 99 | server: { 100 | baseDir: 'dest' 101 | } 102 | }); 103 | }); 104 | 105 | // Clean 106 | 107 | gulp.task('clean', function() { 108 | return del.sync('dest'); 109 | }); 110 | 111 | // Clear 112 | 113 | gulp.task('clear', function() { 114 | return cache.clearAll(); 115 | }); 116 | 117 | // Watch 118 | 119 | gulp.task('watch:html', function() { 120 | return gulp.watch('src/templates/**/*.pug', gulp.series('html')); 121 | }); 122 | 123 | gulp.task('watch:styles', function() { 124 | return gulp.watch('src/styles/**/*.less', gulp.series('styles')); 125 | }); 126 | 127 | gulp.task('watch:scripts', function() { 128 | return gulp.watch('src/scripts/*.js', gulp.series('scripts')); 129 | }); 130 | 131 | gulp.task('watch:copy', function() { 132 | return gulp.watch([ 133 | 'src/*', 134 | 'src/fonts/*', 135 | '!src/images/*', 136 | '!src/styles/*', 137 | '!src/scripts/*' 138 | ], gulp.series('copy')); 139 | }); 140 | 141 | gulp.task('watch', gulp.parallel( 142 | 'watch:html', 143 | 'watch:styles', 144 | 'watch:scripts', 145 | 'watch:copy' 146 | )); 147 | 148 | // Build 149 | 150 | gulp.task('build', gulp.parallel( 151 | 'html', 152 | 'styles', 153 | 'scripts', 154 | 'copy' 155 | )); 156 | 157 | // Deploy 158 | 159 | gulp.task('deploy', function () { 160 | return gulp.src('./dest/**/*') 161 | .pipe(ghPages()) 162 | }); 163 | 164 | // Default 165 | 166 | gulp.task('default', gulp.series( 167 | 'build', 168 | gulp.parallel( 169 | 'watch', 170 | 'server' 171 | ) 172 | )); 173 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uikit-ecommerce-template", 3 | "version": "1.0.0", 4 | "description": "E-commerce template built with UIkIt", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gulp", 8 | "server": "gulp server", 9 | "watch": "gulp watch", 10 | "build": "gulp build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/chekromul/uikit-ecommerce-template.git" 15 | }, 16 | "author": "Roman Chekurov", 17 | "license": "MIT", 18 | "homepage": "https://github.com/chekromul/uikit-ecommerce-template", 19 | "devDependencies": { 20 | "autoprefixer": "^9.1.0", 21 | "browser-sync": "^2.24.6", 22 | "del": "^3.0.0", 23 | "gulp": "^4.0.0", 24 | "gulp-cache": "^1.0.2", 25 | "gulp-concat": "^2.6.1", 26 | "gulp-csso": "^3.0.1", 27 | "gulp-gh-pages": "^0.5.4", 28 | "gulp-imagemin": "^4.1.0", 29 | "gulp-include": "^2.3.1", 30 | "gulp-jsmin": "^0.1.5", 31 | "gulp-less": "^4.0.1", 32 | "gulp-postcss": "^7.0.1", 33 | "gulp-pug": "^4.0.1", 34 | "imagemin-pngquant": "^6.0.0" 35 | }, 36 | "dependencies": { 37 | "uikit": "^3.0.0-rc.10" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/images/about/george.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/about/martin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/about/nicole.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/about/patricia.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/about/thomas.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/articles/macbook-photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/articles/macbook-photo.jpg -------------------------------------------------------------------------------- /src/images/articles/macbook-promo-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/articles/macbook-promo-1.jpg -------------------------------------------------------------------------------- /src/images/articles/macbook-promo-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/articles/macbook-promo-2.jpg -------------------------------------------------------------------------------- /src/images/articles/macbook-promo-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/articles/macbook-promo-3.jpg -------------------------------------------------------------------------------- /src/images/articles/macbook-promo-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/articles/macbook-promo-4.jpg -------------------------------------------------------------------------------- /src/images/articles/macos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/articles/macos.jpg -------------------------------------------------------------------------------- /src/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/avatar.jpg -------------------------------------------------------------------------------- /src/images/brands/acer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/asus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/canon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/dell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/hp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/intel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/lenovo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/lg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/microsoft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/samsung.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/brands/sony.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/catalog/cameras.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/catalog/cameras.png -------------------------------------------------------------------------------- /src/images/catalog/computers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/catalog/consoles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/catalog/consoles.png -------------------------------------------------------------------------------- /src/images/catalog/games.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/catalog/laptops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/catalog/laptops.png -------------------------------------------------------------------------------- /src/images/catalog/phones.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/catalog/photo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/catalog/smartphones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/catalog/smartphones.png -------------------------------------------------------------------------------- /src/images/catalog/tablets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/catalog/tablets.png -------------------------------------------------------------------------------- /src/images/catalog/tv.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/catalog/watches.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/catalog/watches.png -------------------------------------------------------------------------------- /src/images/logo-inverse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/mastercard-securecode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/products/1/1-add-1-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-1-large.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-1-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-1-small.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-2-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-2-large.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-2-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-2-small.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-3-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-3-large.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-3-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-3-small.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-4-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-4-large.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-add-4-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-add-4-small.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-large.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-medium.jpg -------------------------------------------------------------------------------- /src/images/products/1/1-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/1/1-small.jpg -------------------------------------------------------------------------------- /src/images/products/2/2-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/2/2-medium.jpg -------------------------------------------------------------------------------- /src/images/products/2/2-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/2/2-small.jpg -------------------------------------------------------------------------------- /src/images/products/3/3-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/3/3-medium.jpg -------------------------------------------------------------------------------- /src/images/products/3/3-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/3/3-small.jpg -------------------------------------------------------------------------------- /src/images/products/4/4-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/4/4-medium.jpg -------------------------------------------------------------------------------- /src/images/products/4/4-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/4/4-small.jpg -------------------------------------------------------------------------------- /src/images/products/5/5-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/5/5-medium.jpg -------------------------------------------------------------------------------- /src/images/products/5/5-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/5/5-small.jpg -------------------------------------------------------------------------------- /src/images/products/6/6-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/6/6-medium.jpg -------------------------------------------------------------------------------- /src/images/products/6/6-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/6/6-small.jpg -------------------------------------------------------------------------------- /src/images/products/7/7-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/7/7-medium.jpg -------------------------------------------------------------------------------- /src/images/products/7/7-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/7/7-small.jpg -------------------------------------------------------------------------------- /src/images/products/8/8-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/8/8-medium.jpg -------------------------------------------------------------------------------- /src/images/products/8/8-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/products/8/8-small.jpg -------------------------------------------------------------------------------- /src/images/promo/ipad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/promo/ipad.jpg -------------------------------------------------------------------------------- /src/images/promo/iphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/promo/iphone.jpg -------------------------------------------------------------------------------- /src/images/promo/macbook-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chekromul/uikit-ecommerce-template/ad48c946bdd35adce924d4556c4ecf132626df3a/src/images/promo/macbook-new.jpg -------------------------------------------------------------------------------- /src/images/verified-by-visa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Google Maps 2 | 3 | function initMap() { 4 | var elements = document.querySelectorAll('.js-map'); 5 | Array.prototype.forEach.call(elements, function(el) { 6 | var lat = +el.dataset.latitude, 7 | lng = +el.dataset.longitude, 8 | zoom = +el.dataset.zoom; 9 | if ((lat !== '') && (lng !== '') && (zoom > 0)) { 10 | var map = new google.maps.Map(el, { 11 | zoom: zoom, 12 | center: { lat: lat, lng: lng }, 13 | disableDefaultUI: true 14 | }); 15 | var marker = new google.maps.Marker({ 16 | map: map, 17 | animation: google.maps.Animation.DROP, 18 | position: { lat: lat, lng: lng } 19 | }); 20 | } 21 | }); 22 | } 23 | 24 | // Change view 25 | 26 | (function() { 27 | var container = document.getElementById('products'); 28 | 29 | if(container) { 30 | var grid = container.querySelector('.js-products-grid'), 31 | viewClass = 'tm-products-', 32 | optionSwitch = Array.prototype.slice.call(container.querySelectorAll('.js-change-view a')); 33 | 34 | function init() { 35 | optionSwitch.forEach(function(el, i) { 36 | el.addEventListener('click', function(ev) { 37 | ev.preventDefault(); 38 | _switch(this); 39 | }, false ); 40 | }); 41 | } 42 | 43 | function _switch(opt) { 44 | optionSwitch.forEach(function(el) { 45 | grid.classList.remove(viewClass + el.getAttribute('data-view')); 46 | }); 47 | grid.classList.add(viewClass + opt.getAttribute('data-view')); 48 | } 49 | 50 | init(); 51 | } 52 | })(); 53 | 54 | // Increment 55 | 56 | function increment(incrementor, target) { 57 | var value = parseInt(document.getElementById(target).value, 10); 58 | value = isNaN(value) ? 0 : value; 59 | if(incrementor < 0) { 60 | if(value > 1) { 61 | value+=incrementor; 62 | } 63 | } else { 64 | value+=incrementor; 65 | } 66 | document.getElementById(target).value = value; 67 | } 68 | 69 | // Scroll to description 70 | 71 | (function() { 72 | UIkit.scroll('.js-scroll-to-description', { 73 | duration: 300, 74 | offset: 58 75 | }); 76 | })(); 77 | 78 | // Update sticky tabs 79 | 80 | (function() { 81 | UIkit.util.on('.js-product-switcher', 'show', function() { 82 | UIkit.update(); 83 | }); 84 | })(); 85 | 86 | // Add to cart 87 | 88 | (function() { 89 | var addToCartButtons = document.querySelectorAll('.js-add-to-cart'); 90 | 91 | Array.prototype.forEach.call(addToCartButtons, function(el) { 92 | el.onclick = function() { 93 | UIkit.offcanvas('#cart-offcanvas').show(); 94 | }; 95 | }); 96 | })(); 97 | 98 | // Action buttons 99 | 100 | (function() { 101 | var addToButtons = document.querySelectorAll('.js-add-to'); 102 | 103 | Array.prototype.forEach.call(addToButtons, function(el) { 104 | var link; 105 | var message = 'Added to ' ; 106 | var links = { 107 | favorites: 'favorites', 108 | compare: 'compare', 109 | }; 110 | if(el.classList.contains('js-add-to-favorites')) { 111 | link = links.favorites; 112 | }; 113 | if(el.classList.contains('js-add-to-compare')) { 114 | link = links.compare; 115 | } 116 | el.onclick = function() { 117 | if(!this.classList.contains('js-added-to')) { 118 | UIkit.notification({ 119 | message: message + link, 120 | pos: 'bottom-right' 121 | }); 122 | } 123 | this.classList.toggle('tm-action-button-active'); 124 | this.classList.toggle('js-added-to'); 125 | }; 126 | }); 127 | })(); 128 | 129 | 130 | -------------------------------------------------------------------------------- /src/scripts/uikit-icons.js: -------------------------------------------------------------------------------- 1 | //=require ../../node_modules/uikit/dist/js/uikit-icons.js -------------------------------------------------------------------------------- /src/scripts/uikit.js: -------------------------------------------------------------------------------- 1 | //=require ../../node_modules/uikit/dist/js/uikit.js -------------------------------------------------------------------------------- /src/styles/_uikit.less: -------------------------------------------------------------------------------- 1 | @nm-components-path: "../../node_modules/uikit/src/less/components"; 2 | 3 | // Base 4 | @import "@{nm-components-path}/variables.less"; 5 | @import "@{nm-components-path}/mixin.less"; 6 | @import "@{nm-components-path}/base.less"; 7 | 8 | // Elements 9 | @import "@{nm-components-path}/link.less"; 10 | @import "@{nm-components-path}/heading.less"; 11 | //@import "@{nm-components-path}/divider.less"; 12 | @import "@{nm-components-path}/list.less"; 13 | @import "@{nm-components-path}/description-list.less"; 14 | @import "@{nm-components-path}/table.less"; 15 | @import "@{nm-components-path}/icon.less"; 16 | //@import "@{nm-components-path}/form-range.less"; 17 | @import "@{nm-components-path}/form.less"; // After: Icon, Form Range 18 | @import "@{nm-components-path}/button.less"; 19 | 20 | // Layout 21 | @import "@{nm-components-path}/section.less"; 22 | @import "@{nm-components-path}/container.less"; 23 | @import "@{nm-components-path}/grid.less"; 24 | //@import "@{nm-components-path}/tile.less"; 25 | @import "@{nm-components-path}/card.less"; 26 | 27 | // Common 28 | @import "@{nm-components-path}/close.less"; // After: Icon 29 | @import "@{nm-components-path}/spinner.less"; // After: Icon 30 | //@import "@{nm-components-path}/totop.less"; // After: Icon 31 | //@import "@{nm-components-path}/marker.less"; // After: Icon 32 | //@import "@{nm-components-path}/alert.less"; // After: Close 33 | @import "@{nm-components-path}/badge.less"; 34 | @import "@{nm-components-path}/label.less"; 35 | @import "@{nm-components-path}/overlay.less"; // After: Icon 36 | @import "@{nm-components-path}/article.less"; // After: Subnav 37 | //@import "@{nm-components-path}/comment.less"; // After: Subnav 38 | @import "@{nm-components-path}/search.less"; // After: Icon 39 | 40 | // Navs 41 | @import "@{nm-components-path}/nav.less"; 42 | @import "@{nm-components-path}/navbar.less"; // After: Card, Grid, Nav, Icon, Search 43 | @import "@{nm-components-path}/subnav.less"; 44 | @import "@{nm-components-path}/breadcrumb.less"; 45 | @import "@{nm-components-path}/pagination.less"; 46 | @import "@{nm-components-path}/tab.less"; 47 | @import "@{nm-components-path}/slidenav.less"; // After: Icon 48 | @import "@{nm-components-path}/dotnav.less"; 49 | //@import "@{nm-components-path}/thumbnav.less"; 50 | 51 | // JavaScript 52 | @import "@{nm-components-path}/accordion.less"; 53 | @import "@{nm-components-path}/drop.less"; // After: Card 54 | @import "@{nm-components-path}/dropdown.less"; // After: Card 55 | @import "@{nm-components-path}/modal.less"; // After: Close 56 | @import "@{nm-components-path}/lightbox.less"; // After: Close 57 | @import "@{nm-components-path}/slideshow.less"; 58 | @import "@{nm-components-path}/slider.less"; 59 | @import "@{nm-components-path}/sticky.less"; 60 | @import "@{nm-components-path}/offcanvas.less"; 61 | @import "@{nm-components-path}/switcher.less"; 62 | //@import "@{nm-components-path}/leader.less"; 63 | // Scrollspy 64 | // Toggle 65 | // Scroll 66 | 67 | // Additional 68 | @import "@{nm-components-path}/iconnav.less"; 69 | @import "@{nm-components-path}/notification.less"; 70 | @import "@{nm-components-path}/tooltip.less"; 71 | //@import "@{nm-components-path}/placeholder.less"; 72 | //@import "@{nm-components-path}/progress.less"; 73 | //@import "@{nm-components-path}/sortable.less"; 74 | //@import "@{nm-components-path}/countdown.less"; 75 | 76 | // Utilities 77 | //@import "@{nm-components-path}/animation.less"; 78 | @import "@{nm-components-path}/width.less"; 79 | @import "@{nm-components-path}/height.less"; 80 | @import "@{nm-components-path}/text.less"; 81 | @import "@{nm-components-path}/column.less"; 82 | @import "@{nm-components-path}/cover.less"; 83 | @import "@{nm-components-path}/background.less"; 84 | //@import "@{nm-components-path}/align.less"; 85 | //@import "@{nm-components-path}/svg.less"; 86 | @import "@{nm-components-path}/utility.less"; 87 | @import "@{nm-components-path}/flex.less"; // After: Utility 88 | @import "@{nm-components-path}/margin.less"; 89 | @import "@{nm-components-path}/padding.less"; 90 | @import "@{nm-components-path}/position.less"; 91 | //@import "@{nm-components-path}/transition.less"; 92 | @import "@{nm-components-path}/visibility.less"; 93 | @import "@{nm-components-path}/inverse.less"; 94 | 95 | // Need to be loaded last 96 | //@import "@{nm-components-path}/print.less"; -------------------------------------------------------------------------------- /src/styles/_uikit.theme.less: -------------------------------------------------------------------------------- 1 | @nm-theme-path: "../../node_modules/uikit/src/less/theme"; 2 | 3 | // Base 4 | @import "@{nm-theme-path}/variables.less"; 5 | @import "@{nm-theme-path}/base.less"; 6 | 7 | // Elements 8 | @import "@{nm-theme-path}/link.less"; 9 | @import "@{nm-theme-path}/heading.less"; 10 | //@import "@{nm-theme-path}/divider.less"; 11 | @import "@{nm-theme-path}/list.less"; 12 | @import "@{nm-theme-path}/description-list.less"; 13 | @import "@{nm-theme-path}/table.less"; 14 | @import "@{nm-theme-path}/icon.less"; 15 | //@import "@{nm-theme-path}/form-range.less"; 16 | @import "@{nm-theme-path}/form.less"; 17 | @import "@{nm-theme-path}/button.less"; 18 | 19 | // Layout 20 | @import "@{nm-theme-path}/section.less"; 21 | @import "@{nm-theme-path}/container.less"; 22 | @import "@{nm-theme-path}/grid.less"; 23 | @import "@{nm-theme-path}/tile.less"; 24 | @import "@{nm-theme-path}/card.less"; 25 | 26 | // Common 27 | @import "@{nm-theme-path}/close.less"; 28 | @import "@{nm-theme-path}/spinner.less"; 29 | //@import "@{nm-theme-path}/marker.less"; 30 | //@import "@{nm-theme-path}/totop.less"; 31 | //@import "@{nm-theme-path}/alert.less"; 32 | @import "@{nm-theme-path}/badge.less"; 33 | @import "@{nm-theme-path}/label.less"; 34 | @import "@{nm-theme-path}/overlay.less"; 35 | @import "@{nm-theme-path}/article.less"; 36 | //@import "@{nm-theme-path}/comment.less"; 37 | @import "@{nm-theme-path}/search.less"; 38 | 39 | // Navs 40 | @import "@{nm-theme-path}/nav.less"; 41 | @import "@{nm-theme-path}/navbar.less"; 42 | @import "@{nm-theme-path}/subnav.less"; 43 | @import "@{nm-theme-path}/breadcrumb.less"; 44 | @import "@{nm-theme-path}/pagination.less"; 45 | @import "@{nm-theme-path}/tab.less"; 46 | @import "@{nm-theme-path}/slidenav.less"; 47 | @import "@{nm-theme-path}/dotnav.less"; 48 | //@import "@{nm-theme-path}/thumbnav.less"; 49 | 50 | // JavaScript 51 | @import "@{nm-theme-path}/accordion.less"; 52 | @import "@{nm-theme-path}/drop.less"; 53 | @import "@{nm-theme-path}/dropdown.less"; 54 | @import "@{nm-theme-path}/modal.less"; 55 | @import "@{nm-theme-path}/lightbox.less"; 56 | @import "@{nm-theme-path}/sticky.less"; 57 | @import "@{nm-theme-path}/offcanvas.less"; 58 | //@import "@{nm-theme-path}/leader.less"; 59 | 60 | // Additional 61 | @import "@{nm-theme-path}/iconnav.less"; 62 | @import "@{nm-theme-path}/notification.less"; 63 | @import "@{nm-theme-path}/tooltip.less"; 64 | //@import "@{nm-theme-path}/placeholder.less"; 65 | //@import "@{nm-theme-path}/progress.less"; 66 | //@import "@{nm-theme-path}/sortable.less"; 67 | //@import "@{nm-theme-path}/countdown.less"; 68 | 69 | // Utilities 70 | //@import "@{nm-theme-path}/animation.less"; 71 | @import "@{nm-theme-path}/width.less"; 72 | @import "@{nm-theme-path}/height.less"; 73 | @import "@{nm-theme-path}/text.less"; 74 | @import "@{nm-theme-path}/column.less"; 75 | @import "@{nm-theme-path}/background.less"; 76 | //@import "@{nm-theme-path}/align.less"; 77 | @import "@{nm-theme-path}/utility.less"; 78 | @import "@{nm-theme-path}/margin.less"; 79 | @import "@{nm-theme-path}/padding.less"; 80 | @import "@{nm-theme-path}/position.less"; 81 | //@import "@{nm-theme-path}/transition.less"; 82 | @import "@{nm-theme-path}/inverse.less"; -------------------------------------------------------------------------------- /src/styles/components/mixin.less: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Mixin 3 | // Description: Defines mixins which are used across all components 4 | // 5 | // ======================================================================== 6 | 7 | 8 | // Horizontal and vertical center alignment 9 | // ======================================================================== 10 | 11 | .center(@horizontal: true, @vertical: true) { 12 | position: absolute; 13 | & when ( @horizontal = true ) and ( @vertical = true ) {top: 50%;left: 50%;transform: translate(-50%, -50%);} 14 | & when ( @horizontal = true ) and ( @vertical = false ) {left: 50%;transform: translate(-50%, 0);} 15 | & when ( @horizontal = false ) and ( @vertical = true ) {top: 50%;transform: translate(0, -50%);} 16 | } -------------------------------------------------------------------------------- /src/templates/components/_navbar.pug: -------------------------------------------------------------------------------- 1 | div.uk-navbar-container.tm-navbar-container(uk-sticky="cls-active: tm-navbar-container-fixed") 2 | div.uk-container(uk-navbar) 3 | 4 | div.uk-navbar-left 5 | 6 | //- Hamburger 7 | button(class="uk-navbar-toggle uk-hidden@m" 8 | uk-toggle="target: #nav-offcanvas" 9 | uk-navbar-toggle-icon) 10 | 11 | //- Logo 12 | a.uk-navbar-item.uk-logo(href="index.html") 13 | img(src="images/logo.svg" width="90" height="32" alt="Logo") 14 | 15 | //- Navigation 16 | nav(class="uk-visible@m") 17 | ul.uk-navbar-nav 18 | each item in navbarMenu 19 | li 20 | a(href= item.href)= item.name 21 | if item.items 22 | +icon('chevron-down', '.75')(class="uk-margin-xsmall-left") 23 | if item.items 24 | div(class="uk-navbar-dropdown uk-margin-remove uk-padding-remove-vertical" 25 | uk-drop="pos: bottom-justify;" + 26 | "delay-show: 125;" + 27 | "delay-hide: 50;" + 28 | "duration: 75;" + 29 | "boundary: .tm-navbar-container;" + 30 | "boundary-align: true;" + 31 | "pos: bottom-justify;" + 32 | "flip: x") 33 | 34 | if item.name === "Catalog" 35 | div.uk-container 36 | ul.uk-navbar-dropdown-grid.uk-child-width-1-5(uk-grid) 37 | each category in item.items 38 | li 39 | div.uk-margin-top.uk-margin-bottom 40 | a.uk-link-reset(href= category.href) 41 | if category.image 42 | img(class="uk-display-block uk-margin-auto uk-margin-bottom" 43 | src= category.image 44 | alt= category.name 45 | width="80" 46 | height="80") 47 | div.uk-text-bolder= category.name 48 | if category.items 49 | ul.uk-nav.uk-nav-default 50 | each subcategory in category.items 51 | li 52 | a(href="subcategory.html")= subcategory 53 | 54 | if item.name === "Brands" 55 | div.uk-container.uk-container-small.uk-margin-top.uk-margin-bottom 56 | ul.uk-grid-small.uk-child-width-1-6(uk-grid) 57 | each brand in item.items 58 | li 59 | div.tm-ratio.tm-ratio-4-3 60 | a(class="uk-link-muted " + 61 | "uk-text-center " + 62 | "uk-display-block " + 63 | "uk-padding-small " + 64 | "uk-box-shadow-hover-large " + 65 | "tm-media-box" 66 | href="#" 67 | title= brand.name) 68 | figure.tm-media-box-wrap 69 | img(src= brand.image alt= brand.name) 70 | div.uk-text-center.uk-margin 71 | +link-to-all('See all brands', item.href) 72 | 73 | if item.name === "Pages" 74 | div.uk-container.uk-container-small.uk-margin-top.uk-margin-bottom 75 | ul.uk-nav.uk-nav-default.uk-column-1-3 76 | each page in item.items 77 | li 78 | a(href= page.href)= page.name 79 | 80 | div.uk-navbar-right 81 | 82 | //- Search 83 | a.uk-navbar-toggle.tm-navbar-button(href="#" uk-search-icon) 84 | div.uk-navbar-dropdown.uk-padding-small.uk-margin-remove( 85 | uk-drop="mode: click;" + 86 | "cls-drop: uk-navbar-dropdown;" + 87 | "boundary: .tm-navbar-container;" + 88 | "boundary-align: true;" + 89 | "pos: bottom-justify;" + 90 | "flip: x") 91 | div.uk-container 92 | div.uk-grid-small.uk-flex-middle(uk-grid) 93 | div.uk-width-expand 94 | form.uk-search.uk-search-navbar.uk-width-1-1 95 | input.uk-search-input(type="search" placeholder="Search…" autofocus) 96 | div.uk-width-auto 97 | a.uk-navbar-dropdown-close(href="#" uk-close) 98 | 99 | //- Compare 100 | a(class="uk-navbar-item uk-link-muted uk-visible@m tm-navbar-button" 101 | href="compare.html") 102 | span(uk-icon="copy") 103 | span.uk-badge 3 104 | 105 | //- User 106 | a.uk-navbar-item.uk-link-muted.tm-navbar-button(href="account.html" uk-icon="user") 107 | div(class="uk-padding-small uk-margin-remove" 108 | uk-dropdown="pos: bottom-right; offset: -10; delay-hide: 200;" 109 | style="min-width: 150px;") 110 | ul.uk-nav.uk-dropdown-nav 111 | li 112 | a(href="account.html") Orders 113 | | 114 | | 115 | span (2) 116 | li 117 | a(href="favorites.html") Favorites 118 | | 119 | | 120 | span (3) 121 | li 122 | a(href="personal.html") Personal 123 | li 124 | a(href="settings.html") Settings 125 | li.uk-nav-divider 126 | li 127 | a(href="#") Log out 128 | 129 | //- Cart 130 | a.uk-navbar-item.uk-link-muted.tm-navbar-button( 131 | href="cart.html" 132 | uk-toggle="target: #cart-offcanvas" 133 | onclick="return false") 134 | span(uk-icon="cart") 135 | span.uk-badge 2 -------------------------------------------------------------------------------- /src/templates/components/_toolbar.pug: -------------------------------------------------------------------------------- 1 | include ../mixins/_icon 2 | 3 | div(class="uk-navbar-container " + 4 | "uk-light " + 5 | "uk-visible@m " + 6 | "tm-toolbar-container") 7 | div.uk-container(uk-navbar) 8 | 9 | div.uk-navbar-left 10 | nav 11 | ul.uk-navbar-nav 12 | 13 | //- Phone 14 | li 15 | a(href="#") 16 | +icon("receiver", ".75")(class="uk-margin-xsmall-right") 17 | span.tm-pseudo= shopInfo.phone 18 | 19 | //- Address 20 | li 21 | a(href="contacts.html" onclick="return false") 22 | +icon("location", ".75")(class="uk-margin-xsmall-right") 23 | span.tm-pseudo Store in St. Petersburg 24 | +icon("triangle-down", ".75") 25 | div.uk-margin-remove(uk-drop="mode: click; pos: bottom-center;") 26 | div(class="uk-card " + 27 | "uk-card-default " + 28 | "uk-card-small " + 29 | "uk-box-shadow-xlarge " + 30 | "uk-overflow-hidden " + 31 | "uk-padding-small " + 32 | "uk-padding-remove-horizontal " + 33 | "uk-padding-remove-bottom") 34 | figure.uk-card-media-top.uk-height-small.js-map( 35 | data-latitude= shopInfo.latitude 36 | data-longitude= shopInfo.longitude 37 | data-zoom="14") 38 | div.uk-card-body 39 | div.uk-text-small 40 | div.uk-text-bolder= shopInfo.storeName 41 | div!= shopInfo.address 42 | div= shopInfo.openingHours 43 | div.uk-margin-small 44 | +link-to-all("contacts", "contacts.html")(class="uk-link-reset") 45 | 46 | //- Opening hours 47 | li 48 | div.uk-navbar-item 49 | +icon("clock", ".75")(class="uk-margin-xsmall-right") 50 | | #{shopInfo.openingHours} 51 | 52 | div.uk-navbar-right 53 | nav 54 | ul.uk-navbar-nav 55 | each item in toolbarMenu 56 | li: a(href= item.href)= item.name -------------------------------------------------------------------------------- /src/templates/layouts/_account.pug: -------------------------------------------------------------------------------- 1 | extends _default 2 | 3 | block vars 4 | 5 | block default 6 | section.uk-section.uk-section-small 7 | div.uk-container 8 | div.uk-grid-medium(uk-grid) 9 | 10 | //- Profile column 11 | div(class="uk-width-1-1 uk-width-1-4@m tm-aside-column") 12 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container( 13 | uk-sticky="offset: 90; bottom: true; media: @m;") 14 | 15 | //- Profile 16 | div.uk-card-header 17 | div.uk-grid-small.uk-child-width-1-1(uk-grid) 18 | 19 | section 20 | div(class="uk-width-1-3 " + 21 | "uk-width-1-4@s " + 22 | "uk-width-1-2@m " + 23 | "uk-margin-auto " + 24 | "uk-visible-toggle " + 25 | "uk-position-relative " + 26 | "uk-border-circle " + 27 | "uk-overflow-hidden " + 28 | "uk-light") 29 | img.uk-width-1-1(src= profile.image) 30 | a(class="uk-link-reset " + 31 | "uk-overlay-primary " + 32 | "uk-position-cover " + 33 | "uk-hidden-hover" 34 | href="#") 35 | div.uk-position-center 36 | +icon("camera", "1.25") 37 | 38 | div.uk-text-center 39 | div.uk-h4.uk-margin-remove #{profile.firstName} #{profile.lastName} 40 | div.uk-text-meta Joined #{profile.registrationDate} 41 | 42 | div 43 | div.uk-grid-small.uk-flex-center(uk-grid) 44 | 45 | div 46 | a.uk-button.uk-button-default.uk-button-small(href="settings.html") 47 | +icon("cog", ".75")(class="uk-margin-xsmall-right") 48 | span Settings 49 | 50 | div 51 | button.uk-button.uk-button-default.uk-button-small( 52 | href="#" 53 | title="Log out") 54 | +icon("sign-out", ".75") 55 | 56 | div 57 | nav 58 | ul.uk-nav.uk-nav-default.tm-nav 59 | each item in profileNav 60 | li(class= {"uk-active": item.id == profileActivePage}) 61 | a(href= item.href)= item.title 62 | if item.amount 63 | | 64 | | 65 | span (#{item.amount}) 66 | 67 | //- Content column 68 | div(class="uk-width-1-1 uk-width-expand@m") 69 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container 70 | 71 | header.uk-card-header 72 | h1.uk-h2= page.title 73 | block account -------------------------------------------------------------------------------- /src/templates/layouts/_article.pug: -------------------------------------------------------------------------------- 1 | extends _default 2 | 3 | block vars 4 | 5 | block default 6 | section.uk-section.uk-section-small 7 | div.uk-container 8 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 9 | 10 | section.uk-text-center 11 | 12 | if page.breadcrumbs 13 | ul.uk-breadcrumb.uk-flex-center.uk-margin-remove 14 | 15 | li: a(href="index.html") Home 16 | 17 | each href, breadcrumb in page.breadcrumbs 18 | li: a(href= href)= breadcrumb 19 | 20 | if page.title 21 | li: span= page.title 22 | 23 | section 24 | block article -------------------------------------------------------------------------------- /src/templates/layouts/_checkout.pug: -------------------------------------------------------------------------------- 1 | extends _index 2 | 3 | block vars 4 | 5 | block index 6 | 7 | header 8 | div.uk-navbar-container.tm-navbar-container 9 | div.uk-container(uk-navbar) 10 | 11 | div.uk-navbar-left 12 | //- Logo 13 | a.uk-navbar-item.uk-logo(href="index.html") 14 | img(src="images/logo.svg" width="90" height="32" alt="Logo") 15 | 16 | div.uk-navbar-right 17 | //- Phone 18 | a.uk-navbar-item.uk-link-muted(href="#") 19 | +icon("receiver", ".75")(class="uk-margin-xsmall-right") 20 | span.tm-pseudo= shopInfo.phone 21 | 22 | 23 | main 24 | section.uk-section.uk-section-small 25 | div.uk-container 26 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 27 | 28 | section.uk-text-center 29 | a.uk-link-muted.uk-text-small(href="cart.html") 30 | +icon("arrow-left", ".75")(class="uk-margin-xsmall-right") 31 | | Return to cart 32 | h1.uk-margin-small-top.uk-margin-remove-bottom Checkout 33 | 34 | section 35 | block checkout 36 | 37 | footer 38 | div.uk-section.uk-section-secondary.uk-section-small.uk-light 39 | div.uk-container 40 | div.uk-flex-middle(uk-grid) 41 | 42 | div.uk-width-expand 43 | div © Company Name. All rights reserved 44 | 45 | div 46 | a.uk-link-muted(href="#") 47 | +icon("receiver", ".75")(class="uk-margin-xsmall-right") 48 | span.tm-pseudo= shopInfo.phone -------------------------------------------------------------------------------- /src/templates/layouts/_default.pug: -------------------------------------------------------------------------------- 1 | extends _index 2 | 3 | block vars 4 | 5 | block index 6 | 7 | header 8 | include ../partials/_header 9 | 10 | main 11 | 12 | block default 13 | 14 | //- Advantages 15 | section.uk-section.uk-section-default.uk-section-small 16 | div.uk-container 17 | div(uk-slider) 18 | ul(class="uk-slider-items " + 19 | "uk-child-width-1-1 " + 20 | "uk-child-width-1-2@s " + 21 | "uk-child-width-1-5@m " + 22 | "uk-grid") 23 | each advantage in advantages 24 | li 25 | div(class="uk-grid-small uk-flex-center uk-flex-left@s" uk-grid) 26 | div 27 | +icon(advantage.icon, "2.5") 28 | div(class="uk-text-center uk-text-left@s uk-width-expand@s") 29 | div= advantage.title 30 | div.uk-text-meta= advantage.description 31 | ul.uk-slider-nav.uk-dotnav.uk-flex-center.uk-margin-medium-top 32 | 33 | footer 34 | include /partials/_footer 35 | 36 | include ../partials/_nav-offcanvas 37 | include ../partials/_cart-offcanvas 38 | -------------------------------------------------------------------------------- /src/templates/layouts/_index.pug: -------------------------------------------------------------------------------- 1 | include ../data/_data 2 | include ../mixins/_import 3 | 4 | doctype html 5 | 6 | //- Variables 7 | block vars 8 | - var page 9 | 10 | //- Template 11 | html(lang="en") 12 | head 13 | include /partials/_head 14 | link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500") 15 | link(rel="stylesheet" href="styles/style.css") 16 | script(src="scripts/uikit.js") 17 | script(src="scripts/uikit-icons.js") 18 | 19 | body 20 | div.uk-offcanvas-content 21 | block index 22 | 23 | script(src="scripts/script.js") 24 | script(src="//maps.googleapis.com/maps/api/js?key=AIzaSyClyjCemJi4m2q78gNeGkhlckpdH1hzTYA&callback=initMap" 25 | async 26 | defer) -------------------------------------------------------------------------------- /src/templates/layouts/_informational.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | 5 | block pages 6 | div.uk-grid-medium(uk-grid) 7 | 8 | //- Content 9 | section(class="uk-width-1-1 uk-width-expand@m") 10 | block informational 11 | 12 | //- Navigation 13 | aside(class="uk-width-1-4 uk-visible@m tm-aside-column") 14 | section(class="uk-card " + 15 | "uk-card-default " + 16 | "uk-card-small" 17 | uk-sticky="offset: 90; bottom: true;") 18 | nav 19 | ul.uk-nav.uk-nav-default.tm-nav 20 | each item in informationalNav 21 | li(class= {"uk-active": item.id == informationalActivePage}) 22 | a(href= item.href)= item.title -------------------------------------------------------------------------------- /src/templates/layouts/_pages.pug: -------------------------------------------------------------------------------- 1 | extends _default 2 | 3 | block vars 4 | 5 | block default 6 | section.uk-section.uk-section-small 7 | div.uk-container 8 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 9 | 10 | div.uk-text-center 11 | if page.breadcrumbs 12 | ul.uk-breadcrumb.uk-flex-center.uk-margin-remove 13 | li: a(href="index.html") Home 14 | each href, breadcrumb in page.breadcrumbs 15 | li: a(href= href)= breadcrumb 16 | if page.title 17 | li: span= page.title 18 | if page.title 19 | h1.uk-margin-small-top.uk-margin-remove-bottom= page.title 20 | if page.quantity 21 | div.uk-text-meta.uk-margin-xsmall-top #{page.quantity} items 22 | 23 | div 24 | block pages -------------------------------------------------------------------------------- /src/templates/mixins/_article.pug: -------------------------------------------------------------------------------- 1 | mixin article(article) 2 | 3 | a(href= article.href) 4 | article(class="uk-card " + 5 | "uk-card-default " + 6 | "uk-card-small " + 7 | "uk-article " + 8 | "uk-overflow-hidden " + 9 | "uk-box-shadow-hover-large " + 10 | "uk-height-1-1 " + 11 | "tm-ignore-container") 12 | 13 | //- Preview 14 | if article.preview 15 | div.tm-ratio.tm-ratio-16-9 16 | figure.tm-media-box.uk-cover-container.uk-margin-remove 17 | img(src= article.preview 18 | alt= article.title 19 | uk-cover) 20 | 21 | div.uk-card-body 22 | div.uk-article-body 23 | //- Date 24 | div.uk-article-meta.uk-margin-xsmall-bottom 25 | time= article.date 26 | //- Title 27 | div 28 | h3.uk-margin-remove= article.title 29 | //- Description 30 | if article.description 31 | div.uk-margin-small-top!= article.description -------------------------------------------------------------------------------- /src/templates/mixins/_icon.pug: -------------------------------------------------------------------------------- 1 | mixin icon(name, ratio) 2 | 3 | if !ratio 4 | span(uk-icon= name)&attributes(attributes) 5 | else 6 | span(uk-icon=`icon: ${name}; ratio: ${ratio};`)&attributes(attributes) -------------------------------------------------------------------------------- /src/templates/mixins/_import.pug: -------------------------------------------------------------------------------- 1 | include _icon 2 | include _link-to-all 3 | include _product 4 | include _quantity 5 | include _product-small 6 | include _article -------------------------------------------------------------------------------- /src/templates/mixins/_link-to-all.pug: -------------------------------------------------------------------------------- 1 | mixin link-to-all(text, href) 2 | 3 | a.uk-link-muted.uk-text-uppercase.tm-link-to-all(href= href)&attributes(attributes) 4 | span= text 5 | +icon("chevron-right", ".75") -------------------------------------------------------------------------------- /src/templates/mixins/_product-small.pug: -------------------------------------------------------------------------------- 1 | mixin product-small(product) 2 | 3 | div.uk-grid-small.uk-height-1-1(uk-grid) 4 | 5 | //- Image 6 | div.uk-width-1-3 7 | div.tm-ratio.tm-ratio-4-3 8 | a.tm-media-box(href= product.href) 9 | figure.tm-media-box-wrap 10 | if product.image 11 | img(src= product.image.small alt= product.name) 12 | else 13 | +icon("image", "3")(class="uk-text-muted") 14 | 15 | //- Info 16 | div.uk-width-expand 17 | div.tm-product-card-body.uk-padding-remove.uk-height-1-1 18 | 19 | div.tm-product-card-info 20 | div.uk-text-meta.uk-margin-xsmall-bottom= product.type 21 | a.tm-product-card-title(href= product.href)= product.name 22 | 23 | div.tm-product-card-shop 24 | div.tm-product-card-prices 25 | if product.isNotAvailable 26 | div.uk-text-muted Product not available 27 | else 28 | if product.oldPrice 29 | del.uk-text-meta= product.oldPrice 30 | div.tm-product-card-price= product.price 31 | div.tm-product-card-add 32 | if !product.isNotAvailable 33 | button.uk-button.uk-button-primary.tm-product-card-add-button.tm-shine.js-add-to-cart 34 | +icon("cart")(class="tm-product-add-button-icon") 35 | span.tm-product-card-add-button-text add to cart -------------------------------------------------------------------------------- /src/templates/mixins/_product.pug: -------------------------------------------------------------------------------- 1 | mixin product(product) 2 | 3 | article.tm-product-card 4 | 5 | //- Media 6 | div.tm-product-card-media 7 | div.tm-ratio.tm-ratio-4-3 8 | a.tm-media-box(href= product.href) 9 | 10 | //- Labels 11 | if product.statuses 12 | div.tm-product-card-labels 13 | each status in product.statuses 14 | case status 15 | when "new" 16 | span.uk-label.uk-label-success= status 17 | when "top selling" 18 | span.uk-label.uk-label-warning= status 19 | when "trade-in" 20 | span.uk-label.uk-label-danger= status 21 | default 22 | span.uk-label= status 23 | 24 | //- Image 25 | figure.tm-media-box-wrap 26 | if product.image 27 | img(src= product.image.medium alt= product.name) 28 | else 29 | +icon("image", "3")(class="uk-text-muted") 30 | 31 | //- Body 32 | div.tm-product-card-body 33 | 34 | //- Info 35 | div.tm-product-card-info 36 | 37 | //- Type 38 | div.uk-text-meta.uk-margin-xsmall-bottom= product.type 39 | 40 | //- Title 41 | h3.tm-product-card-title 42 | a.uk-link-heading(href= product.href)= product.name 43 | 44 | //- Properties 45 | if product.properties 46 | ul.uk-list.uk-text-small.tm-product-card-properties 47 | each value, property in product.properties 48 | li 49 | span.uk-text-muted!= property + ": " 50 | span!= value 51 | 52 | //- Shop 53 | div.tm-product-card-shop 54 | 55 | //- Prices 56 | div.tm-product-card-prices 57 | if product.isNotAvailable 58 | div.uk-text-muted Product not available 59 | else 60 | if product.oldPrice 61 | del.uk-text-meta= product.oldPrice 62 | div.tm-product-card-price= product.price 63 | 64 | //- Actions buttons 65 | div.tm-product-card-add 66 | div.uk-text-meta.tm-product-card-actions 67 | 68 | //- Favorite 69 | a.tm-product-card-action.js-add-to.js-add-to-favorites( 70 | class= { "tm-action-button-active js-added-to": product.isAddedToFavorites } 71 | title="Add to favorites") 72 | +icon("heart", ".75") 73 | span.tm-product-card-action-text Add to favorites 74 | 75 | //- Compare 76 | a.tm-product-card-action.js-add-to.js-add-to-compare( 77 | class= { "tm-action-button-active js-added-to": product.isAddedToCompare } 78 | title="Add to compare") 79 | +icon("copy", ".75") 80 | span.tm-product-card-action-text Add to compare 81 | 82 | //- Add to cart 83 | if !product.isNotAvailable 84 | button.uk-button.uk-button-primary.tm-product-card-add-button.tm-shine.js-add-to-cart 85 | +icon("cart")(class="tm-product-card-add-button-icon") 86 | span.tm-product-card-add-button-text add to cart 87 | -------------------------------------------------------------------------------- /src/templates/mixins/_quantity.pug: -------------------------------------------------------------------------------- 1 | mixin quantity(productId) 2 | a(onclick="increment(-1, 'product-" + productId + "')" 3 | uk-icon="icon: minus; ratio: .75") 4 | input(id="product-" + productId 5 | class="uk-input tm-quantity-input" 6 | type="text" 7 | maxlength="3" 8 | value="1") 9 | a(onclick="increment(+1, 'product-" + productId + "')" 10 | uk-icon="icon: plus; ratio: .75") -------------------------------------------------------------------------------- /src/templates/pages/404.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_default 2 | 3 | block vars 4 | - 5 | page = { 6 | title: '404 — Page not found' 7 | } 8 | 9 | block default 10 | section.uk-section.uk-section-small 11 | div.uk-container 12 | div.uk-text-center 13 | h1.uk-heading-hero 404 14 | div.uk-text-lead Page not found 15 | div.uk-margin-top Looks like the page you're trying to visit doesn't exist. 16 | br 17 | a(href="index.html") Go back to Homepage -------------------------------------------------------------------------------- /src/templates/pages/about.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_article 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'About', 7 | breadcrumbs: {} 8 | } 9 | 10 | block article 11 | div 12 | article(class="uk-card " + 13 | "uk-card-default " + 14 | "uk-card-body " + 15 | "uk-article " + 16 | "tm-ignore-container") 17 | 18 | header.uk-text-center 19 | //- Title 20 | h1.uk-article-title= page.title 21 | 22 | div.uk-article-body 23 | p.uk-text-lead.uk-text-center Urabitur justo diam, auctor vitae ornare sit amet, accumsan sed neque. Curabitur efficitur lacinia euismod. Nunc dictum sagittis lacus. Etiam ultrices nulla orci, in ultrices risus. 24 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac tortor sit amet nisi malesuada commodo. Phasellus et tempus justo. Sed iaculis dignissim lacinia. Nulla id felis vel ligula tempus sodales vel a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis neque ac elit lacinia laoreet. Sed dolor sem, rutrum ac egestas non, tempor nec eros. Etiam lobortis porta viverra. Etiam ut suscipit sem, a volutpat mi. Maecenas euismod a lectus ut dapibus. Nulla mattis diam et leo lacinia dignissim. 25 | 26 | h2.uk-text-center Our principles 27 | ul.uk-list.uk-list-bullet 28 | li Vestibulum ut mollis est. Fusce iaculis mauris ut tortor convallis sollicitudin. Suspendisse porta nulla nibh, id lacinia lacus tempus ut. Morbi non arcu aliquam, placerat sapien a, luctus diam. Etiam mattis cursus sem, eu maximus nisi bibendum nec. Vivamus ut turpis augue. Phasellus vehicula risus sit amet mi luctus malesuada. 29 | li Curabitur justo diam, auctor vitae ornare sit amet, accumsan sed neque. Curabitur efficitur lacinia euismod. Nunc dictum sagittis lacus. Etiam ultrices nulla orci, in ultrices risus tincidunt ac. Cras et maximus mauris. Morbi aliquam efficitur maximus. Aenean orci diam, auctor a mattis eu, consectetur id urna. 30 | li Morbi faucibus mattis ante. Donec varius neque sem, nec convallis mi dictum ut. Duis sit amet massa ac eros luctus egestas. Proin hendrerit aliquam metus, ac tincidunt risus viverra at. In viverra, ligula in facilisis interdum, dui arcu varius purus, eu blandit mi mi ut diam. Phasellus finibus metus sit amet lobortis dapibus. Nunc fringilla ac erat vitae elementum. Donec sagittis odio non mi vestibulum accumsan. 31 | 32 | h2.uk-text-center Our team 33 | div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m" 34 | uk-grid) 35 | div 36 | div.uk-grid-small.uk-flex-middle(uk-grid) 37 | div 38 | img(src="images/about/thomas.svg" 39 | alt="Thomas Bruns" 40 | width="80" 41 | height="80") 42 | div.uk-width-expand 43 | div Thomas Bruns 44 | div.uk-text-meta Co-founder & CEO 45 | div 46 | div.uk-grid-small.uk-flex-middle(uk-grid) 47 | div 48 | img(src="images/about/george.svg" 49 | alt="George Clanton" 50 | width="80" 51 | height="80") 52 | div.uk-width-expand 53 | div George Clanton 54 | div.uk-text-meta Co-founder & President 55 | div 56 | div.uk-grid-small.uk-flex-middle(uk-grid) 57 | div 58 | img(src="images/about/martin.svg" 59 | alt="Martin Cade" 60 | width="80" 61 | height="80") 62 | div.uk-width-expand 63 | div Martin Cade 64 | div.uk-text-meta Co-founder & CTO 65 | div 66 | div.uk-grid-small.uk-flex-middle(uk-grid) 67 | div 68 | img(src="images/about/carol.svg" 69 | alt="Carol Issa" 70 | width="80" 71 | height="80") 72 | div.uk-width-expand 73 | div Carol Issa 74 | div.uk-text-meta Former Commercial Director 75 | div 76 | div.uk-grid-small.uk-flex-middle(uk-grid) 77 | div 78 | img(src="images/about/patricia.svg" 79 | alt="Patricia Kirk" 80 | width="80" 81 | height="80") 82 | div.uk-width-expand 83 | div Patricia Kirk 84 | div.uk-text-meta Former Director of Strategy 85 | div 86 | div.uk-grid-small.uk-flex-middle(uk-grid) 87 | div 88 | img(src="images/about/nicole.svg" 89 | alt="Nicole Yokoyama" 90 | width="80" 91 | height="80") 92 | div.uk-width-expand 93 | div Nicole Yokoyama 94 | div.uk-text-meta Product Marketing Manager 95 | 96 | h2.uk-text-center Some stats 97 | div(class="uk-child-width-1-1 uk-child-width-1-3@s uk-text-center" 98 | uk-grid) 99 | div 100 | div.uk-heading-primary.uk-text-warning 5+ 101 | div.uk-margin-small-top years on the market 102 | div 103 | div.uk-heading-primary.uk-text-warning 150+ 104 | div.uk-margin-small-top orders per day 105 | div 106 | div.uk-heading-primary.uk-text-warning 75000+ 107 | div.uk-margin-small-top clients 108 | 109 | h2.uk-text-center Store 110 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam. 111 | figure 112 | div.uk-text-bolder= shopInfo.storeName 113 | div!= shopInfo.address 114 | div= shopInfo.openingHours 115 | div.tm-wrapper 116 | figure.tm-ratio.tm-ratio-16-9.js-map( 117 | data-latitude="59.9356728" 118 | data-longitude="30.3258604" 119 | data-zoom="14") -------------------------------------------------------------------------------- /src/templates/pages/account.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_account 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Orders' 7 | } 8 | 9 | profileActivePage = 1 10 | 11 | block account 12 | each order in orders 13 | section.uk-card-body 14 | h3 15 | a.uk-link-heading(href="#") ##{order.id} 16 | | 17 | | 18 | span.uk-text-muted.uk-text-small from #{order.date} 19 | 20 | table(class="uk-table " + 21 | "uk-table-small " + 22 | "uk-table-justify " + 23 | "uk-table-responsive " + 24 | "uk-table-divider " + 25 | "uk-margin-small-top " + 26 | "uk-margin-remove-bottom") 27 | tbody 28 | tr 29 | th.uk-width-medium Items 30 | td= order.items 31 | tr 32 | th.uk-width-medium Shipping 33 | td= order.shipping 34 | tr 35 | th.uk-width-medium Payment 36 | td= order.payment 37 | tr 38 | th.uk-width-medium Total 39 | td= order.total 40 | tr 41 | th.uk-width-medium Status 42 | td: span.uk-label(class= {"uk-label-danger": order.status == "Canceled"})= order.status -------------------------------------------------------------------------------- /src/templates/pages/article.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_article 2 | 3 | block vars 4 | - 5 | article = articles[0] 6 | 7 | page = { 8 | title: article.title, 9 | breadcrumbs: { 10 | 'Blog': 'blog.html' 11 | } 12 | } 13 | 14 | block article 15 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 16 | 17 | //- Article 18 | section 19 | article(class="uk-card " + 20 | "uk-card-default " + 21 | "uk-card-body " + 22 | "uk-article " + 23 | "tm-ignore-container") 24 | header.uk-text-center 25 | //- Title 26 | h1.uk-article-title= article.title 27 | //- Date 28 | div.uk-article-meta 29 | time= article.date 30 | section.uk-article-body 31 | include /partials/_article 32 | 33 | //- Related articles 34 | section 35 | h2.uk-text-center Related Articles 36 | div(class="uk-grid-medium " + 37 | "uk-grid-match " + 38 | "uk-child-width-1-1 " + 39 | "uk-child-width-1-2@s " + 40 | "uk-child-width-1-4@m" 41 | uk-grid) 42 | each article in articles 43 | div 44 | a(href= article.href) 45 | article(class="uk-card " + 46 | "uk-card-default " + 47 | "uk-card-small " + 48 | "uk-overflow-hidden " + 49 | "uk-link-heading " + 50 | "uk-display-block " + 51 | "uk-box-shadow-hover-large " + 52 | "uk-height-1-1 " + 53 | "tm-ignore-container") 54 | //- Preview 55 | if article.preview 56 | div.uk-card-media-top 57 | figure.uk-margin-remove.tm-ratio.tm-ratio-16-9 58 | div.uk-cover-container 59 | img(src= article.preview alt= article.title uk-cover) 60 | div.uk-card-body 61 | //- Date 62 | div.uk-article-meta.uk-margin-xsmall-bottom 63 | time= article.date 64 | //- Title 65 | h3.uk-h4.uk-margin-remove= article.title -------------------------------------------------------------------------------- /src/templates/pages/blog.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_informational 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Blog', 7 | breadcrumbs: {} 8 | } 9 | 10 | informationalActivePage = 3 11 | 12 | block informational 13 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 14 | 15 | each article in articles 16 | div 17 | +article(article) -------------------------------------------------------------------------------- /src/templates/pages/brands.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Brands', 7 | breadcrumbs: {} 8 | } 9 | 10 | block pages 11 | div.uk-card.uk-card-default.tm-ignore-container 12 | 13 | header.uk-card-header.uk-background-default 14 | nav 15 | ul.uk-subnav.uk-flex-center.uk-margin-remove 16 | li: a(href="#number") # 17 | li: a(href="#A") A 18 | li: a(href="#B") B 19 | li: a(href="#C") C 20 | li: a(href="#D") D 21 | li: a(href="#E") E 22 | li: a(href="#F") F 23 | li: a(href="#G") G 24 | li: a(href="#H") H 25 | li: a(href="#I") I 26 | li: a(href="#J") J 27 | li: a(href="#K") K 28 | li: a(href="#L") L 29 | li: a(href="#M") M 30 | li: a(href="#N") N 31 | li: a(href="#O") O 32 | li: a(href="#P") P 33 | li: a(href="#Q") Q 34 | li: a(href="#R") R 35 | li: a(href="#S") S 36 | li: a(href="#T") T 37 | li: a(href="#U") U 38 | li: a(href="#V") V 39 | li: a(href="#W") W 40 | li: a(href="#X") X 41 | li: a(href="#Y") Y 42 | li: a(href="#Z") Z 43 | 44 | section.uk-card-body(id="A") 45 | div(uk-grid) 46 | 47 | div(class="uk-width-1-1 uk-width-1-6@m") 48 | h2.uk-text-center A 49 | 50 | div(class="uk-width-1-1 uk-width-expand@m") 51 | ul(class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-child-width-1-5@m" 52 | uk-grid) 53 | each brand in brands 54 | li 55 | a(class="uk-link-muted " + 56 | "uk-text-center " + 57 | "uk-display-block " + 58 | "uk-padding-small " + 59 | "uk-box-shadow-hover-large" 60 | href="#") 61 | if brand.image 62 | div.tm-ratio.tm-ratio-4-3 63 | div.tm-media-box 64 | figure.tm-media-box-wrap 65 | img.item-brand(src= brand.image alt= brand.name) 66 | div.uk-margin-small-top.uk-text-truncate= brand.name 67 | 68 | section.uk-card-body(id="B") 69 | div(uk-grid) 70 | 71 | div(class="uk-width-1-1 uk-width-1-6@m") 72 | h2.uk-text-center B 73 | 74 | div(class="uk-width-1-1 uk-width-expand@m") 75 | 76 | section.uk-card-body(id="C") 77 | div(uk-grid) 78 | 79 | div(class="uk-width-1-1 uk-width-1-6@m") 80 | h2.uk-text-center C 81 | 82 | div(class="uk-width-1-1 uk-width-expand@m") -------------------------------------------------------------------------------- /src/templates/pages/cart.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Cart', 7 | breadcrumbs: [] 8 | } 9 | 10 | block pages 11 | div.uk-grid-medium(uk-grid) 12 | 13 | //- Items 14 | div.uk-width-1-1(class="uk-width-expand@m") 15 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container 16 | 17 | //- Header 18 | header(class="uk-card-header " + 19 | "uk-text-uppercase " + 20 | "uk-text-muted " + 21 | "uk-text-center " + 22 | "uk-text-small " + 23 | "uk-visible@m") 24 | div.uk-grid-small.uk-child-width-1-2(uk-grid) 25 | 26 | //- Product cell 27 | div product 28 | 29 | //- Other cells 30 | div 31 | div.uk-grid-small.uk-child-width-expand(uk-grid) 32 | div price 33 | div.tm-quantity-column quantity 34 | div sum 35 | div.uk-width-auto 36 | div(style="width: 20px;") 37 | 38 | //- Body 39 | each product in products 40 | if product.isAddedToCart 41 | div.uk-card-body 42 | div(class="uk-grid-small " + 43 | "uk-child-width-1-1 " + 44 | "uk-child-width-1-2@m " + 45 | "uk-flex-middle" 46 | uk-grid) 47 | 48 | // Product cell 49 | div 50 | div.uk-grid-small(uk-grid) 51 | 52 | //- Image 53 | div.uk-width-1-3 54 | div.tm-ratio.tm-ratio-4-3 55 | a.tm-media-box(href= product.href) 56 | figure.tm-media-box-wrap 57 | if product.image 58 | img(src= product.image.small alt= product.name) 59 | else 60 | +icon("image", "3")(class="uk-text-muted") 61 | 62 | //- Info 63 | div.uk-width-expand 64 | div.uk-text-meta= product.type 65 | a.uk-link-heading(href= product.href)= product.name 66 | 67 | // Other cells 68 | div 69 | div(class="uk-grid-small " + 70 | "uk-child-width-1-1 " + 71 | "uk-child-width-expand@s " + 72 | "uk-text-center" 73 | uk-grid) 74 | 75 | //- Price 76 | div 77 | div.uk-text-muted(class="uk-hidden@m") Price 78 | div= product.price 79 | 80 | //- Quantity 81 | div.tm-cart-quantity-column 82 | +quantity(product.id) 83 | 84 | //- Sum 85 | div 86 | div.uk-text-muted(class="uk-hidden@m") Sum 87 | div= product.price 88 | 89 | //- Actions 90 | div(class="uk-width-auto@s") 91 | a.uk-text-danger(uk-tooltip="Remove") 92 | +icon("close") 93 | 94 | div.uk-card-footer 95 | label 96 | span.uk-form-label.uk-margin-small-right Promo Code 97 | div.uk-inline 98 | a.uk-form-icon.uk-form-icon-flip(href="#" uk-icon="arrow-right") 99 | input.uk-input.uk-form-width-small(type="text") 100 | 101 | //- Checkout 102 | div.uk-width-1-1.tm-aside-column(class="uk-width-1-4@m") 103 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container( 104 | uk-sticky="offset: 30; bottom: true; media: @m;") 105 | 106 | div.uk-card-body 107 | 108 | div.uk-grid-small(uk-grid) 109 | div.uk-width-expand.uk-text-muted Subtotal 110 | div $3148 111 | 112 | div.uk-grid-small(uk-grid) 113 | div.uk-width-expand.uk-text-muted Discount 114 | div.uk-text-danger −$29 115 | 116 | div.uk-card-body 117 | 118 | div.uk-grid-small.uk-flex-middle(uk-grid) 119 | div.uk-width-expand.uk-text-muted Total 120 | div.uk-text-lead.uk-text-bolder $3119 121 | 122 | a.uk-button.uk-button-primary.uk-margin-small.uk-width-1-1( 123 | href="checkout.html") checkout 124 | -------------------------------------------------------------------------------- /src/templates/pages/catalog.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Catalog', 7 | breadcrumbs: {}, 8 | quantity: 641 9 | } 10 | 11 | block pages 12 | div.uk-grid-medium(uk-grid) 13 | 14 | //- Navigation 15 | aside(class="uk-width-1-4 uk-visible@m tm-aside-column") 16 | nav.uk-card.uk-card-default.uk-card-body.uk-card-small(uk-sticky="bottom: true; offset: 90") 17 | ul.uk-nav.uk-nav-default(uk-scrollspy-nav="closest: li; scroll: true; offset: 90") 18 | each category in catalog 19 | li: a(href="#" + category.id)= category.name 20 | 21 | //- Categories 22 | div(class="uk-width-1-1 uk-width-expand@m") 23 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 24 | each category in catalog 25 | section(id= category.id) 26 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container 27 | 28 | //- Header 29 | header.uk-card-header 30 | div.uk-grid-small.uk-flex-middle(uk-grid) 31 | if category.image 32 | a(href= category.href) 33 | img(src= category.image 34 | alt= category.name 35 | width="50" 36 | height="50") 37 | div.uk-width-expand 38 | h2.uk-h4.uk-margin-remove 39 | a.uk-link-heading(href= category.href)= category.name 40 | div.uk-text-meta= category.quantity + " items" 41 | 42 | //- Body 43 | if category.items 44 | div.uk-card-body 45 | ul.uk-list 46 | each subCategory in category.items 47 | li: a(href="subcategory.html")= subCategory -------------------------------------------------------------------------------- /src/templates/pages/category.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Laptops & Tablets', 7 | breadcrumbs: { 8 | 'Catalog': 'catalog.html' 9 | }, 10 | quantity: 367 11 | } 12 | 13 | block pages 14 | div.uk-grid-medium(uk-grid) 15 | 16 | //- Filters 17 | aside#filters.uk-width-1-4.tm-aside-column.tm-filters( 18 | uk-offcanvas="overlay: true; " + 19 | "container: false;") 20 | 21 | div.uk-offcanvas-bar.uk-padding-remove 22 | div(class="uk-card " + 23 | "uk-card-default " + 24 | "uk-card-small " + 25 | "uk-flex " + 26 | "uk-flex-column " + 27 | "uk-height-1-1") 28 | 29 | //- Header 30 | header.uk-card-header.uk-flex.uk-flex-middle 31 | div.uk-grid-small.uk-flex-1(uk-grid) 32 | div.uk-width-expand 33 | div.uk-h3 Filters 34 | button.uk-offcanvas-close(type="button" uk-close) 35 | 36 | //- Accordion 37 | div.uk-margin-remove.uk-flex-1.uk-overflow-auto( 38 | uk-accordion="multiple: true; targets: > .js-accordion-section" 39 | style="flex-basis: auto") 40 | 41 | //- Categories 42 | section.uk-card-small.uk-card-body 43 | h4.uk-margin-small-bottom Categories 44 | ul.uk-nav.uk-nav-default 45 | each category in catalog 46 | each item in category.items 47 | li: a(href="subcategory.html")= item 48 | - break 49 | 50 | //- Prices 51 | section.uk-card-body.uk-open.js-accordion-section 52 | h4.uk-accordion-title.uk-margin-remove Prices 53 | div.uk-accordion-content 54 | div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid) 55 | div 56 | div.uk-inline 57 | span.uk-form-icon.uk-text-xsmall from 58 | input.uk-input(type="text" placeholder="$59") 59 | div 60 | div.uk-inline 61 | span.uk-form-icon.uk-text-xsmall to 62 | input.uk-input(type="text" placeholder="$6559") 63 | 64 | //- Properties 65 | each property in filters 66 | if property.id= 1 67 | section.uk-card-body.js-accordion-section( 68 | class= { "uk-open": property.isOpen }) 69 | h4.uk-accordion-title.uk-margin-remove= property.title 70 | if property.description 71 | +icon("question", ".75")( 72 | class="tm-help-icon" 73 | onclick="event.stopPropagation();") 74 | div.uk-margin-remove( 75 | uk-drop="mode: click;" + 76 | "boundary-align: true; " + 77 | "boundary: !.uk-accordion-title; " + 78 | "pos: bottom-justify;") 79 | div(class="uk-card " + 80 | "uk-card-body " + 81 | "uk-card-default " + 82 | "uk-card-small " + 83 | "uk-box-shadow-xlarge " + 84 | "uk-text-small")= property.description 85 | div.uk-accordion-content 86 | ul.uk-list.tm-scrollbox 87 | each item in property.items 88 | li 89 | input.tm-checkbox( 90 | id= property.name + "-" + item.id 91 | name= property.name 92 | value= item.id 93 | type="checkbox") 94 | label(for= property.name + "-" + item.id) 95 | span= item.name 96 | | 97 | | 98 | span.uk-text-meta.uk-text-xsmall= item.quantity 99 | - break 100 | 101 | //- Reset filters 102 | div.uk-card-body 103 | button.uk-button.uk-button-default.uk-width-1-1 104 | +icon("close", ".75")(class="uk-margin-xsmall-right") 105 | | Reset all filters 106 | 107 | //- Content 108 | div.uk-width-expand 109 | include /partials/_products -------------------------------------------------------------------------------- /src/templates/pages/checkout.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_checkout 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Checkout' 7 | } 8 | 9 | block checkout 10 | div.uk-grid-medium(uk-grid) 11 | 12 | //- Form 13 | form.uk-form-stacked.uk-width-1-1.tm-checkout(class="uk-width-expand@m") 14 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 15 | 16 | //- Contact Information 17 | section 18 | h2.tm-checkout-title Contact Information 19 | div.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container 20 | div(class="uk-grid-small " + 21 | "uk-child-width-1-1 " + 22 | "uk-child-width-1-2@s" 23 | uk-grid) 24 | 25 | div 26 | label 27 | div.uk-form-label.uk-form-label-required First Name 28 | input.uk-input(type="text" required) 29 | 30 | div 31 | label 32 | div.uk-form-label.uk-form-label-required Last Name 33 | input.uk-input(type="text" required) 34 | 35 | div 36 | label 37 | div.uk-form-label.uk-form-label-required Phone Number 38 | input.uk-input(type="tel" required) 39 | 40 | div 41 | label 42 | div.uk-form-label.uk-form-label-required Email 43 | input.uk-input(type="email" required) 44 | 45 | //- Shipping 46 | section 47 | h2.tm-checkout-title Shipping 48 | div.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container 49 | div(class="uk-grid-small " + 50 | "uk-grid-match " + 51 | "uk-child-width-1-1 " + 52 | "uk-child-width-1-3@s " + 53 | "uk-flex-center" 54 | uk-switcher="toggle: > * > .tm-choose" 55 | uk-grid) 56 | 57 | div 58 | a.tm-choose(href="#") 59 | div.tm-choose-title pick up from store 60 | div.tm-choose-description Free, tomorrow 61 | 62 | div 63 | a.tm-choose(href="#") 64 | div.tm-choose-title delivery in city 65 | div.tm-choose-description Free, tomorrow 66 | 67 | div 68 | a.tm-choose(href="#") 69 | div.tm-choose-title regional delivery 70 | div.tm-choose-description 71 | | Via Russian Post or postal courier services. Sending to any country 72 | 73 | div.uk-switcher.uk-margin 74 | 75 | //- Pick up 76 | section 77 | div(class="uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s" 78 | uk-grid) 79 | 80 | div 81 | figure.uk-card-media-top.tm-ratio.tm-ratio-16-9.js-map( 82 | data-latitude="59.9356728" 83 | data-longitude="30.3258604" 84 | data-zoom="14") 85 | 86 | div.uk-text-small 87 | div.uk-text-bolder Store Name 88 | div!= shopInfo.address 89 | div= shopInfo.openingHours 90 | 91 | //- Shipping in St Petersburg 92 | section 93 | 94 | div.uk-grid-small(uk-grid) 95 | 96 | div.uk-width-expand 97 | label 98 | div.uk-form-label.uk-form-label-required Street 99 | input.uk-input(type="text") 100 | 101 | div(class="uk-width-1-3 uk-width-1-6@s") 102 | label 103 | div.uk-form-label.uk-form-label-required House 104 | input.uk-input(type="text") 105 | 106 | div.uk-grid-small(class="uk-child-width-1-3 uk-child-width-1-4@s" uk-grid) 107 | 108 | div 109 | label 110 | div.uk-form-label Building 111 | input.uk-input(type="text") 112 | 113 | div 114 | label 115 | div.uk-form-label Entrance 116 | input.uk-input(type="text") 117 | 118 | div 119 | label 120 | div.uk-form-label Floor 121 | input.uk-input(type="text") 122 | 123 | div 124 | label 125 | div.uk-form-label Apartment 126 | input.uk-input(type="text") 127 | 128 | div.uk-width-1-1 129 | label 130 | div.uk-form-label Comment 131 | textarea.uk-textarea( 132 | rows="5" 133 | placeholder="Additional information: phone numbers or doorphone code") 134 | 135 | div.uk-grid-small(class="uk-child-width-1-2 uk-child-width-1-4@s" uk-grid) 136 | 137 | div.uk-width-1-1.uk-text-meta Choose a convenient date and delivery interval 138 | 139 | div 140 | select.uk-select 141 | option Tomorrow 142 | option 25 May 143 | option 26 May 144 | option 27 May 145 | option 28 May 146 | option 29 May 147 | option 30 May 148 | option 1 June 149 | 150 | div 151 | select.uk-select 152 | option 09:00 – 12:00 153 | option 12:00 – 15:00 154 | option 15:00 – 18:00 155 | option 18:00 – 21:00 156 | option 21:00 – 23:00 157 | 158 | 159 | //- Regional shipping 160 | div 161 | 162 | div.uk-grid-small(uk-grid) 163 | 164 | div.uk-width-1-1 165 | label 166 | div.uk-form-label.uk-form-label-required Country 167 | select.uk-select 168 | option Choose the country 169 | option(value="RU") Russia 170 | 171 | div.uk-grid-small(uk-grid) 172 | 173 | div.uk-width-expand 174 | label 175 | div.uk-form-label.uk-form-label-required City 176 | input.uk-input(type="text") 177 | 178 | div(class="uk-width-1-3 uk-width-1-6@s") 179 | label 180 | div.uk-form-label.uk-form-label-required Post Code 181 | input.uk-input(type="text") 182 | 183 | div.uk-grid-small(uk-grid) 184 | 185 | div.uk-width-expand 186 | label 187 | div.uk-form-label.uk-form-label-required Street 188 | input.uk-input(type="text") 189 | 190 | div(class="uk-width-1-3 uk-width-1-6@s") 191 | label 192 | div.uk-form-label.uk-form-label-required House 193 | input.uk-input(type="text") 194 | 195 | div.uk-grid-small(class="uk-child-width-1-3 uk-child-width-1-4@s" uk-grid) 196 | 197 | div 198 | label 199 | div.uk-form-label Building 200 | input.uk-input(type="text") 201 | 202 | div 203 | label 204 | div.uk-form-label Entrance 205 | input.uk-input(type="text") 206 | 207 | div 208 | label 209 | div.uk-form-label Floor 210 | input.uk-input(type="text") 211 | 212 | div 213 | label 214 | div.uk-form-label Apartment 215 | input.uk-input(type="text") 216 | 217 | div.uk-width-1-1 218 | label 219 | div.uk-form-label Comment 220 | textarea.uk-textarea( 221 | rows="5" 222 | placeholder="Additional information: phone numbers or doorphone code") 223 | 224 | //- Payment 225 | section 226 | h2.tm-checkout-title Payment 227 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container 228 | div.uk-card-body 229 | div(class="uk-grid-small " + 230 | "uk-grid-match " + 231 | "uk-child-width-1-1 " + 232 | "uk-child-width-1-3@s " + 233 | "uk-flex-center" 234 | uk-switcher="toggle: > * > .tm-choose" 235 | uk-grid) 236 | 237 | div 238 | a.tm-choose(href="#") 239 | div.tm-choose-title payment upon receipt 240 | div.tm-choose-description Cash, credit card 241 | 242 | div 243 | a.tm-choose(href="#") 244 | div.tm-choose-title online by card 245 | div.tm-choose-description Visa, MasterCard 246 | 247 | div 248 | a.tm-choose(href="#") 249 | div.tm-choose-title electronic payment 250 | div.tm-choose-description PayPal, Yandex.Money, QIWI 251 | 252 | div.uk-card-footer 253 | div.uk-grid-small.uk-flex-middle.uk-flex-center.uk-text-center(uk-grid) 254 | 255 | div.uk-text-meta 256 | +icon("lock", ".75")(class="uk-margin-xsmall-right") 257 | | Security of payments is is provided by secure protocols 258 | 259 | div 260 | img(src="images/verified-by-visa.svg" 261 | title="Verified by Visa" 262 | style="height: 25px;") 263 | 264 | div 265 | img(src="images/mastercard-securecode.svg" 266 | title="MasterCard SecureCode" 267 | style="height: 25px;") 268 | 269 | //- Checkout 270 | div(class="uk-width-1-1 uk-width-1-4@m tm-aside-column") 271 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container( 272 | uk-sticky="offset: 30; bottom: true; media: @m;") 273 | 274 | section.uk-card-body 275 | h4 Items in order 276 | each product in products 277 | if product.isAddedToCart 278 | div.uk-grid-small(uk-grid) 279 | div.uk-width-expand 280 | div.uk-text-small= product.name 281 | div.uk-text-meta 1 × #{product.price} 282 | div.uk-text-right 283 | div= product.price 284 | 285 | section.uk-card-body 286 | 287 | div.uk-grid-small(uk-grid) 288 | div.uk-width-expand 289 | div.uk-text-muted Shipping 290 | div.uk-text-right 291 | div Pick up from store 292 | div.uk-text-meta Free, tomorrow 293 | 294 | div.uk-grid-small(uk-grid) 295 | div.uk-width-expand 296 | div.uk-text-muted Payment 297 | div.uk-text-right 298 | div Online by card 299 | 300 | section.uk-card-body 301 | 302 | div.uk-grid-small(uk-grid) 303 | div.uk-width-expand 304 | div.uk-text-muted Subtotal 305 | div.uk-text-right 306 | div $3148 307 | 308 | div.uk-grid-small(uk-grid) 309 | div.uk-width-expand 310 | div.uk-text-muted Discount 311 | div.uk-text-right 312 | div.uk-text-danger −$29 313 | 314 | section.uk-card-body 315 | 316 | div.uk-grid-small.uk-flex-middle(uk-grid) 317 | div.uk-width-expand 318 | div.uk-text-muted Total 319 | div.uk-text-right 320 | div.uk-text-lead.uk-text-bolder $3119 321 | 322 | button.uk-button.uk-button-primary.uk-margin-small.uk-width-1-1 checkout -------------------------------------------------------------------------------- /src/templates/pages/compare.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Compare', 7 | breadcrumbs: {} 8 | } 9 | 10 | block pages 11 | div.uk-card.uk-card-default.uk-overflow-auto.tm-ignore-container 12 | table.uk-table.uk-table-divider.tm-compare-table 13 | 14 | thead 15 | tr.uk-child-width-1-4 16 | 17 | td.uk-table-middle.uk-text-center.tm-compare-column 18 | input.tm-checkbox(id="show-difference" type="checkbox") 19 | label(for="show-difference") Show differences only 20 | 21 | each product in products 22 | if product.isAddedToCompare 23 | td.tm-compare-table-column 24 | div.uk-height-1-1 25 | div.uk-grid-small.uk-child-width-1-1.uk-height-1-1(uk-grid) 26 | 27 | div.uk-text-center 28 | a.uk-text-small.uk-text-danger(href="#") 29 | +icon("close", ".75") 30 | span.uk-margin-xsmall-left.tm-pseudo Delete 31 | 32 | div 33 | +product-small(product) 34 | 35 | each group in compare 36 | tbody 37 | tr 38 | th(colspan="4") 39 | h3.uk-margin-remove= group.name 40 | each values, property in group.properties 41 | tr 42 | th= property 43 | each value in values 44 | td!= value -------------------------------------------------------------------------------- /src/templates/pages/contacts.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_informational 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Contacts', 7 | breadcrumbs: {} 8 | } 9 | 10 | informationalActivePage = 2 11 | 12 | block informational 13 | article(class="uk-card " + 14 | "uk-card-default " + 15 | "uk-card-small " + 16 | "uk-card-body " + 17 | "uk-article " + 18 | "tm-ignore-container") 19 | 20 | div.tm-wrapper 21 | figure.tm-ratio.tm-ratio-16-9.js-map( 22 | data-latitude="59.9356728" 23 | data-longitude="30.3258604" 24 | data-zoom="14") 25 | 26 | div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-margin-top" 27 | uk-grid) 28 | 29 | section 30 | h3 Store 31 | ul.uk-list 32 | li 33 | a.uk-link-heading(href="#") 34 | +icon("receiver")(class="uk-margin-small-right") 35 | span.tm-pseudo= shopInfo.phone 36 | li 37 | a.uk-link-heading(href="#") 38 | +icon("mail")(class="uk-margin-small-right") 39 | span.tm-pseudo= shopInfo.email 40 | li 41 | div 42 | +icon("location")(class="uk-margin-small-right") 43 | span!= shopInfo.address 44 | li 45 | div 46 | +icon("clock")(class="uk-margin-small-right") 47 | span= shopInfo.openingHours 48 | 49 | section 50 | h3 Feedback 51 | dl.uk-description-list 52 | dt Cooperation 53 | dd: a.uk-link-muted(href="#") cooperation@example.com 54 | dt Partners 55 | dd: a.uk-link-muted(href="#") partners@example.com 56 | dt Press 57 | dd: a.uk-link-muted(href="#") press@example.com 58 | 59 | section.uk-width-1-1 60 | h2.uk-text-center Contact Us 61 | form 62 | div.uk-grid-small.uk-child-width-1-1(uk-grid) 63 | div 64 | label 65 | div.uk-form-label.uk-form-label-required Name 66 | input.uk-input(type="text" required) 67 | div 68 | label 69 | div.uk-form-label.uk-form-label-required Email 70 | input.uk-input(type="email" required) 71 | div 72 | label 73 | div.uk-form-label Topic 74 | select.uk-select 75 | option Customer service 76 | option Tech support 77 | option Other 78 | div 79 | label 80 | div.uk-form-label Message 81 | textarea.uk-textarea(rows="5") 82 | div.uk-text-center 83 | button.uk-button.uk-button-primary Send -------------------------------------------------------------------------------- /src/templates/pages/delivery.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_informational 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Delivery', 7 | breadcrumbs: {} 8 | } 9 | 10 | informationalActivePage = 6 11 | 12 | block informational 13 | article(class="uk-card " + 14 | "uk-card-default " + 15 | "uk-card-small " + 16 | "uk-card-body " + 17 | "uk-article " + 18 | "tm-ignore-container") 19 | 20 | h2 Pickup from store in St. Petersburg 21 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam. 22 | 23 | figure 24 | div.uk-text-bolder= shopInfo.storeName 25 | div!= shopInfo.address 26 | div= shopInfo.openingHours 27 | 28 | div.tm-wrapper 29 | figure.tm-ratio.tm-ratio-16-9.js-map( 30 | data-latitude="59.9356728" 31 | data-longitude="30.3258604" 32 | data-zoom="14") 33 | 34 | h2 Delivery in St. Petersburg 35 | p Nullam massa sem, mollis ut luctus at, tincidunt a lorem. Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci. Pellentesque volutpat tellus sit amet enim rutrum, vel eleifend metus consectetur. Sed lacinia urna a neque maximus placerat. Praesent blandit hendrerit dui non placerat. 36 | ul 37 | li Fusce eget lorem ex. Vivamus nisl eros, condimentum at mollis id, tempor a risus. Integer pellentesque bibendum est, dapibus lacinia lacus. 38 | li Vivamus tellus nibh, mattis at aliquam et, vestibulum aliquet leo. Nunc cursus lectus ex, laoreet commodo ligula posuere nec. 39 | li Suspendisse potenti. Vivamus fermentum vitae lacus ut vulputate. Mauris sed consectetur nibh. 40 | 41 | h2 Regional Delivery 42 | p Aliquam erat volutpat. Pellentesque sit amet risus odio. Vestibulum id porta libero, non interdum libero. Integer pretium tempus viverra. Nulla iaculis sed tellus vel luctus. Curabitur maximus quis nibh mattis pulvinar. Mauris convallis dapibus justo, at fringilla erat porta at. Vivamus at ante nec augue convallis consectetur at vitae orci. 43 | p Sed a rhoncus felis, quis efficitur orci. Maecenas imperdiet non sapien a sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pretium ipsum posuere, congue leo sit amet, finibus sem. Morbi aliquam pellentesque egestas. Curabitur sit amet commodo ipsum. -------------------------------------------------------------------------------- /src/templates/pages/faq.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_informational 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'FAQ', 7 | breadcrumbs: {} 8 | } 9 | 10 | informationalActivePage = 5 11 | 12 | block informational 13 | article(class="uk-card " + 14 | "uk-card-default " + 15 | "uk-card-small " + 16 | "uk-card-body " + 17 | "uk-article " + 18 | "tm-ignore-container") 19 | 20 | ul.uk-list-divider.uk-list-large(uk-accordion="multiple: true") 21 | li 22 | a.uk-accordion-title(href="#") Lorem ipsum dolor sit amet, consectetur adipiscing elit? 23 | div.uk-accordion-content 24 | p Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam. In sodales quam quis mi mollis eleifend id sit amet velit. Sed ultricies condimentum magna, vel commodo dolor luctus in. Aliquam et orci nibh. Nunc purus metus, aliquam vitae venenatis sit amet, porta non est. Proin vehicula nisi eu molestie varius. Pellentesque semper ex diam, at tristique ipsum varius sed. Pellentesque non metus ullamcorper, iaculis nibh quis, facilisis lorem. Sed malesuada eu lacus sit amet feugiat. Aenean iaculis dui sed quam consectetur elementum. 25 | li 26 | a.uk-accordion-title(href="#") Nullam massa sem, mollis ut luctus at, tincidunt a lorem? 27 | div.uk-accordion-content 28 | p Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci. Pellentesque volutpat tellus sit amet enim rutrum, vel eleifend metus consectetur. Sed lacinia urna a neque maximus placerat. Praesent blandit hendrerit dui non placerat. Sed malesuada sem sit amet arcu faucibus, sit amet accumsan nisl laoreet. Quisque auctor sit amet nisl rhoncus interdum. Nullam euismod odio sem, quis pulvinar purus gravida eget. Nullam molestie, lacus vel vehicula elementum, massa arcu bibendum lacus, vitae tempus justo orci id lectus. Duis justo neque, elementum eget ante in, condimentum condimentum ante. Maecenas quis eleifend risus. In hac habitasse platea dictumst. Nunc posuere ultrices dolor, at auctor lacus dignissim ut. Donec viverra imperdiet nisi, sit amet mattis massa pellentesque ac. 29 | li 30 | a.uk-accordion-title(href="#") Aliquam pretium diam et ullamcorper malesuada? 31 | div.uk-accordion-content 32 | p Praesent feugiat lectus faucibus tellus congue pharetra. In viverra vehicula pellentesque. Etiam consectetur ultricies magna at bibendum. Sed posuere libero ut nulla ornare, faucibus pellentesque odio pulvinar. Vestibulum feugiat ex id ex elementum egestas. Integer laoreet mollis risus, id efficitur neque. Pellentesque quis dolor faucibus, ultrices tellus id, vestibulum neque. Sed eros purus, dignissim id fermentum ut, lacinia laoreet odio. Sed mi erat, aliquet at facilisis quis, laoreet in massa. Pellentesque eu massa accumsan, iaculis erat eu, tincidunt sem. Quisque id orci id dui congue pretium. Pellentesque iaculis, dolor aliquet tempor laoreet, enim metus tincidunt massa, ut porttitor sem dui sit amet arcu. Vestibulum sodales laoreet enim, sit amet vestibulum nisl porttitor a. 33 | li 34 | a.uk-accordion-title(href="#") Etiam suscipit at nisi eget auctor? 35 | div.uk-accordion-content 36 | p Mauris id pellentesque metus. In quis arcu sed enim maximus pellentesque et eget velit. Etiam euismod enim vitae condimentum tristique. 37 | li 38 | a.uk-accordion-title(href="#") Sed porta diam eget enim bibendum laoreet? 39 | div.uk-accordion-content 40 | p Donec molestie sem et tellus vestibulum venenatis. Quisque iaculis ornare luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi velit nibh, ullamcorper eu imperdiet id, rutrum quis mi. Donec eu aliquet lorem. Nulla at lectus turpis. Sed et diam ac lorem iaculis lacinia. 41 | -------------------------------------------------------------------------------- /src/templates/pages/favorites.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_account 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Favorites' 7 | } 8 | 9 | profileActivePage = 2 10 | 11 | block account 12 | div(class="uk-grid-collapse " + 13 | "tm-products-list" 14 | uk-grid) 15 | each product in products 16 | if product.isAddedToFavorites 17 | +product(product) 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/templates/pages/index.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_default 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Home' 7 | } 8 | 9 | block default 10 | 11 | //- Slider 12 | section.uk-position-relative.uk-visible-toggle.uk-light(uk-slideshow="min-height: 300; max-height: 600;") 13 | ul.uk-slideshow-items 14 | each item in promo 15 | li(style="background-color: " + item.background) 16 | a(href="#") 17 | figure.uk-container.uk-height-1-1 18 | img(src= item.image 19 | alt= item.title 20 | width="1200" 21 | height="600" 22 | uk-cover) 23 | 24 | a.uk-position-center-left.uk-position-small.uk-hidden-hover( 25 | href="#" 26 | uk-slideshow-item="previous" 27 | uk-slidenav-previous) 28 | a.uk-position-center-right.uk-position-small.uk-hidden-hover( 29 | href="#" 30 | uk-slideshow-item="next" 31 | uk-slidenav-next) 32 | 33 | div.uk-position-bottom-center.uk-position-small 34 | ul.uk-slideshow-nav.uk-dotnav 35 | 36 | //- Categories 37 | section.uk-section.uk-section-default.uk-section-small 38 | div.uk-container 39 | div(class="uk-grid-small " + 40 | "uk-child-width-1-2 " + 41 | "uk-child-width-1-3@s " + 42 | "uk-child-width-1-6@m" 43 | uk-grid) 44 | each category in categories 45 | div 46 | a(class="uk-link-muted " + 47 | "uk-text-center " + 48 | "uk-display-block " + 49 | "uk-padding-small " + 50 | "uk-box-shadow-hover-large" 51 | href= category.href) 52 | if category.image 53 | div.tm-ratio.tm-ratio-4-3 54 | div.tm-media-box 55 | figure.tm-media-box-wrap 56 | img.item-brand(src= category.image alt= category.title) 57 | div.uk-margin-small-top 58 | div.uk-text-truncate= category.title 59 | if category.comment 60 | div.uk-text-meta.uk-text-xsmall.uk-text-truncate= category.comment 61 | 62 | div.uk-margin.uk-text-center 63 | +link-to-all("see all categories", "catalog.html") 64 | 65 | //- Trending 66 | section.uk-section.uk-section-small 67 | div.uk-container 68 | 69 | h2.uk-text-center Trending Items 70 | 71 | div.uk-card.uk-card-default.tm-ignore-container 72 | div(class="uk-grid-collapse " + 73 | "uk-child-width-1-3 " + 74 | "uk-child-width-1-4@m " + 75 | "tm-products-grid" 76 | uk-grid) 77 | - var count = 0 78 | each product in products 79 | if count < 8 80 | +product(product) 81 | - count++; 82 | 83 | div.uk-margin.uk-text-center 84 | +link-to-all("shop all", "subcategory.html") 85 | 86 | //- Brands 87 | section.uk-section.uk-section-default.uk-section-small 88 | div.uk-container 89 | 90 | h2.uk-text-center Popular Brands 91 | 92 | div.uk-margin-medium-top(uk-slider="finite: true") 93 | div.uk-position-relative 94 | div.uk-grid-small.uk-flex-middle(uk-grid) 95 | 96 | div(class="uk-visible@m") 97 | a(href="#" 98 | uk-slidenav-previous 99 | uk-slider-item="previous") 100 | 101 | div.uk-width-expand.uk-slider-container 102 | ul(class="uk-slider-items " + 103 | "uk-child-width-1-3 " + 104 | "uk-child-width-1-6@s " + 105 | "uk-grid " + 106 | "uk-grid-large") 107 | each brand in brands 108 | li 109 | div.tm-ratio.tm-ratio-16-9 110 | a.uk-link-muted.tm-media-box.tm-grayscale( 111 | href="#" 112 | title= brand.name) 113 | figure.tm-media-box-wrap 114 | img(src= brand.image alt= brand.name) 115 | 116 | div(class="uk-visible@m") 117 | a(href="#" 118 | uk-slider-item="next" 119 | uk-slidenav-next) 120 | 121 | ul(class="uk-slider-nav " + 122 | "uk-dotnav " + 123 | "uk-flex-center " + 124 | "uk-margin-medium-top " + 125 | "uk-hidden@m") 126 | 127 | div.uk-margin.uk-text-center 128 | +link-to-all("see all brands", "brands.html") 129 | 130 | //- Blog 131 | section.uk-section.uk-section-small 132 | div.uk-container 133 | 134 | h2.uk-text-center Blog 135 | 136 | div(class="uk-grid-medium " + 137 | "uk-grid-match " + 138 | "uk-child-width-1-1 " + 139 | "uk-child-width-1-2@s" 140 | uk-grid) 141 | 142 | each article in articles 143 | div 144 | +article(article) 145 | 146 | div.uk-margin.uk-text-center 147 | +link-to-all("see all articles", "blog.html") 148 | 149 | //- About & News 150 | section.uk-section.uk-section-default.uk-section-small 151 | div.uk-container 152 | div(class="uk-grid-medium " + 153 | "uk-child-width-1-1 " + 154 | "uk-child-width-1-2@s" 155 | uk-grid) 156 | 157 | //- About 158 | section 159 | 160 | h2(class="uk-text-center uk-text-left@s") About 161 | 162 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at neque vulputate, vestibulum magna in, accumsan urna. Nulla feugiat ipsum ex, molestie porttitor nibh faucibus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit lorem ut finibus semper. Donec ac vehicula erat, nec consequat massa. 163 | p Quisque rhoncus fermentum sapien id congue. Nam at rutrum turpis. Aliquam sagittis imperdiet tortor vel dignissim. Ut ipsum nunc, egestas et odio id, vestibulum posuere orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 164 | div(class="uk-text-center uk-text-left@s") 165 | +link-to-all("read more", "about.html") 166 | 167 | //- News 168 | section 169 | 170 | h2(class="uk-text-center uk-text-left@s") Latest News 171 | 172 | ul.uk-list.uk-list-small.uk-list-divider 173 | each article in news 174 | li 175 | article.uk-article 176 | div.uk-article-body 177 | //- Date 178 | div.uk-article-meta.uk-margin-xsmall-bottom 179 | time= article.date 180 | //- Title 181 | h3.uk-h4.uk-margin-remove 182 | a.uk-link-heading(href= article.href)= article.title 183 | //- Description 184 | if article.description 185 | div.uk-margin-xsmall-top.uk-text-small!= article.description 186 | 187 | div(class="uk-margin uk-text-center uk-text-left@s") 188 | +link-to-all("see all news", "news.html") 189 | 190 | //- Subscribe 191 | section.uk-section.uk-section-primary.uk-section-small.uk-light 192 | div.uk-container 193 | 194 | div.uk-text-center 195 | div.uk-h2.uk-margin-remove Subscribe for updates 196 | div Be aware of new products and special offers. 197 | 198 | div.uk-margin 199 | form 200 | div.uk-grid-small.uk-flex-center(uk-grid) 201 | div(class="uk-width-1-1 uk-width-medium@s") 202 | div.uk-inline.uk-width-1-1 203 | span.uk-form-icon(uk-icon="mail") 204 | input.uk-input(type="email" placeholder="Your email" required) 205 | div 206 | button.uk-button.uk-button-primary subscribe -------------------------------------------------------------------------------- /src/templates/pages/news.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_informational 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'News', 7 | breadcrumbs: {} 8 | } 9 | 10 | informationalActivePage = 4 11 | 12 | block informational 13 | section.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container 14 | ul.uk-list.uk-list-large.uk-list-divider 15 | each article in news 16 | li 17 | article.uk-article 18 | div.uk-article-body 19 | //- Date 20 | div.uk-article-meta.uk-margin-xsmall-bottom 21 | time= article.date 22 | //- Title 23 | div 24 | h3 25 | a.uk-link-heading(href= article.href)= article.title 26 | //- Description 27 | if article.description 28 | div.uk-margin-small-top!= article.description -------------------------------------------------------------------------------- /src/templates/pages/personal.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_account 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Personal Info' 7 | } 8 | 9 | profileActivePage = 3 10 | 11 | block account 12 | div.uk-card-body 13 | form.uk-form-stacked 14 | 15 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 16 | 17 | //- Contact 18 | fieldset.uk-fieldset 19 | legend.uk-h4 Contact 20 | 21 | div(class="uk-grid-small " + 22 | "uk-child-width-1-1 " + 23 | "uk-child-width-1-2@s" 24 | uk-grid) 25 | 26 | div 27 | label 28 | div.uk-form-label First Name 29 | input.uk-input(type="text" value= profile.firstName) 30 | 31 | div 32 | label 33 | div.uk-form-label Last Name 34 | input.uk-input(type="text" value= profile.lastName) 35 | 36 | div 37 | label 38 | div.uk-form-label Phone Number 39 | input.uk-input(type="tel" value= profile.phone) 40 | 41 | div 42 | label 43 | div.uk-form-label Date of Birth 44 | input.uk-input(type="date" value= profile.dateOFBirth) 45 | 46 | //- Address 47 | fieldset.uk-fieldset 48 | legend.uk-h4 Address 49 | 50 | div.uk-grid-small(uk-grid) 51 | 52 | div.uk-width-1-1 53 | label 54 | div.uk-form-label Country 55 | select.uk-select 56 | option Choose the country 57 | option(value="RU") Russia 58 | 59 | div.uk-grid-small(uk-grid) 60 | 61 | div.uk-width-expand 62 | label 63 | div.uk-form-label City 64 | input.uk-input(type="text") 65 | 66 | div(class="uk-width-1-3 uk-width-1-6@s") 67 | label 68 | div.uk-form-label Post Code 69 | input.uk-input(type="text") 70 | 71 | div.uk-grid-small(uk-grid) 72 | 73 | div.uk-width-expand 74 | label 75 | div.uk-form-label Street 76 | input.uk-input(type="text") 77 | 78 | div(class="uk-width-1-3 uk-width-1-6@s") 79 | label 80 | div.uk-form-label House 81 | input.uk-input(type="text") 82 | 83 | div(class="uk-grid-small uk-child-width-1-3 uk-child-width-1-4@s" 84 | uk-grid) 85 | 86 | div 87 | label 88 | div.uk-form-label Building 89 | input.uk-input(type="text") 90 | 91 | div 92 | label 93 | div.uk-form-label Entrance 94 | input.uk-input(type="text") 95 | 96 | div 97 | label 98 | div.uk-form-label Floor 99 | input.uk-input(type="text") 100 | 101 | div 102 | label 103 | div.uk-form-label Apartment 104 | input.uk-input(type="text") 105 | 106 | div.uk-width-1-1 107 | label 108 | div.uk-form-label Comment 109 | textarea.uk-textarea( 110 | rows="5" 111 | placeholder="Additional information: phone numbers or doorphone code") 112 | 113 | div.uk-card-footer.uk-text-center 114 | button.uk-button.uk-button-primary save -------------------------------------------------------------------------------- /src/templates/pages/settings.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_account 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Settings' 7 | } 8 | 9 | profileActivePage = 4 10 | 11 | block account 12 | div.uk-card-body 13 | form.uk-form-stacked 14 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 15 | 16 | //- Email 17 | fieldset.uk-fieldset 18 | legend.uk-h4 Email 19 | div(class="uk-grid-small " + 20 | "uk-child-width-1-1" 21 | uk-grid) 22 | div 23 | label 24 | div.uk-form-label Current Email 25 | input.uk-input.uk-form-width-large(type="email" value= profile.email disabled) 26 | div 27 | label 28 | div.uk-form-label New Email 29 | input.uk-input.uk-form-width-large(type="email") 30 | div 31 | button.uk-button.uk-button-primary update email 32 | 33 | //- Password 34 | fieldset.uk-fieldset 35 | legend.uk-h4 Password 36 | div(class="uk-grid-small " + 37 | "uk-child-width-1-1" 38 | uk-grid) 39 | div 40 | label 41 | div.uk-form-label Current Password 42 | input.uk-input.uk-form-width-large(type="password") 43 | div 44 | label 45 | div.uk-form-label New Password 46 | input.uk-input.uk-form-width-large(type="password") 47 | div 48 | label 49 | div.uk-form-label Confirm Password 50 | input.uk-input.uk-form-width-large(type="password") 51 | div 52 | button.uk-button.uk-button-primary update password 53 | 54 | //- Email notifications 55 | fieldset.uk-fieldset 56 | legend.uk-h4 Email Notifications 57 | ul.uk-list.uk-margin-remove 58 | li 59 | input(class="tm-checkbox" 60 | id="notification-1" 61 | type="checkbox" 62 | name="notification" 63 | value="1" 64 | checked) 65 | label(for="notification-1") 66 | span Weekly Newsletter 67 | li 68 | input(class="tm-checkbox" 69 | id="notification-2" 70 | type="checkbox" 71 | name="notification" 72 | value="1" 73 | checked) 74 | label(for="notification-2") 75 | span New Product Announcements 76 | li 77 | input(class="tm-checkbox" 78 | id="notification-3" 79 | type="checkbox" 80 | name="notification" 81 | value="1" 82 | checked) 83 | label(for="notification-3") 84 | span Product Specials -------------------------------------------------------------------------------- /src/templates/pages/subcategory.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/_pages 2 | 3 | block vars 4 | - 5 | page = { 6 | title: 'Laptops', 7 | breadcrumbs: { 8 | 'Catalog': 'catalog.html', 9 | 'Laptops & Tablets': 'category.html' 10 | }, 11 | quantity: 289 12 | } 13 | 14 | block pages 15 | div.uk-grid-medium(uk-grid) 16 | 17 | //- Filters 18 | aside#filters.uk-width-1-4.tm-aside-column.tm-filters( 19 | uk-offcanvas="overlay: true; " + 20 | "container: false;") 21 | 22 | div.uk-offcanvas-bar.uk-padding-remove 23 | div(class="uk-card " + 24 | "uk-card-default " + 25 | "uk-card-small " + 26 | "uk-flex " + 27 | "uk-flex-column " + 28 | "uk-height-1-1") 29 | 30 | //- Header 31 | header.uk-card-header.uk-flex.uk-flex-middle 32 | div.uk-grid-small.uk-flex-1(uk-grid) 33 | div.uk-width-expand 34 | h3 Filters 35 | button.uk-offcanvas-close(type="button" uk-close) 36 | 37 | //- Accordion 38 | div.uk-margin-remove.uk-flex-1.uk-overflow-auto( 39 | uk-accordion="multiple: true; targets: > .js-accordion-section" 40 | style="flex-basis: auto") 41 | 42 | //- Prices 43 | section.uk-card-body.uk-open.js-accordion-section 44 | h4.uk-accordion-title.uk-margin-remove Prices 45 | div.uk-accordion-content 46 | div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid) 47 | div 48 | div.uk-inline 49 | span.uk-form-icon.uk-text-xsmall from 50 | input.uk-input(type="text" placeholder="$59") 51 | div 52 | div.uk-inline 53 | span.uk-form-icon.uk-text-xsmall to 54 | input.uk-input(type="text" placeholder="$6559") 55 | 56 | //- Properties 57 | each property in filters 58 | section.uk-card-body.js-accordion-section( 59 | class= { "uk-open": property.isOpen }) 60 | h4.uk-accordion-title.uk-margin-remove= property.title 61 | if property.description 62 | +icon("question", ".75")( 63 | class="tm-help-icon" 64 | onclick="event.stopPropagation();") 65 | div.uk-margin-remove( 66 | uk-drop="mode: click;" + 67 | "boundary-align: true; " + 68 | "boundary: !.uk-accordion-title; " + 69 | "pos: bottom-justify;") 70 | div(class="uk-card " + 71 | "uk-card-body " + 72 | "uk-card-default " + 73 | "uk-card-small " + 74 | "uk-box-shadow-xlarge " + 75 | "uk-text-small")= property.description 76 | div.uk-accordion-content 77 | ul.uk-list.tm-scrollbox 78 | each item in property.items 79 | li 80 | input.tm-checkbox( 81 | id= property.name + "-" + item.id 82 | name= property.name 83 | value= item.id 84 | type="checkbox") 85 | label(for= property.name + "-" + item.id) 86 | span= item.name 87 | | 88 | | 89 | span.uk-text-meta.uk-text-xsmall= item.quantity 90 | 91 | div.uk-card-body 92 | button.uk-button.uk-button-default.uk-width-1-1 93 | +icon("close", ".75")(class="uk-margin-xsmall-right") 94 | | Reset all filters 95 | 96 | //- Content 97 | div.uk-width-expand 98 | include /partials/_products -------------------------------------------------------------------------------- /src/templates/partials/_article.pug: -------------------------------------------------------------------------------- 1 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod nisl nunc, a dictum magna laoreet eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. 2 | 3 | div.tm-wrapper.uk-text-center 4 | figure 5 | a(href="images/articles/macbook-photo.jpg") 6 | img(src="images/articles/macbook-photo.jpg" 7 | alt="MacBook Pro") 8 | figcaption MacBook Pro 9 | 10 | p Sed sit amet ante eget nunc dictum auctor sagittis in libero. Aliquam ultricies tincidunt nisi, a vestibulum nisi tempor vitae. Praesent fermentum sem semper fermentum ultrices. Duis eleifend vel sapien dignissim auctor. Vestibulum at commodo leo. In vitae eros ut sapien egestas venenatis non sit amet elit. In gravida vitae ante a rutrum. 11 | 12 | h2 Touch Bar 13 | p Vivamus ornare tortor elit, sed rutrum felis iaculis in. Nunc ut molestie neque. Aenean vitae elementum arcu, at rutrum ligula. Pellentesque fringilla dictum viverra. Vestibulum eu ipsum nec risus pharetra iaculis. Donec quis nulla orci. Suspendisse eget dictum augue, et lobortis justo. Suspendisse velit dui, sollicitudin quis velit nec, tincidunt consequat arcu. 14 | 15 | h2 Retina Display 16 | p Pellentesque dictum imperdiet rutrum. Vestibulum egestas quam eget maximus rutrum. Etiam blandit a dolor laoreet vulputate. Nulla ullamcorper ipsum et libero finibus, vitae vestibulum odio feugiat. 17 | 18 | figure.uk-text-center 19 | a(href="images/articles/macbook-promo-4.jpg") 20 | img(src="images/articles/macbook-promo-4.jpg" 21 | alt="MacBook Pro") 22 | 23 | h2 Force Touch Trackpad 24 | p Vivamus ornare tortor elit, sed rutrum felis iaculis in. Nunc ut molestie neque. Aenean vitae elementum arcu, at rutrum ligula. Pellentesque fringilla dictum viverra. Vestibulum eu ipsum nec risus pharetra iaculis. Donec quis nulla orci. Suspendisse eget dictum augue, et lobortis justo. Suspendisse velit dui, sollicitudin quis velit nec, tincidunt consequat arcu. 25 | 26 | div.tm-wrapper 27 | figure.tm-ratio.tm-ratio-16-9 28 | iframe( 29 | src="https://www.youtube.com/embed/WVPRkcczXCY" 30 | frameborder="0" 31 | allow="autoplay; encrypted-media" 32 | allowfullscreen) 33 | 34 | p Ut arcu lacus, tempus bibendum purus sed, iaculis sollicitudin sapien. Donec quis imperdiet arcu. Ut sagittis ipsum diam, nec tempor ex fermentum a. Nam ac vehicula erat. Curabitur id congue risus, vel iaculis enim. Donec tristique lacinia velit eu fringilla. Mauris lectus enim, aliquet eu dolor sed, porta vehicula lacus. Etiam luctus egestas scelerisque. Sed sit amet metus ante. Cras pulvinar sollicitudin nisl nec egestas. Maecenas vitae velit ut urna vestibulum venenatis ut vel ex. Quisque sit amet mattis ante. Duis blandit nisl non commodo rutrum. Nulla in velit ut arcu efficitur laoreet ut eu mauris. Duis condimentum vulputate consequat. Vestibulum aliquet suscipit purus. 35 | 36 | figure(uk-slideshow) 37 | div.uk-position-relative.uk-visible-toggle.uk-light 38 | ul.uk-slideshow-items 39 | li 40 | img( 41 | src="images/articles/macbook-promo-1.jpg" 42 | alt="MacBook Pro" 43 | uk-cover) 44 | li 45 | img( 46 | src="images/articles/macbook-promo-2.jpg" 47 | alt="MacBook Pro" 48 | uk-cover) 49 | 50 | a.uk-position-center-left.uk-position-small.uk-hidden-hover( 51 | href="#" 52 | uk-slidenav-previous 53 | uk-slideshow-item="previous") 54 | a.uk-position-center-right.uk-position-small.uk-hidden-hover( 55 | href="#" 56 | uk-slidenav-next 57 | uk-slideshow-item="next") 58 | 59 | ul.uk-slideshow-nav.uk-dotnav.uk-flex-center.uk-margin 60 | 61 | p Mauris dignissim non nulla quis sollicitudin. Maecenas quis orci dui. Suspendisse pharetra facilisis metus, at venenatis nisl convallis et. Curabitur vulputate eget nisl sed dignissim. Sed eget metus ut orci volutpat gravida. 62 | 63 | blockquote.twitter-tweet(data-lang="en") 64 | p(lang="en" dir="ltr") 65 | | Mophie's latest battery pack is powerful enough to charge your 15-inch MacBook Pro 66 | a(href="https://t.co/jN4RzcxOyG") https://t.co/jN4RzcxOyG 67 | a(href="https://t.co/5oJBKZRVBx") pic.twitter.com/5oJBKZRVBx 68 | | — The Verge (@verge) 69 | a(href="https://twitter.com/verge/status/948539601265872896?ref_src=twsrc%5Etfw") January 3, 2018 70 | script(src="https://platform.twitter.com/widgets.js" charset="utf-8" async) 71 | 72 | p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem urna, accumsan nec velit et, convallis tincidunt enim. Proin sollicitudin, metus at interdum tempus, velit mi posuere nisl, nec viverra ligula lorem sit amet felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 73 | 74 | table(class="uk-table " + 75 | "uk-table-large " + 76 | "uk-table-middle " + 77 | "uk-table-divider " + 78 | "uk-table-justify " + 79 | "uk-table-responsive") 80 | 81 | thead 82 | tr 83 | th 84 | th.uk-width-1-4.uk-text-center MacBook Pro 13" 85 | th.uk-width-1-4.uk-text-center MacBook Pro 13" with Touch Bar 86 | th.uk-width-1-4.uk-text-center MacBook Pro 15" with Touch Bar 87 | 88 | tbody 89 | tr 90 | th Dimensions 91 | td 0.59 × 11.97 × 8.36 inches 92 | td 0.59 × 11.97 × 8.36 inches 93 | td 0.61 × 13.75 × 9.48 inches 94 | tr 95 | th Weight 96 | td 3.02 pounds 97 | td 3.02 pounds 98 | td 4.02 pounds 99 | tr 100 | th Display 101 | td 13.3" 2560×1600,
60Hz Retina Display 102 | td 13.3" 2560×1600,
60Hz Retina Display 103 | td 15.4" 2880×1800,
60Hz Retina Display 104 | tr 105 | th Inputs 106 | td 2 × USB-C Ports,
1 × 3.5mm Headphone Jack 107 | td 4 × USB-C Ports,
1 × 3.5mm Headphone Jack 108 | td 4 × USB-C Ports,
1 × 3.5mm Headphone Jack 109 | tr 110 | th Battery Life 111 | td Approximately 10 hours 112 | td Approximately 10 hours 113 | td Approximately 10 hours 114 | 115 | p Sed at diam aliquet, fringilla turpis ac, consequat ante. Duis id maximus purus. Cras rutrum erat non nibh accumsan, vitae maximus sapien elementum. Maecenas tellus libero, vulputate vitae mi eu, volutpat ornare felis. Nulla malesuada nunc urna, quis rutrum massa consequat id. Pellentesque elit diam, dignissim a lorem eu, tincidunt mollis erat. 116 | 117 | div.tm-wrapper 118 | figure.uk-text-center 119 | a(href="images/articles/macbook-promo-3.jpg") 120 | img(src="images/articles/macbook-promo-3.jpg" 121 | alt="MacBook Pro") 122 | figcaption 13-inch and 15-inch 123 | 124 | p Sed at diam aliquet, fringilla turpis ac, consequat ante. Duis id maximus purus. Cras rutrum erat non nibh accumsan, vitae maximus sapien elementum. Maecenas tellus libero, vulputate vitae mi eu, volutpat ornare felis. Nulla malesuada nunc urna, quis rutrum massa consequat id. Pellentesque elit diam, dignissim a lorem eu, tincidunt mollis erat. 125 | 126 | blockquote(cite="#") 127 | p.uk-margin-small-bottom You can converge a toaster and refrigerator, but these things are probably not going to be pleasing to the user. 128 | footer Tim Cook -------------------------------------------------------------------------------- /src/templates/partials/_cart-offcanvas.pug: -------------------------------------------------------------------------------- 1 | div#cart-offcanvas(uk-offcanvas="overlay: true; flip: true") 2 | aside.uk-offcanvas-bar.uk-padding-remove 3 | div(class="uk-card " + 4 | "uk-card-default " + 5 | "uk-card-small " + 6 | "uk-height-1-1 " + 7 | "uk-flex " + 8 | "uk-flex-column " + 9 | "tm-shadow-remove") 10 | 11 | header.uk-card-header.uk-flex.uk-flex-middle 12 | div.uk-grid-small.uk-flex-1(uk-grid) 13 | div.uk-width-expand 14 | div.uk-h3 Cart 15 | button.uk-offcanvas-close(type="button" uk-close) 16 | 17 | div.uk-card-body.uk-overflow-auto 18 | ul.uk-list.uk-list-divider 19 | each product in products 20 | if product.isAddedToCart 21 | li.uk-visible-toggle 22 | arttcle 23 | div.uk-grid-small(uk-grid) 24 | 25 | //- Image 26 | div.uk-width-1-4 27 | div.tm-ratio.tm-ratio-4-3 28 | a.tm-media-box(href= product.href) 29 | figure.tm-media-box-wrap 30 | if product.image 31 | img(src= product.image.small alt= product.name) 32 | else 33 | +icon("image", "3")(class="uk-text-muted") 34 | //- Info 35 | div.uk-width-expand 36 | div.uk-text-meta.uk-text-xsmall= product.type 37 | a.uk-link-heading.uk-text-small(href= product.href)= product.name 38 | div.uk-margin-xsmall.uk-grid-small.uk-flex-middle(uk-grid) 39 | div.uk-text-bolder.uk-text-small= product.price 40 | div.uk-text-meta.uk-text-xsmall 1 × #{product.price} 41 | 42 | //- Delete 43 | div 44 | a(class="uk-icon-link " + 45 | "uk-text-danger " + 46 | "uk-invisible-hover" 47 | href="#" 48 | uk-icon="icon: close; ratio: .75" 49 | uk-tooltip="Remove") 50 | 51 | footer.uk-card-footer 52 | div.uk-grid-small(uk-grid) 53 | div.uk-width-expand.uk-text-muted.uk-h4 Subtotal 54 | div.uk-h4.uk-text-bolder $3148.00 55 | div(class="uk-grid-small " + 56 | "uk-child-width-1-1 " + 57 | "uk-child-width-1-2@m " + 58 | "uk-margin-small" uk-grid) 59 | div 60 | a(class="uk-button uk-button-default uk-margin-small uk-width-1-1" 61 | href="cart.html") view cart 62 | div 63 | a(class="uk-button uk-button-primary uk-margin-small uk-width-1-1" 64 | href="checkout.html") checkout 65 | -------------------------------------------------------------------------------- /src/templates/partials/_footer.pug: -------------------------------------------------------------------------------- 1 | section.uk-section.uk-section-secondary.uk-section-small.uk-light 2 | div.uk-container 3 | div(class="uk-grid-medium " + 4 | "uk-child-width-1-1 " + 5 | "uk-child-width-1-4@m" 6 | uk-grid) 7 | 8 | div 9 | a.uk-logo(href="index.html") 10 | img(src="images/logo-inverse.svg" width="90" height="32" alt="Logo") 11 | p.uk-text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris eros. Nulla quis ante sed tortor efficitur facilisis. 12 | ul.uk-iconnav 13 | each social in socials 14 | li: a(href="#" title= social.name uk-icon= social.icon) 15 | 16 | div 17 | nav.uk-grid-small.uk-child-width-1-2(uk-grid) 18 | div 19 | ul.uk-nav.uk-nav-default 20 | each item in footerMenuLeft 21 | li: a(href= item.href)= item.name 22 | div 23 | ul.uk-nav.uk-nav-default 24 | each item in footerMenuRight 25 | li: a(href= item.href)= item.name 26 | 27 | div 28 | ul.uk-list.uk-text-small 29 | li 30 | a.uk-link-muted(href="#") 31 | +icon("receiver")(class="uk-margin-small-right") 32 | span.tm-pseudo= shopInfo.phone 33 | li 34 | a.uk-link-muted(href="#") 35 | +icon("mail")(class="uk-margin-small-right") 36 | span.tm-pseudo= shopInfo.email 37 | li 38 | div.uk-text-muted 39 | +icon("location")(class="uk-margin-small-right") 40 | span!= shopInfo.address 41 | li 42 | div.uk-text-muted 43 | +icon("clock")(class="uk-margin-small-right") 44 | span= shopInfo.openingHours 45 | 46 | div 47 | form.uk-form-stacked 48 | label 49 | div.uk-form-label.uk-text-muted Subscribe for updates 50 | div.uk-inline.uk-width-1-1 51 | a.uk-form-icon.uk-form-icon-flip(href="#" uk-icon="mail") 52 | input.uk-input(type="email" placeholder="Your email" required) 53 | 54 | div.uk-margin.uk-text-small.uk-text-muted Shopping Categories icons by Jaro Sigrist from Noun Project 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/templates/partials/_head.pug: -------------------------------------------------------------------------------- 1 | meta(charset="UTF-8") 2 | meta(http-equiv="x-ua-compatible" content="ie=edge") 3 | meta(name="viewport" content="width=device-width, initial-scale=1") 4 | if page.title 5 | title= page.title 6 | -------------------------------------------------------------------------------- /src/templates/partials/_header.pug: -------------------------------------------------------------------------------- 1 | include ../components/_toolbar 2 | include ../components/_navbar 3 | -------------------------------------------------------------------------------- /src/templates/partials/_nav-offcanvas.pug: -------------------------------------------------------------------------------- 1 | div#nav-offcanvas(uk-offcanvas="overlay: true") 2 | aside.uk-offcanvas-bar.uk-padding-remove 3 | div.uk-card.uk-card-default.uk-card-small.tm-shadow-remove 4 | 5 | header.uk-card-header.uk-flex.uk-flex-middle 6 | div 7 | a.uk-link-muted.uk-text-bold(href="#")= shopInfo.phone 8 | div.uk-text-xsmall.uk-text-muted(style="margin-top: -2px;") 9 | div!= shopInfo.address 10 | div= shopInfo.openingHours 11 | 12 | nav.uk-card-small.uk-card-body 13 | ul.uk-nav-default.uk-nav-parent-icon.uk-list-divider(uk-nav) 14 | each item in navbarMenu 15 | li(class= { "uk-parent": item.items }) 16 | a(href= item.href)= item.name 17 | if item.items 18 | ul.uk-nav-sub.uk-list-divider 19 | each category in item.items 20 | li: a(href="subcategory.html")= category.name 21 | if item.name === "Catalog" 22 | li.uk-text-center 23 | +link-to-all('see all categories', item.href) 24 | if item.name === "Brands" 25 | li.uk-text-center 26 | +link-to-all('see all brands', item.href) 27 | li 28 | a(href="compare.html") Compare 29 | span.uk-badge.uk-margin-xsmall-left 3 30 | 31 | nav.uk-card-small.uk-card-body 32 | ul.uk-nav.uk-nav-default 33 | each item in toolbarMenu 34 | li: a(href= item.href)= item.name 35 | 36 | nav.uk-card-body 37 | ul.uk-iconnav.uk-flex-center 38 | each social in socials 39 | li: a(href="#" title= social.name uk-icon= social.icon) 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/templates/partials/_products.pug: -------------------------------------------------------------------------------- 1 | div.uk-grid-medium.uk-child-width-1-1(uk-grid) 2 | 3 | //- Items 4 | div 5 | div.uk-card.uk-card-default.uk-card-small.tm-ignore-container 6 | div#products.uk-grid-collapse.uk-child-width-1-1(uk-grid) 7 | 8 | //- Settings 9 | div.uk-card-header 10 | div.uk-grid-small.uk-flex-middle(uk-grid) 11 | 12 | //- Sorting 13 | div(class="uk-width-1-1 " + 14 | "uk-width-expand@s " + 15 | "uk-flex " + 16 | "uk-flex-center " + 17 | "uk-flex-left@s " + 18 | "uk-text-small") 19 | 20 | span.uk-margin-small-right.uk-text-muted Sort by: 21 | 22 | ul.uk-subnav.uk-margin-remove 23 | li.uk-active.uk-padding-remove 24 | a.uk-text-lowercase(href="#") relevant 25 | +icon("chevron-down", ".5")(class="uk-margin-xsmall-left") 26 | li 27 | a.uk-text-lowercase(href="#") price 28 | li 29 | a.uk-text-lowercase(href="#") newest 30 | 31 | //- Filters button & change view 32 | div(class="uk-width-1-1 uk-width-auto@s uk-flex uk-flex-center uk-flex-middle") 33 | 34 | //- Filters button 35 | button(class="uk-button uk-button-default uk-button-small uk-hidden@m" 36 | uk-toggle="target: #filters") 37 | +icon("settings", ".75")(class="uk-margin-xsmall-right") 38 | | Filters 39 | 40 | //- Change view 41 | div.tm-change-view.uk-margin-small-left 42 | ul(class="uk-subnav uk-iconnav js-change-view" 43 | uk-switcher) 44 | li 45 | a.uk-active(data-view="grid" 46 | uk-icon="grid" 47 | uk-tooltip="Grid") 48 | li 49 | a(data-view="list" 50 | uk-icon="list" 51 | uk-tooltip="List") 52 | 53 | //- Items 54 | div 55 | div(class="uk-grid-collapse " + 56 | "uk-child-width-1-3 " + 57 | "tm-products-grid " + 58 | "js-products-grid" 59 | uk-grid) 60 | each product in products 61 | +product(product) 62 | 63 | //- Load more 64 | div 65 | button.uk-button.uk-button-default.uk-button-large.uk-width-1-1( 66 | style="border-top-left-radius: 0; border-top-right-radius: 0;") 67 | +icon("plus", ".75")(class="uk-margin-small-right") 68 | span Load more 69 | 70 | //- Pagination 71 | div 72 | ul.uk-pagination.uk-flex-center 73 | li.uk-active: span 1 74 | li: a(href="#") 2 75 | li: a(href="#") 3 76 | li: a(href="#") 4 77 | li: a(href="#") 5 78 | li.uk-disabled: span … 79 | li: a(href="#") 20 80 | li: a(href="#"): span(uk-pagination-next) --------------------------------------------------------------------------------