Showing preview only (207K chars total). Download the full file or copy to clipboard to get everything.
Repository: vkovic/uikit-computer-store-template
Branch: master
Commit: bdc03c99f4bf
Files: 73
Total size: 188.5 KB
Directory structure:
gitextract_l960gcdy/
├── .gitignore
├── LICENCE
├── README.md
├── gulpfile.js
├── package.json
└── src/
├── js/
│ ├── script.js
│ ├── uikit-icons.js
│ └── uikit.js
├── sass/
│ ├── custom.scss
│ ├── style.scss
│ ├── uikit-components.scss
│ └── uikit-theme/
│ ├── mixins/
│ │ ├── _import.scss
│ │ ├── accordion.scss
│ │ ├── article.scss
│ │ ├── background.scss
│ │ ├── base.scss
│ │ ├── breadcrumb.scss
│ │ ├── button.scss
│ │ ├── card.scss
│ │ ├── form.scss
│ │ ├── margin.scss
│ │ ├── notification.scss
│ │ ├── offcanvas.scss
│ │ ├── section.scss
│ │ ├── subnav.scss
│ │ ├── table.scss
│ │ └── text.scss
│ └── variables.scss
└── 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
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
.DS_Store?
._*
Thumbs.db
Icon?
.Trashes
ehthumbs.db
*.log
*.log*
*.swp
.idea
dist
node_modules
================================================
FILE: LICENCE
================================================
The MIT License (MIT)
Copyright (c) 2018 Vladimir Ković
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Computer store e-commerce template
[](https://github.com/vkovic/uikit-computer-store-template/blob/master/LICENSE)
### Computer store e-commerce template built with `UIkit` using `Sass`
This theme is port of
[chekromul/uikit-ecommerce-template](https://github.com/chekromul/uikit-ecommerce-template)
to use `Sass` instead of `Less`.
After I found this great e-commerce theme, I decided to spend some time adopting it to `Sass` preprocessor since lot of
us are preferring it over `Less`.
Demo: [https://vkovic.github.io/uikit-computer-store-template](https://vkovic.github.io/uikit-computer-store-template)
[](https://raw.githubusercontent.com/vkovic/uikit-computer-store-template/gh-pages/images/preview.png "Computer store e-commerce template")
---
## Compatibility
This theme requires `Node.js` version `>= 8.2`
## Technologies
- [UIkit](https://getuikit.com)
- [Pug](https://pugjs.org)
- [Sass](https://sass-lang.com/)
- [Gulp](https://gulpjs.com)
## Installation
To install theme first clone this repo
```bash
git clone https://github.com/vkovic/uikit-computer-store-template.git
```
and go to directory
```bash
cd uikit-computer-store-template
```
After this, there is 2 ways of installing it either using `npm` or `yarn`
### Install via `npm`
Install required packages via `npm`:
```bash
npm install
```
Compile project
```bash
npm run build
```
### Install via `yarn`
Install required packages via `yarn`:
```bash
yarn
```
Compile project
```bash
yarn build
```
## Copyright and Credits
- [Original (Less version) Theme Developer](https://github.com/chekromul)
- [Shopping Categories Colection](https://thenounproject.com/jarosigrist/collection/shopping-categories) icons by
Jaro Sigrist from Noun Project. Licensed under Creative Commons Attribution 3.0.
================================================
FILE: gulpfile.js
================================================
var gulp = require('gulp'),
clean = require('gulp-clean'),
include = require('gulp-include'),
pug = require('gulp-pug'),
sass = require('gulp-sass'),
server = require('gulp-webserver'),
tildeImporter = require('node-sass-tilde-importer');
// Remove previous dist folder if exists
gulp.task('clean', function () {
return gulp.src('dist', {read: false, allowEmpty: true})
.pipe(clean());
});
// Compile pug templates into HTML
gulp.task('html', function () {
return gulp.src('src/templates/pages/*.pug')
.pipe(pug({
basedir: 'src/templates',
pretty: true
}))
.pipe(gulp.dest('dist'));
});
// Copy images to dist
gulp.task('images', function () {
return gulp.src('src/img/**/*')
.pipe(gulp.dest('dist/images'));
});
// Compile scss files into css
gulp.task('styles', function () {
return gulp.src('src/sass/style.scss')
.pipe(sass({importer: tildeImporter}))
.pipe(gulp.dest('dist/styles'));
});
// Compile js files
gulp.task('scripts', function () {
return gulp.src('src/js/*.js')
.pipe(include({
extensions: 'js',
hardFail: true,
includePaths: [
__dirname + '/node_modules',
__dirname + '/src/js'
]
}))
.pipe(gulp.dest('dist/scripts'));
});
// Run server from dist directory and open browser
gulp.task('server', function () {
gulp.src('dist').pipe(server({open: true}));
});
// Compile project by combining tasks above
gulp.task('build',
gulp.series(
'clean',
gulp.parallel('html', 'images', 'styles', 'scripts'), // Parallel tasks
'server'
)
);
================================================
FILE: package.json
================================================
{
"name": "uikit-computer-store-template",
"version": "1.0.0",
"description": "Computer store e-commerce template built with UIkIt, Sass and JS",
"author": "Vladimir Ković",
"license": "MIT",
"homepage": "https://github.com/vkovic/uikit-computer-store-template",
"main": "index.html",
"scripts": {
"build": "gulp build"
},
"repository": {
"type": "git",
"url": "https://github.com/vkovic/uikit-computer-store-template.git"
},
"engines": {
"node": ">=8.2"
},
"devDependencies": {
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-clean": "^0.4.0",
"gulp-include": "^2.3.1",
"gulp-pug": "^4.0.1",
"gulp-sass": "^4.0.2",
"gulp-webserver": "^0.9.1",
"node-sass-tilde-importer": "^1.0.2"
},
"dependencies": {
"uikit": "^3.0.0-rc.26"
}
}
================================================
FILE: src/js/script.js
================================================
// Google Maps
function initMap() {
var elements = document.querySelectorAll('.js-map');
Array.prototype.forEach.call(elements, function (el) {
var lat = +el.dataset.latitude,
lng = +el.dataset.longitude,
zoom = +el.dataset.zoom;
if ((lat !== '') && (lng !== '') && (zoom > 0)) {
var map = new google.maps.Map(el, {
zoom: zoom,
center: {lat: lat, lng: lng},
disableDefaultUI: true
});
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: {lat: lat, lng: lng}
});
}
});
}
// Change view
(function () {
var container = document.getElementById('products');
if (container) {
var grid = container.querySelector('.js-products-grid'),
viewClass = 'tm-products-',
optionSwitch = Array.prototype.slice.call(container.querySelectorAll('.js-change-view a'));
function init() {
optionSwitch.forEach(function (el, i) {
el.addEventListener('click', function (ev) {
ev.preventDefault();
_switch(this);
}, false);
});
}
function _switch(opt) {
optionSwitch.forEach(function (el) {
grid.classList.remove(viewClass + el.getAttribute('data-view'));
});
grid.classList.add(viewClass + opt.getAttribute('data-view'));
}
init();
}
})();
// Increment
function increment(incrementor, target) {
var value = parseInt(document.getElementById(target).value, 10);
value = isNaN(value) ? 0 : value;
if (incrementor < 0 && value > 1) {
value += incrementor;
} else {
value += incrementor;
}
document.getElementById(target).value = value;
}
// Scroll to description
(function () {
UIkit.scroll('.js-scroll-to-description', {
duration: 300,
offset: 58
});
})();
// Update sticky tabs
(function () {
UIkit.util.on('.js-product-switcher', 'show', function () {
UIkit.update();
});
})();
// Add to cart
(function () {
var addToCartButtons = document.querySelectorAll('.js-add-to-cart');
Array.prototype.forEach.call(addToCartButtons, function (el) {
el.onclick = function () {
UIkit.offcanvas('#cart-offcanvas').show();
};
});
})();
// Action buttons
(function () {
var addToButtons = document.querySelectorAll('.js-add-to');
Array.prototype.forEach.call(addToButtons, function (el) {
var link,
message = '<span class="uk-margin-small-right" uk-icon=\'check\'></span>Added to ',
links = {
favorites: '<a href="/favorites">favorites</a>',
compare: '<a href="/compare">compare</a>'
};
if (el.classList.contains('js-add-to-favorites')) {
link = links.favorites;
}
if (el.classList.contains('js-add-to-compare')) {
link = links.compare;
}
el.onclick = function () {
if (!this.classList.contains('js-added-to')) {
UIkit.notification({
message: message + link,
pos: 'bottom-right'
});
}
this.classList.toggle('tm-action-button-active');
this.classList.toggle('js-added-to');
};
});
})();
================================================
FILE: src/js/uikit-icons.js
================================================
//=require ../../node_modules/uikit/dist/js/uikit-icons.js
================================================
FILE: src/js/uikit.js
================================================
//=require ../../node_modules/uikit/dist/js/uikit.js
================================================
FILE: src/sass/custom.scss
================================================
//
// Custom variables
//
// Breakpoints
$breakpoint-tablet: 768px;
// Product card
$product-card-title-max-lines: 3;
$product-card-title-font-size: 16px;
$product-card-title-line-height: 22px;
$product-card-title-max-height: $product-card-title-max-lines * $product-card-title-line-height;
$product-card-title-font-size-s: 18px;
$product-card-title-line-height-s: 24px;
$product-card-title-max-height-s: $product-card-title-max-lines * $product-card-title-line-height-s;
$product-card-price-font-size: 20px;
$product-card-add-button-width: 36px;
$product-card-add-button-height: 36px;
// List view product card
$list-view-product-card-media-width: 33.3%;
$list-view-product-card-media-min-width: 170px;
$list-view-product-card-price-font-size: 24px;
// Scrollbox
$scrollbox-max-height: 300px;
// Checkbox, radio
$control-checkbox-image: "../../images/backgrounds/form-checkbox.svg";
$control-radio-image: "../../images/backgrounds/form-radio.svg";
$control-inputs-size: 16px;
$control-inputs-hover: #F8F8F8;
// Ratio
$ratio-1-1: 100%;
$ratio-3-2: 66.66%;
$ratio-4-3: 75%;
$ratio-16-9: 56.25%;
//
// Custom mixins
//
@mixin center($horizontal: true, $vertical: true) {
position: absolute;
@if $horizontal == true and $vertical == true {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@if $horizontal == true and $vertical == false {
left: 50%;
transform: translate(-50%, 0);
}
@if $horizontal == false and $vertical == true {
top: 50%;
transform: translate(0, -50%);
}
}
/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {
h3, .uk-h3 {
font-size: $base-h3-font-size-m;
}
}
//
// Toolbar
//
.tm-toolbar-container:not(.uk-navbar-transparent) {
background: $global-secondary-background;
}
.tm-toolbar-container .uk-navbar-item {
color: $navbar-nav-item-color;
}
.tm-toolbar-container .uk-navbar-nav > li > a {
text-transform: none;
}
.tm-toolbar-container .uk-navbar-nav > li > a,
.tm-toolbar-container .uk-navbar-item,
.tm-toolbar-container .uk-navbar-toggle {
height: 40px;
}
//
// Navbar
//
.tm-navbar-container:not(.uk-navbar-transparent) {
background: $global-background;
}
.tm-navbar-container {
border-bottom: $global-border-width solid $global-border;
}
.tm-navbar-container-fixed {
z-index: $global-z-index + 5;
}
.tm-navbar-container .uk-navbar-nav > li > a,
.tm-navbar-container .uk-navbar-item,
.tm-navbar-container .uk-navbar-toggle {
height: 60px;
}
//
// Navbar button
//
.tm-navbar-button {
position: relative;
padding: 0 10px;
@media (min-width: $breakpoint-small) {
padding: 0 15px;
}
.uk-badge {
font-size: .625rem;
position: absolute;
top: 10px;
right: 5px;
min-width: 18px;
height: 18px;
}
}
//
// Link to all
//
.tm-link-to-all {
& > * {
vertical-align: middle;
}
& > .uk-icon {
position: relative;
left: 0;
margin-left: 3px;
transition: left 60ms;
}
&:hover > .uk-icon {
left: 2px;
}
}
//
// Aside column
//
.tm-aside-column {
min-width: 270px;
}
//
// Change view
//
.tm-change-view {
display: none;
@media(min-width: $breakpoint-tablet) {
display: flex;
}
}
//
// Product card
//
.tm-product-card {
display: flex;
flex-direction: row;
transition: box-shadow $box-shadow-duration ease-in-out;
background-color: $global-background;
border-left: $global-border-width solid $global-border;
border-bottom: $global-border-width solid $global-border;
//box-shadow: 0 0 0 $global-border-width $global-border;
&.uk-first-column {
border-left: none;
}
@media (max-width: $breakpoint-tablet - 1) {
width: 100%;
}
@media (min-width: $breakpoint-tablet) {
flex-direction: column;
&:hover {
z-index: 2;
box-shadow: $global-xlarge-box-shadow;
}
}
}
// Media
.tm-product-card-media {
position: relative;
box-sizing: border-box;
width: 40%;
flex-shrink: 0;
& > .tm-ratio {
height: 100%;
}
& > .tm-ratio > .tm-media-box {
padding: 15px;
}
@media (min-width: $breakpoint-small) {
& > .tm-ratio > .tm-media-box {
padding: 20px;
}
}
@media (min-width: $breakpoint-tablet) {
width: 100%;
}
}
// Body
.tm-product-card-body {
display: flex;
flex-direction: column;
padding: 15px 15px 15px 0;
flex-grow: 1;
@media (min-width: $breakpoint-small) {
padding: 20px 20px 20px 0;
}
@media (min-width: $breakpoint-tablet) {
padding: 0 20px 20px 20px;
}
}
// Title
.tm-product-card-title {
font-size: $product-card-title-font-size;
line-height: $product-card-title-line-height;
display: -webkit-box;
display: -ms-flexbox;
overflow: hidden;
max-height: $product-card-title-max-height;
margin: 0 0 20px;
text-overflow: ellipsis;
color: inherit;
-webkit-line-clamp: $product-card-title-max-lines;
-webkit-box-orient: vertical;
@media (min-width: $breakpoint-small) {
font-size: $product-card-title-font-size-s;
line-height: $product-card-title-line-height-s;
max-height: $product-card-title-max-height-s;
}
}
.tm-product-card-properties {
display: none;
margin: 0;
& > li:nth-child(n+2) {
margin-top: 5px;
}
}
.tm-product-card-shop {
display: flex;
margin-top: auto;
align-items: flex-end;
}
.tm-product-card-prices {
flex-grow: 1;
}
.tm-product-card-price {
font-size: $product-card-price-font-size;
font-weight: 500;
line-height: 1;
}
.tm-product-card-add {
display: flex;
margin-left: 10px;
align-items: flex-end;
flex-shrink: 0;
}
.tm-product-card-add-button {
position: relative;
bottom: -8px;
display: inline-flex;
width: $product-card-add-button-width;
height: $product-card-add-button-height;
padding: 0;
border-radius: 500px;
justify-content: center;
align-items: center;
}
.tm-product-card-add-button-text {
display: none;
}
// Labels
.tm-product-card-labels {
position: absolute;
z-index: 1;
top: 20px;
right: 20px;
& > .uk-label {
font-size: 10px;
display: table;
margin-bottom: 3px;
margin-left: auto;
padding: 0 3px;
&:last-child {
margin-bottom: 0;
}
}
}
// Actions
.tm-product-card-actions {
margin-right: 10px;
margin-bottom: 2px;
&:only-child {
margin-right: 0;
}
}
.tm-product-card-action {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
.tm-product-card-action-text {
display: none;
border-bottom: 1px dotted;
}
// List view
.tm-products-list .tm-product-card {
width: 100%;
border-bottom: $global-border-width solid $global-border;
box-shadow: none;
&:last-child {
border-bottom: none;
}
&:hover {
box-shadow: none;
}
}
@media (min-width: $breakpoint-tablet) {
.tm-products-list .tm-product-card {
flex-direction: row;
}
.tm-products-list .tm-product-card-media {
width: 33.3%;
}
.tm-products-list .tm-product-card-body {
flex-direction: row;
padding: 20px 20px 20px 0;
}
.tm-products-list .tm-product-card-info {
padding-right: 20px;
flex-grow: 1;
flex-basis: 0%; // for IE
}
.tm-products-list .tm-product-card-properties {
display: block;
}
.tm-products-list .tm-product-card-shop {
display: block;
box-sizing: border-box;
width: $list-view-product-card-media-width;
min-width: $list-view-product-card-media-min-width;
margin: 0;
padding-left: 20px;
border-left: $global-border-width solid $global-border;
flex-shrink: 0;
}
.tm-products-list .tm-product-card-price {
font-size: 24px;
}
.tm-products-list .tm-product-card-add {
flex-direction: column;
margin-top: 10px;
margin-left: 0;
}
.tm-products-list .tm-product-card-add-button {
bottom: 0;
width: 100%;
height: auto;
padding: 0px $button-padding-horizontal;
border-radius: $border-rounded-border-radius;
}
.tm-products-list .tm-product-card-add-button-icon {
display: none;
}
.tm-products-list .tm-product-card-add-button-text {
display: block;
}
.tm-products-list .tm-product-card-actions {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 10px;
margin-right: 0;
margin-bottom: 0;
order: 1;
align-self: flex-start;
&:only-child {
margin-top: 0;
}
}
.tm-products-list .tm-product-card-action {
margin-right: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.tm-products-list .tm-product-card-action-text {
display: inline;
margin-left: 5px;
}
}
//
// Actions buttons
//
.tm-action-button-active,
.tm-action-button-active > * {
color: $text-danger-color;
}
//
// Filters
//
.tm-filters {
display: none;
}
.tm-filters .uk-accordion > * {
margin-top: 0;
border-top: $global-border-width solid $global-border;
&:first-child {
border-top: none;
}
}
// Offcanvas
.tm-filters.uk-offcanvas.uk-open {
margin: 0;
padding: 0;
}
.tm-filters.uk-offcanvas.uk-offcanvas-overlay:before {
position: fixed;
}
@media (min-width: $breakpoint-medium) {
.tm-filters.uk-offcanvas {
position: static;
display: block;
}
.tm-filters.uk-offcanvas .uk-offcanvas-bar {
position: static;
overflow: visible;
width: auto;
transform: none;
background: none;
}
.tm-filters.uk-offcanvas .uk-offcanvas-bar > .uk-card > .uk-card-header {
display: none;
}
}
//
// Scrollbox
//
.tm-scrollbox {
overflow: auto;
max-height: $scrollbox-max-height;
background: linear-gradient(#FFF 30%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), #FFF 70%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
background-color: $global-background;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
}
//
// Checkbox, radio
//
.tm-checkbox,
.tm-radio {
display: none;
& + label {
position: relative;
display: inline-flex;
cursor: pointer;
}
& + label::before,
& + label::after {
content: "";
display: block;
width: $control-inputs-size;
height: $control-inputs-size;
}
& + label::before {
margin-top: 3px;
margin-right: $global-small-margin;
border: $global-border-width solid $global-border;
flex-shrink: 0;
}
&:hover + label::before {
background-color: $control-inputs-hover;
}
&:checked + label::before {
border-color: transparent;
background-color: $global-primary-background;
}
& + label::after {
position: absolute;
top: 3px;
left: 0;
border: 1px solid transparent;
}
&:checked + label::after {
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
}
}
.tm-checkbox + label::before {
border-radius: $border-rounded-border-radius;
}
.tm-radio + label::before {
border-radius: 50%;
}
.tm-checkbox:checked + label::after {
@include svg-fill($control-checkbox-image, "#000", $global-inverse-color);
}
.tm-radio:checked + label::after {
@include svg-fill($control-radio-image, "#000", $global-inverse-color);
}
//
// Help icon
//
.tm-help-icon {
position: relative;
margin-left: $global-xsmall-margin;
cursor: pointer;
color: $global-muted-color;
border-radius: 100%;
background-color: $global-muted-background;
&:hover {
color: $global-color;
}
}
//
// Slider
//
.tm-slider-items {
.tm-media-box-frame {
padding: $global-xsmall-gutter;
transition: 0.25s linear;
transition-property: opacity;
opacity: 0.75;
}
& > :hover .tm-media-box-frame {
opacity: 1;
}
& > .uk-active .tm-media-box-frame {
opacity: 1;
border-color: $global-primary-background;
}
}
//
// Variations
//
.tm-variations {
margin: 0 0 0 -10px;
& > * {
padding-left: 10px;
}
& > * > :first-child {
color: $global-color;
border: $global-border-width solid $global-border;
}
& > .uk-active > a {
color: $global-color;
border-color: $global-primary-background;
background-color: transparent;
}
& > * > .tm-variation-color {
padding: 5px;
border-radius: 50%;
}
}
.tm-variation-color > div {
width: 20px;
height: 20px;
border-radius: 50%;
}
//
// Product
//
.tm-product-info {
border-top: $global-border-width solid $global-border;
@media (min-width: $breakpoint-medium) {
min-width: 390px;
border-top: none;
border-left: $global-border-width solid $global-border;
}
}
// Price
.tm-product-price {
font-size: 32px;
font-weight: 500;
line-height: 1;
}
// Add to card button
.tm-product-add-button {
padding: 0 15px;
@media(min-width: 420px) {
padding: 0 25px;
}
}
// Description
.tm-product-description {
border-top: $global-border solid $global-border-width;
}
// Nav
.tm-product-nav {
display: flex;
overflow: auto;
background-color: $global-background;
& > .uk-subnav {
display: flex;
margin: 0 auto;
padding: 10px 15px;
flex-wrap: nowrap;
flex-shrink: 0;
@media(min-width: $breakpoint-small) {
padding: 20px;
}
& > :first-child {
padding-left: 0;
}
}
}
.tm-product-nav-fixed {
transition: box-shadow 0.1s ease-in-out;
box-shadow: inset 0 -$global-border-width 0 0 $global-border;
}
//
// Quantity
//
.tm-quantity-input {
width: 60px;
margin: 0 $global-xsmall-margin;
text-align: center;
}
//
// Slidenav
//
.tm-slidenav.uk-invisible {
visibility: visible !important;
pointer-events: none;
opacity: 0.3;
}
//
// Checkout
//
.tm-checkout {
counter-reset: list;
}
.tm-checkout-title::before {
content: counter(list) ". ";
counter-increment: list;
color: $global-muted-color;
}
//
// Choose
//
.tm-choose {
position: relative;
width: 100%;
padding: 40px 20px 10px;
cursor: pointer;
border: $global-border-width solid $global-border;
border-radius: $border-rounded-border-radius;
&.uk-active {
border-color: $global-primary-background;
}
&:not(.uk-active):hover,
&:not(.uk-active):focus {
background-color: $global-muted-background;
}
&::before,
&::after {
content: "";
position: absolute;
top: 12px;
left: 50%;
display: block;
width: $control-inputs-size;
height: $control-inputs-size;
cursor: pointer;
transform: translate(-50%, 0);
}
&::before {
border: $global-border-width solid $global-border;
border-radius: 50%;
flex-shrink: 0;
}
&:hover::before {
background-color: $control-inputs-hover;
}
&.uk-active::before {
border-color: transparent;
background-color: $global-primary-background;
}
&::after {
position: absolute;
border: 1px solid transparent;
}
&.uk-active::after {
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
@include svg-fill($control-radio-image, "#000", $global-inverse-color);
}
.tm-choose-title {
font-size: $global-small-font-size;
text-align: center;
text-transform: uppercase;
color: $global-muted-color;
}
&.uk-active .tm-choose-title {
color: $global-color;
}
.tm-choose-description {
font-size: $global-xsmall-font-size;
margin-top: $global-xsmall-margin;
text-align: center;
color: $global-muted-color;
}
}
//
// Wrapper
//
// Small card
.uk-card-body.uk-card-small .tm-wrapper,
.uk-card-small .uk-card-body .tm-wrapper {
margin-right: -$card-small-body-padding-horizontal;
margin-left: -$card-small-body-padding-horizontal;
}
.uk-card-body.uk-card-small .tm-wrapper:first-child,
.uk-card-small .uk-card-body .tm-wrapper:first-child {
margin-top: -$card-small-body-padding-vertical;
}
.uk-card-body.uk-card-small .tm-wrapper:last-child,
.uk-card-small .uk-card-body .tm-wrapper:last-child {
margin-bottom: -$card-small-body-padding-vertical;
}
.uk-card-body.uk-card-small .tm-wrapper figcaption,
.uk-card-small .uk-card-body .tm-wrapper figcaption {
margin-right: $card-small-body-padding-horizontal;
margin-left: $card-small-body-padding-horizontal;
}
// Normal card
.uk-card-body .tm-wrapper {
margin-right: -$card-body-padding-horizontal;
margin-left: -$card-body-padding-horizontal;
}
.uk-card-body .tm-wrapper:first-child {
margin-top: -$card-body-padding-vertical;
}
.uk-card-body .tm-wrapper:last-child {
margin-bottom: -$card-body-padding-vertical;
}
.uk-card-body .tm-wrapper figcaption {
margin-top: $global-xsmall-margin;
margin-right: $card-body-padding-horizontal;
margin-left: $card-body-padding-horizontal;
text-align: center;
color: $global-muted-color;
}
@media (min-width: $breakpoint-large) {
.uk-card-body .tm-wrapper {
margin-right: -$card-body-padding-horizontal-l;
margin-left: -$card-body-padding-horizontal-l;
}
.uk-card-body .tm-wrapper:first-child {
margin-top: -$card-body-padding-vertical-l;
}
.uk-card-body .tm-wrapper:last-child {
margin-bottom: -$card-body-padding-vertical-l;
}
}
//
// Compare table
//
.tm-compare-table {
height: 0;
td,
th {
vertical-align: top;
}
td:not(:first-child) {
//border-left: $table-striped-border-width solid $table-striped-border;
}
th {
font-size: $global-font-size;
text-transform: none;
}
tbody > tr:nth-of-type(even) {
background-color: $table-striped-row-background;
}
}
.tm-compare-table-column {
min-width: 240px;
}
//
// Rating
//
.tm-rating {
margin-left: -3px;
color: $global-muted-color;
& > * {
padding-left: 3px;
}
}
//
// Reviews
//
.tm-reviews-column {
min-width: 200px;
}
//
// Cart
//
.tm-cart-quantity-column {
min-width: 115px !important;
}
//
// Nav
//
.tm-nav > li > a {
padding: 10px 0;
}
.tm-nav > li.uk-active > a,
.tm-nav > li > a:hover {
box-shadow: inset 2px 0 0 $global-primary-background;
}
.tm-nav > li.uk-active > a {
font-weight: 500;
}
//
// Ratio
//
.tm-ratio {
position: relative;
&::before {
content: "";
display: block;
width: 100%;
}
& > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.tm-ratio-1-1::before {
padding-top: $ratio-1-1;
}
.tm-ratio-3-2::before {
padding-top: $ratio-3-2;
}
.tm-ratio-4-3::before {
padding-top: $ratio-4-3;
}
.tm-ratio-16-9::before {
padding-top: $ratio-16-9;
}
//
// Media box
//
.tm-media-box {
display: block;
box-sizing: border-box;
height: 100%;
}
.tm-media-box-frame {
border: $global-border-width solid $global-border;
border-radius: $border-rounded-border-radius;
}
.tm-media-box-zoom {
cursor: zoom-in;
}
.tm-media-box-wrap {
position: relative;
height: 100%;
margin: 0;
& > * {
@include center();
display: block;
max-width: 100%;
max-height: 100%;
}
}
//
// Pseudo
//
.tm-pseudo {
border-bottom: $global-border-width dotted;
}
//
// Ignore container
//
.tm-ignore-container {
@media(max-width: $breakpoint-small) {
margin-right: -$container-padding-horizontal;
margin-left: -$container-padding-horizontal;
border-radius: 0;
}
}
//
// Remove shadow
//
.tm-shadow-remove {
box-shadow: none;
}
//
// Shine effect
//
.tm-shine {
position: relative;
overflow: hidden;
&::after {
content: "";
position: absolute;
top: 0;
left: -30px;
width: 30px;
height: 100%;
transform: skew(-10deg, 0deg);
opacity: 0.3;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.03) 1%,
rgba(255, 255, 255, 0.6) 30%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.85) 70%,
rgba(255, 255, 255, 0.85) 71%,
rgba(255, 255, 255, 0) 100%);
}
&:hover::after {
left: 100%;
transition: .6s ease-out;
}
}
//
// Grayscale
//
.tm-grayscale {
filter: grayscale(100%) opacity(50%);
&:hover {
filter: none;
}
}
================================================
FILE: src/sass/style.scss
================================================
// UIkit variables and custom variable overrides
@import "uikit-theme/variables";
// UIkit mixins
@import "~uikit/src/scss/mixins-theme.scss";
// Custom mixins for components override (using hooks)
// (see: https://getuikit.com/docs/sass#use-hooks)
@import "uikit-theme/mixins/import";
// Partial import of UIkit components needed by our theme
@import "uikit-components";
// Our custom styles
@import "custom";
================================================
FILE: src/sass/uikit-components.scss
================================================
// Base
@import "~uikit/src/scss/components/mixin";
@import "~uikit/src/scss/components/base";
// Elements
@import "~uikit/src/scss/components/link";
@import "~uikit/src/scss/components/heading";
//@import "~uikit/src/scss/components/divider";
@import "~uikit/src/scss/components/list";
@import "~uikit/src/scss/components/description-list";
@import "~uikit/src/scss/components/table";
@import "~uikit/src/scss/components/icon";
//@import "~uikit/src/scss/components/form-range";
@import "~uikit/src/scss/components/form"; // After: Icon, Form Range
@import "~uikit/src/scss/components/button";
// Layout
@import "~uikit/src/scss/components/section";
@import "~uikit/src/scss/components/container";
@import "~uikit/src/scss/components/grid";
//@import "~uikit/src/scss/components/tile";
@import "~uikit/src/scss/components/card";
// Common
@import "~uikit/src/scss/components/close"; // After: Icon
@import "~uikit/src/scss/components/spinner"; // After: Icon
//@import "~uikit/src/scss/components/totop"; // After: Icon
//@import "~uikit/src/scss/components/marker"; // After: Icon
//@import "~uikit/src/scss/components/alert"; // After: Close
@import "~uikit/src/scss/components/badge";
@import "~uikit/src/scss/components/label";
@import "~uikit/src/scss/components/overlay"; // After: Icon
@import "~uikit/src/scss/components/article"; // After: Subnav
//@import "~uikit/src/scss/components/comment"; // After: Subnav
@import "~uikit/src/scss/components/search"; // After: Icon
// Navs
@import "~uikit/src/scss/components/nav";
@import "~uikit/src/scss/components/navbar"; // After: Card, Grid, Nav, Icon, Search
@import "~uikit/src/scss/components/subnav";
@import "~uikit/src/scss/components/breadcrumb";
@import "~uikit/src/scss/components/pagination";
@import "~uikit/src/scss/components/tab";
@import "~uikit/src/scss/components/slidenav"; // After: Icon
@import "~uikit/src/scss/components/dotnav";
//@import "~uikit/src/scss/components/thumbnav";
// JavaScript
@import "~uikit/src/scss/components/accordion";
@import "~uikit/src/scss/components/drop"; // After: Card
@import "~uikit/src/scss/components/dropdown"; // After: Card
@import "~uikit/src/scss/components/modal"; // After: Close
@import "~uikit/src/scss/components/lightbox"; // After: Close
@import "~uikit/src/scss/components/slideshow";
@import "~uikit/src/scss/components/slider";
@import "~uikit/src/scss/components/sticky";
@import "~uikit/src/scss/components/offcanvas";
@import "~uikit/src/scss/components/switcher";
//@import "~uikit/src/scss/components/leader";
// Scrollspy
// Toggle
// Scroll
// Additional
@import "~uikit/src/scss/components/iconnav";
@import "~uikit/src/scss/components/notification";
@import "~uikit/src/scss/components/tooltip";
//@import "~uikit/src/scss/components/placeholder";
//@import "~uikit/src/scss/components/progress";
//@import "~uikit/src/scss/components/sortable";
//@import "~uikit/src/scss/components/countdown";
// Utilities
//@import "~uikit/src/scss/components/animation";
@import "~uikit/src/scss/components/width";
@import "~uikit/src/scss/components/height";
@import "~uikit/src/scss/components/text";
@import "~uikit/src/scss/components/column";
@import "~uikit/src/scss/components/cover";
@import "~uikit/src/scss/components/background";
//@import "~uikit/src/scss/components/align";
//@import "~uikit/src/scss/components/svg";
@import "~uikit/src/scss/components/utility";
@import "~uikit/src/scss/components/flex"; // After: Utility
@import "~uikit/src/scss/components/margin";
@import "~uikit/src/scss/components/padding";
@import "~uikit/src/scss/components/position";
//@import "~uikit/src/scss/components/transition";
@import "~uikit/src/scss/components/visibility";
@import "~uikit/src/scss/components/inverse";
// Need to be loaded last
//@import "~uikit/src/scss/components/print";
================================================
FILE: src/sass/uikit-theme/mixins/_import.scss
================================================
@import "accordion";
@import "article";
@import "background";
@import "base";
@import "breadcrumb";
@import "button";
@import "card";
@import "form";
@import "margin";
@import "notification";
@import "offcanvas";
@import "section";
@import "subnav";
@import "table";
@import "text";
================================================
FILE: src/sass/uikit-theme/mixins/accordion.scss
================================================
@mixin hook-accordion-title() {
cursor: pointer;
overflow: hidden;
&::before {
content: "";
width: ($accordion-title-line-height * 1em);
height: ($accordion-title-line-height * 1em);
margin-left: $accordion-icon-margin-left;
float: right;
@include svg-fill($internal-accordion-close-image, "#000", $accordion-icon-color);
background-repeat: no-repeat;
background-position: 50% 50%;
}
.uk-open > &::before { @include svg-fill($internal-accordion-open-image, "#000", $accordion-icon-color); }
}
================================================
FILE: src/sass/uikit-theme/mixins/article.scss
================================================
@mixin hook-article-misc() {
.uk-article-body {
&:not(:first-child) {
margin-top: $global-margin;
}
& > p,
& > ul,
& > ol,
& > dl,
& > h1,
& > h2,
& > h3,
& > h4,
& > h5,
& > h6,
& > blockquote,
& > pre,
& > iframe,
& > figure,
& > table,
& > hr,
& > twitterwidget {
width: 100%;
max-width: $breakpoint-small;
margin-right: auto;
margin-left: auto;
}
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
}
}
================================================
FILE: src/sass/uikit-theme/mixins/background.scss
================================================
@mixin hook-background-misc() {
.uk-background-primary-lighten {
background-color: $background-primary-background-lighten;
}
}
================================================
FILE: src/sass/uikit-theme/mixins/base.scss
================================================
@mixin hook-base-body() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
================================================
FILE: src/sass/uikit-theme/mixins/breadcrumb.scss
================================================
@mixin hook-breadcrumb-misc() {
.uk-breadcrumb > :nth-last-child(2):not(.uk-first-column)::before {
@media (max-width: $breakpoint-small) {
content: "←";
margin: 0 10px 0 -20px;
}
}
.uk-breadcrumb > :not(:nth-last-child(2)) {
display: none;
@media (min-width: $breakpoint-small) {
display: inline;
}
}
}
================================================
FILE: src/sass/uikit-theme/mixins/button.scss
================================================
@mixin hook-button() {
border-radius: $border-rounded-border-radius;
text-transform: $button-text-transform;
transition: 0.1s ease-in-out;
transition-property: color, background-color, border-color;
}
================================================
FILE: src/sass/uikit-theme/mixins/card.scss
================================================
@mixin hook-card-default() {
border-radius: $border-rounded-border-radius;
box-shadow: $card-default-box-shadow;
}
@mixin hook-card-media() {
margin: 0;
}
@mixin hook-card-misc() {
.uk-card-body + .uk-card-body {
border-top: $global-border-width solid $global-border;
}
/*
* Default
*/
.uk-card-body > .uk-nav-default {
margin-left: (-$card-body-padding-horizontal);
margin-right: (-$card-body-padding-horizontal);
}
.uk-card-body > .uk-nav-default:only-child {
margin-top: (-$card-body-padding-vertical + 15px);
margin-bottom: (-$card-body-padding-vertical + 15px);
}
.uk-card-body .uk-nav-default > li > a,
.uk-card-body .uk-nav-default .uk-nav-header,
.uk-card-body .uk-nav-default .uk-nav-divider {
padding-left: $card-body-padding-horizontal;
padding-right: $card-body-padding-horizontal;
}
.uk-card-body .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-body-padding-horizontal; }
/* Desktop and bigger */
@media (min-width: $breakpoint-large) {
.uk-card-body > .uk-nav-default {
margin-left: (-$card-body-padding-horizontal-l);
margin-right: (-$card-body-padding-horizontal-l);
}
.uk-card-body > .uk-nav-default:only-child {
margin-top: (-$card-body-padding-vertical-l + 15px);
margin-bottom: (-$card-body-padding-vertical-l + 15px);
}
.uk-card-body .uk-nav-default > li > a,
.uk-card-body .uk-nav-default .uk-nav-header,
.uk-card-body .uk-nav-default .uk-nav-divider {
padding-left: $card-body-padding-horizontal-l;
padding-right: $card-body-padding-horizontal-l;
}
.uk-card-body .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-body-padding-horizontal-l; }
}
/*
* Small
*/
.uk-card-small > .uk-nav-default {
margin-left: (-$card-small-body-padding-horizontal);
margin-right: (-$card-small-body-padding-horizontal);
}
.uk-card-small > .uk-nav-default:only-child {
margin-top: (-$card-small-body-padding-vertical + 15px);
margin-bottom: (-$card-small-body-padding-vertical + 15px);
}
.uk-card-small .uk-nav-default > li > a,
.uk-card-small .uk-nav-default .uk-nav-header,
.uk-card-small .uk-nav-default .uk-nav-divider {
padding-left: $card-small-body-padding-horizontal;
padding-right: $card-small-body-padding-horizontal;
}
.uk-card-small .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left + $card-small-body-padding-horizontal; }
/*
* Large
*/
/* Desktop and bigger */
@media (min-width: $breakpoint-large) {
.uk-card-large > .uk-nav-default { margin: 0; }
.uk-card-large > .uk-nav-default:only-child { margin: 0; }
.uk-card-large .uk-nav-default > li > a,
.uk-card-large .uk-nav-default .uk-nav-header,
.uk-card-large .uk-nav-default .uk-nav-divider {
padding-left: 0;
padding-right: 0;
}
.uk-card-large .uk-nav-default .uk-nav-sub { padding-left: $nav-sublist-deeper-padding-left; }
}
}
================================================
FILE: src/sass/uikit-theme/mixins/form.scss
================================================
@mixin hook-form() {
border-radius: $border-rounded-border-radius;
border: $form-border-width solid $form-border;
transition: 0.2s ease-in-out;
transition-property: color, background-color, border;
}
@mixin hook-form-misc() {
.uk-form-label-required::after {
content: "*";
margin-left: $global-xsmall-margin;
color: $form-danger-color;
}
.uk-input[type=number] {
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
}
}
================================================
FILE: src/sass/uikit-theme/mixins/margin.scss
================================================
@mixin hook-margin-misc() {
.uk-margin-xsmall {
margin-bottom: $margin-xsmall-margin;
}
* + .uk-margin-xsmall {
margin-top: $margin-xsmall-margin !important;
}
.uk-margin-xsmall-top {
margin-top: $margin-xsmall-margin !important;
}
.uk-margin-xsmall-bottom {
margin-bottom: $margin-xsmall-margin !important;
}
.uk-margin-xsmall-left {
margin-left: $margin-xsmall-margin !important;
}
.uk-margin-xsmall-right {
margin-right: $margin-xsmall-margin !important;
}
}
================================================
FILE: src/sass/uikit-theme/mixins/notification.scss
================================================
@mixin hook-notification-message() {
box-shadow: $global-small-box-shadow;
}
================================================
FILE: src/sass/uikit-theme/mixins/offcanvas.scss
================================================
@mixin hook-offcanvas-misc() {
.uk-offcanvas-bar .uk-card-header {
min-height: 60px;
padding-top: 0;
padding-bottom: 0;
// fixed bug in IE with "align-items: center"
&::after {
content: "";
font-size: 0;
display: block;
min-height: inherit;
}
}
.uk-offcanvas-bar .uk-card-header .uk-offcanvas-close {
position: static;
}
}
================================================
FILE: src/sass/uikit-theme/mixins/section.scss
================================================
@mixin hook-section-misc() {
.uk-section-small {
padding-top: $section-small-padding-vertical;
padding-bottom: $section-small-padding-vertical;
}
/* Tablet landscape and bigger */
@media (min-width: $breakpoint-medium) {
.uk-section-small {
padding-top: $global-medium-margin;
padding-bottom: $global-medium-margin;
}
}
}
================================================
FILE: src/sass/uikit-theme/mixins/subnav.scss
================================================
@mixin hook-subnav-item() {
border-radius: $border-rounded-border-radius;
font-size: $subnav-item-font-size;
text-transform: $subnav-item-text-transform;
transition: 0.1s ease-in-out;
transition-property: color, background-color;
}
================================================
FILE: src/sass/uikit-theme/mixins/table.scss
================================================
@mixin hook-table-misc() {
.uk-table tbody th {
font-size: $global-font-size;
vertical-align: top;
text-transform: none;
}
.uk-table tbody tr {
transition: background-color 0.1s linear;
}
}
================================================
FILE: src/sass/uikit-theme/mixins/text.scss
================================================
@mixin hook-text-misc() {
.uk-text-xsmall {
font-size: $global-xsmall-font-size;
line-height: 1.2;
}
.uk-text-bolder {
font-weight: 500;
}
}
================================================
FILE: src/sass/uikit-theme/variables.scss
================================================
//
// UIkit global variables definitions
//
// Default variables with default values needed for custom variables below ("Theme" section)
// (check "~node_modules/uikit/src/scss/variables.scss" for list of all available variables)
//
$global-background: #FFF;
$global-border-width: 1px;
$global-border-width: 1px;
$global-border: #E5E5E5;
$global-control-height: 40px;
$global-control-large-height: 55px;
$global-font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
$global-large-font-size: 1.5rem;
$global-large-font-size: 1.5rem;
$global-margin: 20px;
$global-margin: 20px;
$global-medium-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
$global-medium-margin: 40px;
$global-medium-margin: 40px;
$global-muted-background: #F8F8F8;
$global-muted-color: #999;
$global-primary-background: #1e87f0;
$global-small-font-size: 0.875rem;
$global-xlarge-font-size: 2rem;
$global-xsmall-font-size: 0.6875rem; // 11px
$global-xsmall-gutter: 10px;
$global-xsmall-margin: 5px;
$global-xxlarge-font-size: 2.625rem;
//
// UIkit default variable overrides
//
$border-rounded-border-radius: 4px;
//
// Theme overrides
//
// Base
$base-body-background: $global-muted-background;
$base-h1-font-size-m: $global-xxlarge-font-size;
$base-h1-font-size: $base-h1-font-size-m * 0.6;
$base-h2-font-size-m: $global-xlarge-font-size;
$base-h2-font-size: $base-h2-font-size-m * 0.7;
$base-h3-font-size-m: $global-large-font-size;
$base-h3-font-size: $base-h3-font-size-m * 0.8;
$base-link-hover-text-decoration: none;
// Section
$section-primary-color-mode: none;
$section-secondary-color-mode: none;
$section-small-padding-vertical: $global-margin;
// Card
$card-default-background: $global-background;
$card-primary-color-mode: none;
$card-secondary-color-mode: none;
// Article
$article-title-font-size-m: $global-xxlarge-font-size;
$article-title-font-size: $global-xxlarge-font-size * 0.6;
// Button
$button-border-width: $global-border-width;
$button-default-background: transparent;
$button-font-size: $global-small-font-size;
$button-large-font-size: $global-small-font-size;
$button-large-line-height: $global-control-large-height - ($button-border-width * 2) !default;
$button-line-height: $global-control-height - ($button-border-width * 2);
// Form
$form-background: $global-background;
$form-focus-background: $global-background;
$form-stacked-margin-bottom: 5px;
// Table
$table-header-cell-font-weight: normal;
$table-header-cell-color: $global-muted-color;
// Lightbox
$lightbox-background: #FFF;
$lightbox-button-background: none;
$lightbox-button-color: rgba(0, 0, 0, 0.7);
$lightbox-button-hover-color: #000;
$lightbox-item-color: rgba(0, 0, 0, 0.7);
$lightbox-toolbar-background: transparent;
$lightbox-toolbar-color: rgba(0, 0, 0, 0.7);
$lightbox-toolbar-icon-color: rgba(0, 0, 0, 0.7);
$lightbox-toolbar-icon-hover-color: #000;
// Offcanvas
$offcanvas-bar-background: $global-background;
$offcanvas-bar-color-mode: none;
// Notification
$notification-message-background: $global-background;
// Background
$background-primary-background-lighten: lighten($global-primary-background, 40%);
// Margin
$margin-xsmall-margin: $global-xsmall-margin;
// Navbar
$navbar-nav-item-font-size: $global-small-font-size !default;
$navbar-nav-item-height: 40px;
// Overlay
$overlay-primary-color-mode: none;
// Import variables
@import "../../../node_modules/uikit/src/scss/variables-theme";
================================================
FILE: src/templates/components/_navbar.pug
================================================
div.uk-navbar-container.tm-navbar-container(uk-sticky="cls-active: tm-navbar-container-fixed")
div.uk-container(uk-navbar)
div.uk-navbar-left
//- Hamburger
button(class="uk-navbar-toggle uk-hidden@m"
uk-toggle="target: #nav-offcanvas"
uk-navbar-toggle-icon)
//- Logo
a.uk-navbar-item.uk-logo(href="index.html")
img(src="images/logo.svg" width="90" height="32" alt="Logo")
//- Navigation
nav(class="uk-visible@m")
ul.uk-navbar-nav
each item in navbarMenu
li
a(href= item.href)= item.name
if item.items
+icon('chevron-down', '.75')(class="uk-margin-xsmall-left")
if item.items
div(class="uk-navbar-dropdown uk-margin-remove uk-padding-remove-vertical"
uk-drop="pos: bottom-justify;" +
"delay-show: 125;" +
"delay-hide: 50;" +
"duration: 75;" +
"boundary: .tm-navbar-container;" +
"boundary-align: true;" +
"pos: bottom-justify;" +
"flip: x")
if item.name === "Catalog"
div.uk-container
ul.uk-navbar-dropdown-grid.uk-child-width-1-5(uk-grid)
each category in item.items
li
div.uk-margin-top.uk-margin-bottom
a.uk-link-reset(href= category.href)
if category.image
img(class="uk-display-block uk-margin-auto uk-margin-bottom"
src= category.image
alt= category.name
width="80"
height="80")
div.uk-text-bolder= category.name
if category.items
ul.uk-nav.uk-nav-default
each subcategory in category.items
li
a(href="subcategory.html")= subcategory
if item.name === "Brands"
div.uk-container.uk-container-small.uk-margin-top.uk-margin-bottom
ul.uk-grid-small.uk-child-width-1-6(uk-grid)
each brand in item.items
li
div.tm-ratio.tm-ratio-4-3
a(class="uk-link-muted " +
"uk-text-center " +
"uk-display-block " +
"uk-padding-small " +
"uk-box-shadow-hover-large " +
"tm-media-box"
href="#"
title= brand.name)
figure.tm-media-box-wrap
img(src= brand.image alt= brand.name)
div.uk-text-center.uk-margin
+link-to-all('See all brands', item.href)
if item.name === "Pages"
div.uk-container.uk-container-small.uk-margin-top.uk-margin-bottom
ul.uk-nav.uk-nav-default.uk-column-1-3
each page in item.items
li
a(href= page.href)= page.name
div.uk-navbar-right
//- Search
a.uk-navbar-toggle.tm-navbar-button(href="#" uk-search-icon)
div.uk-navbar-dropdown.uk-padding-small.uk-margin-remove(
uk-drop="mode: click;" +
"cls-drop: uk-navbar-dropdown;" +
"boundary: .tm-navbar-container;" +
"boundary-align: true;" +
"pos: bottom-justify;" +
"flip: x")
div.uk-container
div.uk-grid-small.uk-flex-middle(uk-grid)
div.uk-width-expand
form.uk-search.uk-search-navbar.uk-width-1-1
input.uk-search-input(type="search" placeholder="Search…" autofocus)
div.uk-width-auto
a.uk-navbar-dropdown-close(href="#" uk-close)
//- Compare
a(class="uk-navbar-item uk-link-muted uk-visible@m tm-navbar-button"
href="compare.html")
span(uk-icon="copy")
span.uk-badge 3
//- User
a.uk-navbar-item.uk-link-muted.tm-navbar-button(href="account.html" uk-icon="user")
div(class="uk-padding-small uk-margin-remove"
uk-dropdown="pos: bottom-right; offset: -10; delay-hide: 200;"
style="min-width: 150px;")
ul.uk-nav.uk-dropdown-nav
li
a(href="account.html") Orders
|
|
span (2)
li
a(href="favorites.html") Favorites
|
|
span (3)
li
a(href="personal.html") Personal
li
a(href="settings.html") Settings
li.uk-nav-divider
li
a(href="#") Log out
//- Cart
a.uk-navbar-item.uk-link-muted.tm-navbar-button(
href="cart.html"
uk-toggle="target: #cart-offcanvas"
onclick="return false")
span(uk-icon="cart")
span.uk-badge 2
================================================
FILE: src/templates/components/_toolbar.pug
================================================
include ../mixins/_icon
div(class="uk-navbar-container " +
"uk-light " +
"uk-visible@m " +
"tm-toolbar-container")
div.uk-container(uk-navbar)
div.uk-navbar-left
nav
ul.uk-navbar-nav
//- Phone
li
a(href="#")
+icon("receiver", ".75")(class="uk-margin-xsmall-right")
span.tm-pseudo= shopInfo.phone
//- Address
li
a(href="contacts.html" onclick="return false")
+icon("location", ".75")(class="uk-margin-xsmall-right")
span.tm-pseudo Store in St. Petersburg
+icon("triangle-down", ".75")
div.uk-margin-remove(uk-drop="mode: click; pos: bottom-center;")
div(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-box-shadow-xlarge " +
"uk-overflow-hidden " +
"uk-padding-small " +
"uk-padding-remove-horizontal " +
"uk-padding-remove-bottom")
figure.uk-card-media-top.uk-height-small.js-map(
data-latitude= shopInfo.latitude
data-longitude= shopInfo.longitude
data-zoom="14")
div.uk-card-body
div.uk-text-small
div.uk-text-bolder= shopInfo.storeName
div!= shopInfo.address
div= shopInfo.openingHours
div.uk-margin-small
+link-to-all("contacts", "contacts.html")(class="uk-link-reset")
//- Opening hours
li
div.uk-navbar-item
+icon("clock", ".75")(class="uk-margin-xsmall-right")
| #{shopInfo.openingHours}
div.uk-navbar-right
nav
ul.uk-navbar-nav
each item in toolbarMenu
li: a(href= item.href)= item.name
================================================
FILE: src/templates/data/_data.pug
================================================
-
var shopInfo = {
phone: '8 800 799 99 99',
email: 'example@example.com',
address: 'St. Petersburg, Nevsky Prospect 28',
openingHours: 'Daily 10:00–22:00',
storeName: 'Store Name',
latitude: 59.9356728,
longitude: 30.3258604
}
var catalog = [{
name: 'Laptops & Tablets',
id: 'laptops-tablets',
href: 'category.html',
image: 'images/catalog/computers.svg',
quantity: 367,
items: [
'Laptops',
'Tablets',
'Peripherals',
'Keyboards',
'Accessories'
]
}, {
name: 'Phones & Gadgets',
id: 'phones-gadgets',
href: 'category.html',
image: 'images/catalog/phones.svg',
quantity: 144,
items: [
'Smartphones',
'Mobile Phones',
'Smart watches',
'Charging and batteries',
'Accessories'
]
}, {
name: 'TV & Video',
id: 'tv-video',
href: 'category.html',
image: 'images/catalog/tv.svg',
quantity: 58,
items: [
'TV',
'Home Cinema',
'Satellite & Cable TV',
'Projectors',
'DVD & Blu-ray',
'Accessories'
]
}, {
name: 'Games & Entertainment',
id: 'games-entertainment',
href: 'category.html',
image: 'images/catalog/games.svg',
quantity: 13,
items: [
'Gaming consoles',
'Games',
'Software',
'Joysticks & gamepads',
'Accessories'
]
}, {
name: 'Photo',
id: 'photo',
href: 'category.html',
image: 'images/catalog/photo.svg',
quantity: 59,
items: [
'Cameras',
'Lenses',
'Accessories'
]
}]
var brands = [{
name: 'Apple',
image: 'images/brands/apple.svg',
}, {
name: 'Samsung',
image: 'images/brands/samsung.svg'
}, {
name: 'Sony',
image: 'images/brands/sony.svg'
}, {
name: 'Microsoft',
image: 'images/brands/microsoft.svg'
}, {
name: 'Intel',
image: 'images/brands/intel.svg'
}, {
name: 'HP',
image: 'images/brands/hp.svg'
}, {
name: 'LG',
image: 'images/brands/lg.svg'
}, {
name: 'Lenovo',
image: 'images/brands/lenovo.svg'
}, {
name: 'ASUS',
image: 'images/brands/asus.svg'
}, {
name: 'Acer',
image: 'images/brands/acer.svg'
}, {
name: 'Dell',
image: 'images/brands/dell.svg'
}, {
name: 'Canon',
image: 'images/brands/canon.svg'
}]
var toolbarMenu = [{
name: 'News',
href: 'news.html'
}, {
name: 'FAQ',
href: 'faq.html'
}, {
name: 'Payment',
href: '#'
}]
var navbarMenu = [{
name: 'Catalog',
href: 'catalog.html',
items: catalog
}, {
name: 'Brands',
href: 'brands.html',
items: brands
}, {
name: 'Pages',
href: '#',
items: [{
name: 'Catalog',
href: 'catalog.html'
}, {
name: 'Category',
href: 'category.html'
}, {
name: 'Subcategory',
href: 'subcategory.html'
}, {
name: 'Product',
href: 'product.html'
}, {
name: 'Cart',
href: 'cart.html'
}, {
name: 'Checkout',
href: 'checkout.html'
}, {
name: 'Compare',
href: 'compare.html'
}, {
name: 'Brands',
href: 'brands.html'
}, {
name: 'Compare',
href: 'compare.html'
}, {
name: 'Account',
href: 'account.html'
}, {
name: 'Favorites',
href: 'favorites.html'
}, {
name: 'Personal',
href: 'personal.html'
}, {
name: 'Settings',
href: 'settings.html'
}, {
name: 'About',
href: 'about.html'
}, {
name: 'Contacts',
href: 'contacts.html'
}, {
name: 'Blog',
href: 'blog.html'
}, {
name: 'News',
href: 'news.html'
}, {
name: 'Article',
href: 'article.html'
}, {
name: 'FAQ',
href: 'faq.html'
}, {
name: 'Delivery',
href: 'delivery.html'
}, {
name: '404',
href: '404.html'
}]
}, {
name: 'Blog',
href: 'blog.html'
}, {
name: 'About',
href: 'about.html'
}, {
name: 'Contacts',
href: 'contacts.html'
}]
var footerMenuLeft = [{
name: 'Catalog',
href: 'catalog.html'
}, {
name: 'Brands',
href: 'brands.html'
}, {
name: 'Delivery',
href: 'delivery.html'
}, {
name: 'FAQ',
href: 'faq.html'
}, {
name: 'Payment',
href: '#'
}]
var footerMenuRight = [{
name: 'About',
href: 'about.html'
}, {
name: 'Contacts',
href: 'contacts.html'
}, {
name: 'Blog',
href: 'blog.html'
}, {
name: 'News',
href: 'news.html'
}]
var socials = [{
name: 'Facebook',
icon: 'facebook'
}, {
name: 'Twitter',
icon: 'twitter'
}, {
name: 'YouTube',
icon: 'youtube'
}, {
name: 'Instagram',
icon: 'instagram'
}]
var products = [{
id: 1,
name: 'Apple MacBook Pro 15" Touch Bar MPTU2LL/A 256GB (Silver)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/1/1-small.jpg',
medium: 'images/products/1/1-medium.jpg',
large: 'images/products/1/1-large.jpg',
},
additionalImages: [{
small: 'images/products/1/1-add-1-small.jpg',
large: 'images/products/1/1-add-1-large.jpg',
}, {
small: 'images/products/1/1-add-2-small.jpg',
large: 'images/products/1/1-add-2-large.jpg',
}, {
small: 'images/products/1/1-add-3-small.jpg',
large: 'images/products/1/1-add-3-large.jpg',
}, {
small: 'images/products/1/1-add-4-small.jpg',
large: 'images/products/1/1-add-4-large.jpg',
}],
price: '$1599.00',
oldPrice: '$1899.00',
brand: {
name: 'Apple',
image: 'images/brands/apple.svg',
href: '#',
},
variations: [{
name: 'Color',
values: [{
name: 'Space Grey',
value: '#aaaeb1'
}, {
name: 'Silver',
value: '#dddfde'
}]
}, {
name: 'SSD Storage',
values: [{
name: '256 GB',
value: '256 GB'
}, {
name: '512 GB',
value: '512 GB'
}]
}],
specifications: [{
name: 'Performance',
properties: {
'Processor': 'Intel Core i7 Quad-Core',
'Base Clock Speed': '2.8 GHz',
'Maximum Boost Speed': '3.8 GHz',
'Total Installed Memory': '16 GB',
'Memory Type': 'LPDDR3 SDRAM',
'Memory Speed': '2133 MHz',
'Onboard Memory': '16 GB',
'Available Memory Slots': '—',
'Graphics Type': 'Hybrid',
'GPU': 'AMD Radeon Pro 555 with 2 GB GDDR5 VRAM,<br>Intel HD Graphics 630'
}
}, {
name: 'Display',
properties: {
'Panel Type': 'IPS',
'Size': '15.4"',
'Aspect Ratio': '16:10',
'Native Resolution': '2880×1800',
'Touchscreen': '—',
'Finish': 'Glossy',
'Brightness': '500 cd/m<sup>2</sup>'
}
}, {
name: 'Drives',
properties: {
'Available Slots': '—',
'Total Capacity': '256 GB',
'Solid State Storage': '1 × 256 GB Integrated PCIe',
'Optical Drive': '—'
}
}, {
name: 'Input/ Output Connectors',
properties: {
'Ports': '4 × Thunderbolt 3 via USB Type-C',
'Display': '4 × DisplayPort via Type-C',
'Audio': '1 × 1/8" (3.5 mm) Headphone Output,<br>2 × Integrated Speaker,<br>3 × Integrated Microphone',
'Expansion Slots': '—',
'Media Card Slots': '—'
}
}, {
name: 'Communications',
properties: {
'Network': '—',
'Modem': '—',
'Wi-Fi': '802.11ac; Dual-Band',
'Bluetooth': 'Bluetooth 4.2',
'Mobile Broadband': '—',
'GPS': 'Not Specified by Manufacturer',
'NFC': 'Not Specified by Manufacturer',
'Webcam': 'User-Facing: 720p Video'
}
}, {
name: 'Battery',
properties: {
'Battery Chemistry': 'Lithium-Ion Polymer',
'Watt Hours / Type': '76 Wh Non-Removable',
'Maximum Runtime': '10 Hours',
'Power Requirements': '100-240 VAC, 50-60 Hz',
'Power Supply': '1 × 87 W',
}
}, {
name: 'General',
properties: {
'Operating System': 'macOS High Sierra',
'Security': 'Not specified',
'Keyboard': 'Keys: 64,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight',
'Pointing Device': 'Force Touch Trackpad',
'Dimensions (W × H × D)': '13.8 × 0.6 × 9.5" / 35.1 × 1.5 × 24.1 cm',
'Weight': '4.02 lb / 1.82 kg',
}
}, {
name: 'Packaging Info',
properties: {
'Package Weight': '7.55 lb',
'Box Dimensions (L × W × H)': '16.2 × 11.6 × 3.7"'
}
}],
reviews: [{
author: 'Thomas Bruns',
date: 'May 21, 2018',
text: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>',
likes: 14,
dislikes: 2
}, {
author: 'George Clanton',
date: 'May 24, 2018',
text: '<p>Nunc interdum odio non erat commodo lacinia. Aliquam nec tincidunt lorem. Nunc quis scelerisque nulla. Nam nulla ante, luctus non dignissim a, luctus quis sem. Curabitur consectetur porttitor leo. Donec molestie nisl vitae lorem porttitor vehicula. Etiam feugiat a magna ac dapibus. Donec vitae sollicitudin lectus.</p><p>Sed mollis ex tincidunt posuere blandit. Mauris sed tellus dolor. Suspendisse nibh mi, dignissim et molestie id, dictum in arcu. Duis sodales scelerisque quam, quis lobortis felis egestas eu. Sed nibh nulla, aliquet ac leo vel, rutrum dignissim metus. Sed non rhoncus ex. Curabitur accumsan porta lacus non viverra. Etiam feugiat sapien ut purus luctus, eu porttitor neque volutpat.</p>',
likes: 5,
dislikes: 0
}],
questions: [{
question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
answer: 'Vivamus imperdiet venenatis est. Phasellus vitae mauris imperdiet, condimentum eros vel, ullamcorper turpis. Maecenas sed libero quis orci egestas vehicula fermentum id diam.'
}, {
question: 'Nullam massa sem, mollis ut luctus at, tincidunt a lorem?',
answer: 'Aliquam sed dictum elit, quis consequat metus. Proin in mauris finibus urna lacinia laoreet sed id orci.'
}, {
question: 'Aliquam pretium diam et ullamcorper malesuada?',
answer: 'Praesent feugiat lectus faucibus tellus congue pharetra. In viverra vehicula pellentesque. Etiam consectetur ultricies magna at bibendum.'
}, {
question: 'Nulla fringilla sollicitudin mauris eu volutpat?',
answer: 'Mauris quis neque nec lectus aliquet malesuada. Nunc ullamcorper purus id gravida aliquam. Integer eget blandit urna.'
}, {
question: 'Nam luctus velit ante, id pulvinar nisl gravida eget?',
answer: 'Vestibulum gravida nisi tempor malesuada iaculis. Phasellus finibus, nisl quis pellentesque scelerisque, erat erat mollis massa, eu semper diam eros id risus. Cras vitae nisi porta.'
}],
isNotAvailable: false,
isOnSale: true,
isAddedToCart: true,
isAddedToFavorites: true,
isAddedToCompare: true,
statuses: ['top selling', 'trade-in'],
properties: {
'Diagonal display': '15.4"',
'CPU': 'Intel® Core™ i7',
'RAM': '16 GB',
'Video Card': 'AMD Radeon Pro 555'
}
}, {
id: 2,
name: 'Apple MacBook 12" MNYN2LL/A 512GB (Rose Gold)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/2/2-small.jpg',
medium: 'images/products/2/2-medium.jpg',
large: 'images/products/2/2-large.jpg'
},
additionalImages: [],
price: '$1549.00',
oldPrice: '',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: false,
isAddedToCart: true,
isAddedToFavorites: true,
isAddedToCompare: true,
statuses: ['new', 'trade-in'],
properties: {
'Diagonal display': '12"',
'CPU': 'Intel® Core™ i5',
'RAM': '8 GB',
'Video Card': 'Intel® HD Graphics 615'
}
}, {
id: 3,
name: 'Lenovo IdeaPad YOGA 920-13IKB 80Y7001RRK (Copper)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/3/3-small.jpg',
medium: 'images/products/3/3-medium.jpg',
large: 'images/products/3/3-large.jpg'
},
additionalImages: [],
price: '$1199.00',
oldPrice: '',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: false,
isAddedToCart: false,
isAddedToFavorites: true,
isAddedToCompare: false,
statuses: '',
properties: {
'Diagonal display': '13.9"',
'CPU': 'Intel® Core™ i7 8550U',
'RAM': '16 GB',
'Video Card': 'Intel® HD Graphics 620'
}
}, {
id: 4,
name: 'ASUS Zenbook UX330UA-FC020T (Rose Gold)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/4/4-small.jpg',
medium: 'images/products/4/4-medium.jpg',
large: 'images/products/4/4-large.jpg'
},
additionalImages: [],
price: '$749.00',
oldPrice: '',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: false,
isAddedToCart: false,
isAddedToFavorites: false,
isAddedToCompare: false,
statuses: ['top selling'],
properties: {
'Diagonal display': '13.3"',
'CPU': 'Intel® Core™ i7-6500U',
'RAM': '8 GB',
'Video Card': 'Intel® HD Graphics 520'
}
}, {
id: 5,
name: 'Dell XPS 15 9560-8968 (Silver)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/5/5-small.jpg',
medium: 'images/products/5/5-medium.jpg',
large: 'images/products/5/5-large.jpg'
},
additionalImages: [],
price: '$949.00',
oldPrice: '$999.00',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: true,
isAddedToCart: false,
isAddedToFavorites: false,
isAddedToCompare: false,
statuses: '',
properties: {
'Diagonal display': '15.6"',
'CPU': 'Intel® Core™ i7 7700HQ',
'RAM': '16 GB',
'Video Card': 'NVIDIA GeForce GTX 960M'
}
}, {
id: 6,
name: 'Apple MacBook Air 13" MQD32LL/A 128GB (Silver)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/6/6-small.jpg',
medium: 'images/products/6/6-medium.jpg',
large: 'images/products/6/6-large.jpg'
},
additionalImages: [],
price: '$849.00',
oldPrice: '',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: false,
isAddedToCart: false,
isAddedToFavorites: false,
isAddedToCompare: true,
statuses: ['trade-in'],
properties: {
'Diagonal display': '13.3"',
'CPU': 'Intel® Core™ i5',
'RAM': '8 GB',
'Video Card': 'Intel® HD Graphics 6000'
}
}, {
id: 7,
name: 'Dell Inspiron 5378-2063 (Gray)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/7/7-small.jpg',
medium: 'images/products/7/7-medium.jpg',
large: 'images/products/7/7-large.jpg'
},
additionalImages: [],
price: '$579.00',
oldPrice: '$599.00',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: true,
isAddedToCart: false,
isAddedToFavorites: false,
isAddedToCompare: false,
statuses: '',
properties: {
'Diagonal display': '13.3"',
'CPU': 'Intel® Core™ i3-7100U',
'RAM': '4 GB',
'HDD Capacity': '1 TB'
}
}, {
id: 8,
name: 'Lenovo Yoga 720-13IKB 80X60059RK (Silver)',
type: 'Laptop',
href: 'product.html',
image: {
small: 'images/products/8/8-small.jpg',
medium: 'images/products/8/8-medium.jpg',
large: 'images/products/8/8-large.jpg'
},
additionalImages: [],
price: '$1099.00',
oldPrice: '',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: false,
isOnSale: false,
isAddedToCart: false,
isAddedToFavorites: false,
isAddedToCompare: false,
statuses: ['new'],
properties: {
'Diagonal display': '13.3"',
'CPU': 'Intel® Core™ i5-7200U',
'RAM': '8 GB',
'Video Card': 'Intel® HD Graphics 620'
}
}, {
id: 9,
name: 'Lenovo ThinkPad X380 Yoga 20LH000MUS (Black)',
type: 'Laptop',
href: 'product.html',
image: '',
additionalImages: [],
price: '$2239.00',
oldPrice: '',
brand: {},
variations: [],
specifications: [],
reviews: [],
questions: [],
isNotAvailable: true,
isOnSale: false,
isAddedToCart: false,
isAddedToFavorites: false,
isAddedToCompare: false,
statuses: '',
properties: {
'Diagonal display': '13.3"',
'CPU': 'Intel® Core™ i7 8550U',
'RAM': '4 GB',
'Video Card': 'Intel® UHD Graphics 620'
}
}]
var filters = [{
id: 1,
name: 'brand',
title: 'Brands',
isOpen: true,
items: [{
id: 1,
name: 'Acer',
quantity: 177
}, {
id: 2,
name: 'Apple',
quantity: 18
}, {
id: 3,
name: 'ASUS',
quantity: 150
}, {
id: 4,
name: 'Dell',
quantity: 170
}, {
id: 5,
name: 'HP',
quantity: 498
}, {
id: 6,
name: 'MSI',
quantity: 54
}, {
id: 7,
name: 'Samsung',
quantity: 1
}, {
id: 8,
name: 'Sony',
quantity: 1
}]
}, {
id: 2,
name: 'type',
title: 'Type',
description: 'A small description for this property',
isOpen: true,
items: [{
id: 1,
name: 'Notebook',
quantity: 150
}, {
id: 2,
name: 'Ultrabook',
quantity: 18
}, {
id: 3,
name: 'Transformer',
quantity: 6
}]
}, {
id: 3,
name: 'screen-size',
title: 'Screen Size',
description: 'A small description for this property',
isOpen: false,
items: [{
id: 1,
name: '11.6" and smaller',
quantity: 45
}, {
id: 2,
name: '12" - 13.5"',
quantity: 178
}, {
id: 3,
name: '14" - 14.5"',
quantity: 461
}, {
id: 4,
name: '15" - 15.6"',
quantity: 148
}, {
id: 5,
name: '17" - 17.3"',
quantity: 73
}, {
id: 6,
name: '18.4" and larger',
quantity: 54
}]
}, {
id: 3,
name: 'screen-resolution',
title: 'Screen Resolution',
description: 'A small description for this property',
isOpen: false,
items: [{
id: 1,
name: '3840×2160',
quantity: 12
}, {
id: 2,
name: '3200×1800"',
quantity: 12
}, {
id: 3,
name: '2880×1800',
quantity: 10
}, {
id: 4,
name: '2560×1600',
quantity: 7
}, {
id: 5,
name: '2560×1440',
quantity: 13
}, {
id: 6,
name: '1920×1080',
quantity: 341
}, {
id: 7,
name: '1600×900',
quantity: 11
}, {
id: 8,
name: '1440×900',
quantity: 13
}, {
id: 9,
name: '1366×768',
quantity: 237
}, {
id: 10,
name: '1024×600',
quantity: 5
}]
}, {
id: 4,
name: 'cpu',
title: 'CPU',
description: 'A small description for this property',
isOpen: false,
items: [{
id: 1,
name: 'AMD A-series',
quantity: 102
}, {
id: 2,
name: 'AMD E-series',
quantity: 21
}, {
id: 3,
name: 'AMD FX',
quantity: 1
}, {
id: 4,
name: 'AMD Ryzen',
quantity: 1
}, {
id: 5,
name: 'Intel Atom',
quantity: 8
}, {
id: 6,
name: 'Intel Celeron',
quantity: 38
}, {
id: 7,
name: 'Intel Core M',
quantity: 6
}, {
id: 8,
name: 'Intel Core i3',
quantity: 143
}, {
id: 9,
name: 'Intel Core i5',
quantity: 273
}, {
id: 10,
name: 'Intel Core i7',
quantity: 218
}, {
id: 11,
name: 'Intel Xeon',
quantity: 3
}, {
id: 12,
name: 'Intel Pentium',
quantity: 86
}]
}, {
id: 5,
name: 'ram',
title: 'RAM',
description: 'A small description for this property',
isOpen: false,
items: [{
id: 1,
name: '2 GB',
quantity: 17
}, {
id: 2,
name: '4 GB',
quantity: 359
}, {
id: 3,
name: '6 GB',
quantity: 81
}, {
id: 4,
name: '8 GB',
quantity: 346
}, {
id: 5,
name: '12 GB',
quantity: 13
}, {
id: 6,
name: '16 GB',
quantity: 72
}, {
id: 7,
name: '24 GB',
quantity: 1
}, {
id: 8,
name: '32 GB',
quantity: 11
}]
}]
var compare = [{
name: 'Performance',
properties: {
'Processor': ['Intel Core i7 Quad-Core', 'Intel Core i5 Dual-Core', 'Intel Core i5 Dual-Core'],
'Base Clock Speed': ['2.8 GHz', '1.3 GHz', '1.8 GHz'],
'Maximum Boost Speed': ['3.8 GHz', '3.2 GHz', '2.9 GHz'],
'Total Installed Memory': ['16 GB', '8 GB', '8 GB'],
'Memory Type': ['LPDDR3 SDRAM', 'LPDDR3 SDRAM', 'LPDDR3 SDRAM'],
'Memory Speed': ['2133 MHz', '1866 MHz', '1600 MHz'],
'Onboard Memory': ['16 GB', '8 GB', '8 GB'],
'Available Memory Slots': ['—', '—', '—'],
'Graphics Type': ['Hybrid', 'Integrated', 'Integrated'],
'GPU': ['AMD Radeon Pro 555 with 2 GB GDDR5 VRAM,<br>Intel HD Graphics 630',
'Intel HD Graphics 615',
'Intel HD Graphics 6000']
}
}, {
name: 'Display',
properties: {
'Graphics Type': ['IPS', 'IPS', 'Not specified'],
'Size': ['15.4"', '12"', '13.3"'],
'Aspect Ratio': ['16:10', '16:10', '16:10'],
'Native Resolution': ['2880×1800', '2304×1440', '1440×900'],
'Touchscreen': ['—', '—', '—'],
'Finish': ['Glossy', 'Glossy', 'Glossy'],
'Brightness': ['500 cd/m<sup>2</sup>', 'Not specified', 'Not specified'],
'Viewing Angle': ['Not specified', 'Not specified', 'Not specified'],
'Refresh Rate': ['Not specified', 'Not specified', 'Not specified'],
'Response Time': ['Not specified', 'Not specified', 'Not specified'],
'Adaptive Sync Technology': ['Not specified', 'Not specified', 'Not specified'],
'External Resolution': ['Not specified', 'Not specified', 'Not specified']
}
}, {
name: 'Drives',
properties: {
'Available Slots': ['—', '—', '—'],
'Total Capacity': ['256 GB', '512 GB', '128 GB'],
'Solid State Storage': ['1 × 256 GB Integrated PCIe',
'1 × 512 GB Integrated PCIe',
'1 × 128 GB Integrated PCIe'],
'Optical Drive': ['—', '—', '—']
}
}, {
name: 'Input/ Output Connectors',
properties: {
'Ports': ['4 × Thunderbolt 3 via USB Type-C',
'1 × USB 3.1 Gen 1 Type-C',
'2 × USB 3.1 Gen 1 Type-A,<br>1 × Thunderbolt 2'],
'Display': ['4 × DisplayPort via Type-C',
'1 × DisplayPort 1.2 via Optional Cable,<br>1 × HDMI via Optional Cable,<br>1 × VGA via Optional Cable',
'1 × Mini DisplayPort via Thunderbolt Port'],
'Audio': ['1 × 1/8" (3.5 mm) Headphone Output,<br>2 × Integrated Speaker,<br>3 × Integrated Microphone',
'1 × 1/8" (3.5 mm) Headphone Output,<br>2 × Integrated Speaker,<br>2 × Integrated Microphone',
'1 × 1/8" (3.5 mm) Headphone Output,<br>2 × Integrated Speaker,<br>2 × Integrated Microphone'],
'Expansion Slots': ['—', '—', '—'],
'Media Card Slots': ['—', '—', 'SD/SDHC/SDXC']
}
}, {
name: 'Communications',
properties: {
'Network': ['—', '—', '—'],
'Modem': ['—', '—', '—'],
'Wi-Fi': ['802.11ac; Dual-Band', '802.11ac; Dual-Band', '802.11ac; Dual-Band'],
'Bluetooth': ['Bluetooth 4.2', 'Bluetooth 4.2', 'Bluetooth 4.0'],
'Mobile Broadband': ['—', '—', '—'],
'GPS': ['Not specified', '—', 'Not specified'],
'NFC': ['Not specified', '—', 'Not specified'],
'Webcam': ['User-Facing: 720p Video', 'User-Facing: 480p Video', 'User-Facing: 720p Video'],
}
}, {
name: 'Battery',
properties: {
'Battery Chemistry': ['Lithium-Ion Polymer', 'Lithium-Ion Polymer', 'Lithium-Ion Polymer'],
'Watt Hours / Type': ['76 Wh Non-Removable', '41.4 Wh Non-Removable', '54 Wh Non-Removable'],
'Cells': ['Not specified', 'Not specified', 'Not specified'],
'Output Voltage': ['Not specified', 'Not specified', 'Not specified'],
'Maximum Runtime': ['10 Hours', '10 Hours', '12 Hours'],
'Power Requirements': ['100-240 VAC, 50-60 Hz', '100-240 VAC, 50-60 Hz', '100-240 VAC, 50-60 Hz'],
'Power Supply': ['1 × 87 W', '1 × 29 W', '1 × 45 W'],
}
}, {
name: 'General',
properties: {
'Operating System': ['macOS High Sierra', 'macOS High Sierra', 'macOS High Sierra'],
'Security': ['Not specified', 'Not specified', 'Not specified'],
'Keyboard': ['Keys: 64,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight',
'Keys: 78,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight',
'Keys: 78,<br>Type: Standard Notebook Keyboard,<br>Features: Backlight'],
'Pointing Device': ['Force Touch Trackpad', 'Force Touch Trackpad', 'TouchPad'],
'Dimensions (W × H × D)': ['13.8 × 0.6 × 9.5" / 35.1 × 1.5 × 24.1 cm',
'11.0 × 0.5 × 7.7" / 27.9 × 1.3 × 19.6 cm',
'12.8 × 0.7 × 8.9" / 32.5 × 1.8 × 22.6 cm'],
'Weight': ['4.02 lb / 1.82 kg', '2.03 lb / .92 kg', '2.96 lb / 1.34 kg'],
'Warranty Length': ['Limited 1-Year Warranty', 'Limited 1-Year Warranty', 'Limited 1-Year Warranty']
}
}]
var articles = [{
title: 'Everything You Need to Know About the MacBook Pro',
description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
preview: 'images/articles/macbook-photo.jpg',
date: 'May 21, 2018',
href: 'article.html'
}, {
title: 'Apple introduces macOS Mojave',
description: '<p>Praesent consequat justo eu massa malesuada posuere. Donec ultricies tincidunt nisl, sed euismod nulla venenatis maximus. Maecenas sit amet semper tellus. Pellentesque imperdiet finibus sapien, a consectetur eros auctor a.</p>',
preview: 'images/articles/macos.jpg',
date: 'May 21, 2018',
href: 'article.html'
}]
var news = [{
title: 'Highlights from WWDC',
description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
date: 'June 4, 2018',
href: 'article.html'
}, {
title: 'Apple introduces macOS Mojave',
description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
date: 'June 4, 2018',
href: 'article.html'
}, {
title: 'iOS 11.4 brings stereo pairs and multi-room audio with AirPlay 2',
description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales eget ipsum id aliquam. Nam consectetur interdum nibh eget sodales. Cras volutpat efficitur ornare.</p>',
date: 'May 29, 2018',
href: 'article.html'
}]
var profile = {
firstName: 'Thomas',
lastName: 'Bruns',
image: 'images/avatar.jpg',
registrationDate: 'June 6, 2018',
phone: '8 (800) 555-35-35',
dateOFBirth: '1990-01-01',
email: 'example@example.com'
}
var profileNav = [{
id: 1,
title: 'Orders',
amount: 2,
href: 'account.html'
}, {
id: 2,
title: 'Favorites',
amount: 3,
href: 'favorites.html'
}, {
id: 3,
title: 'Personal Info',
href: 'personal.html'
}]
var orders = [{
id: '36637649',
date: 'June 17, 2018',
items: 7,
shipping: 'Pick up from store',
payment: 'Online by card',
total: '$4896.00',
status: 'Processing'
}, {
id: '36637648',
date: 'June 16, 2018',
items: 2,
shipping: 'Pick up from store',
payment: 'Online by card',
total: '$599.00',
status: 'Canceled'
}]
var informationalNav = [{
id: 1,
title: 'About',
href: 'about.html'
}, {
id: 2,
title: 'Contacts',
href: 'contacts.html'
}, {
id: 3,
title: 'Blog',
href: 'blog.html'
}, {
id: 4,
title: 'News',
href: 'news.html'
}, {
id: 5,
title: 'FAQ',
href: 'faq.html'
}, {
id: 6,
title: 'Delivery',
href: 'delivery.html'
}]
var promo = [{
background: '#0b0a12',
image: 'images/promo/macbook-new.jpg',
title: 'New Macbook'
}, {
background: '#ce071e',
image: 'images/promo/iphone.jpg',
title: 'iPhone'
}, {
background: '#1f2024',
image: 'images/promo/ipad.jpg',
title: 'iPad'
}]
var categories = [{
title: 'Laptops',
href: 'subcategory.html',
comment: 'from $149',
image: 'images/catalog/laptops.png'
}, {
title: 'Smartphones',
href: 'subcategory.html',
comment: 'from $99',
image: 'images/catalog/smartphones.png'
}, {
title: 'Tablets',
href: 'subcategory.html',
comment: 'from $129',
image: 'images/catalog/tablets.png'
}, {
title: 'Smart Watches',
href: 'subcategory.html',
comment: 'from $49',
image: 'images/catalog/watches.png'
}, {
title: 'Gaming Consoles',
href: 'subcategory.html',
comment: 'from $399',
image: 'images/catalog/consoles.png'
}, {
title: 'Cameras',
href: 'subcategory.html',
comment: 'from $129',
image: 'images/catalog/cameras.png'
}]
var advantages = [{
title: 'Mauris placerat',
description: 'Donec mollis nibh dolor, sit amet auctor',
icon: 'star'
}, {
title: 'Lorem ipsum',
description: 'Sit amet, consectetur adipiscing elit',
icon: 'receiver'
}, {
title: 'Proin pharetra',
description: 'Nec quam a fermentum ut viverra',
icon: 'location'
}, {
title: 'Praesent ultrices',
description: 'Praesent ultrices, orci nec finibus',
icon: 'comments'
}, {
title: 'Duis condimentum',
description: 'Pellentesque eget varius arcu',
icon: 'happy'
}]
================================================
FILE: src/templates/layouts/_account.pug
================================================
extends _default
block vars
block default
section.uk-section.uk-section-small
div.uk-container
div.uk-grid-medium(uk-grid)
//- Profile column
div(class="uk-width-1-1 uk-width-1-4@m tm-aside-column")
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container(
uk-sticky="offset: 90; bottom: true; media: @m;")
//- Profile
div.uk-card-header
div.uk-grid-small.uk-child-width-1-1(uk-grid)
section
div(class="uk-width-1-3 " +
"uk-width-1-4@s " +
"uk-width-1-2@m " +
"uk-margin-auto " +
"uk-visible-toggle " +
"uk-position-relative " +
"uk-border-circle " +
"uk-overflow-hidden " +
"uk-light")
img.uk-width-1-1(src= profile.image)
a(class="uk-link-reset " +
"uk-overlay-primary " +
"uk-position-cover " +
"uk-hidden-hover"
href="#")
div.uk-position-center
+icon("camera", "1.25")
div.uk-text-center
div.uk-h4.uk-margin-remove #{profile.firstName} #{profile.lastName}
div.uk-text-meta Joined #{profile.registrationDate}
div
div.uk-grid-small.uk-flex-center(uk-grid)
div
a.uk-button.uk-button-default.uk-button-small(href="settings.html")
+icon("cog", ".75")(class="uk-margin-xsmall-right")
span Settings
div
button.uk-button.uk-button-default.uk-button-small(
href="#"
title="Log out")
+icon("sign-out", ".75")
div
nav
ul.uk-nav.uk-nav-default.tm-nav
each item in profileNav
li(class= {"uk-active": item.id == profileActivePage})
a(href= item.href)= item.title
if item.amount
|
|
span (#{item.amount})
//- Content column
div(class="uk-width-1-1 uk-width-expand@m")
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
header.uk-card-header
h1.uk-h2= page.title
block account
================================================
FILE: src/templates/layouts/_article.pug
================================================
extends _default
block vars
block default
section.uk-section.uk-section-small
div.uk-container
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
section.uk-text-center
if page.breadcrumbs
ul.uk-breadcrumb.uk-flex-center.uk-margin-remove
li: a(href="index.html") Home
each href, breadcrumb in page.breadcrumbs
li: a(href= href)= breadcrumb
if page.title
li: span= page.title
section
block article
================================================
FILE: src/templates/layouts/_checkout.pug
================================================
extends _index
block vars
block index
header
div.uk-navbar-container.tm-navbar-container
div.uk-container(uk-navbar)
div.uk-navbar-left
//- Logo
a.uk-navbar-item.uk-logo(href="index.html")
img(src="images/logo.svg" width="90" height="32" alt="Logo")
div.uk-navbar-right
//- Phone
a.uk-navbar-item.uk-link-muted(href="#")
+icon("receiver", ".75")(class="uk-margin-xsmall-right")
span.tm-pseudo= shopInfo.phone
main
section.uk-section.uk-section-small
div.uk-container
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
section.uk-text-center
a.uk-link-muted.uk-text-small(href="cart.html")
+icon("arrow-left", ".75")(class="uk-margin-xsmall-right")
| Return to cart
h1.uk-margin-small-top.uk-margin-remove-bottom Checkout
section
block checkout
footer
div.uk-section.uk-section-secondary.uk-section-small.uk-light
div.uk-container
div.uk-flex-middle(uk-grid)
div.uk-width-expand
div © Company Name. All rights reserved
div
a.uk-link-muted(href="#")
+icon("receiver", ".75")(class="uk-margin-xsmall-right")
span.tm-pseudo= shopInfo.phone
================================================
FILE: src/templates/layouts/_default.pug
================================================
extends _index
block vars
block index
header
include ../partials/_header
main
block default
//- Advantages
section.uk-section.uk-section-default.uk-section-small
div.uk-container
div(uk-slider)
ul(class="uk-slider-items " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@s " +
"uk-child-width-1-5@m " +
"uk-grid")
each advantage in advantages
li
div(class="uk-grid-small uk-flex-center uk-flex-left@s" uk-grid)
div
+icon(advantage.icon, "2.5")
div(class="uk-text-center uk-text-left@s uk-width-expand@s")
div= advantage.title
div.uk-text-meta= advantage.description
ul.uk-slider-nav.uk-dotnav.uk-flex-center.uk-margin-medium-top
footer
include /partials/_footer
include ../partials/_nav-offcanvas
include ../partials/_cart-offcanvas
================================================
FILE: src/templates/layouts/_index.pug
================================================
include ../data/_data
include ../mixins/_import
doctype html
//- Variables
block vars
- var page
//- Template
html(lang="en")
head
include /partials/_head
link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500")
link(rel="stylesheet" href="styles/style.css")
script(src="scripts/uikit.js")
script(src="scripts/uikit-icons.js")
body
div.uk-offcanvas-content
block index
script(src="scripts/script.js")
script(src="//maps.googleapis.com/maps/api/js?key=AIzaSyClyjCemJi4m2q78gNeGkhlckpdH1hzTYA&callback=initMap"
async
defer)
================================================
FILE: src/templates/layouts/_informational.pug
================================================
extends /layouts/_pages
block vars
block pages
div.uk-grid-medium(uk-grid)
//- Content
section(class="uk-width-1-1 uk-width-expand@m")
block informational
//- Navigation
aside(class="uk-width-1-4 uk-visible@m tm-aside-column")
section(class="uk-card " +
"uk-card-default " +
"uk-card-small"
uk-sticky="offset: 90; bottom: true;")
nav
ul.uk-nav.uk-nav-default.tm-nav
each item in informationalNav
li(class= {"uk-active": item.id == informationalActivePage})
a(href= item.href)= item.title
================================================
FILE: src/templates/layouts/_pages.pug
================================================
extends _default
block vars
block default
section.uk-section.uk-section-small
div.uk-container
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
div.uk-text-center
if page.breadcrumbs
ul.uk-breadcrumb.uk-flex-center.uk-margin-remove
li: a(href="index.html") Home
each href, breadcrumb in page.breadcrumbs
li: a(href= href)= breadcrumb
if page.title
li: span= page.title
if page.title
h1.uk-margin-small-top.uk-margin-remove-bottom= page.title
if page.quantity
div.uk-text-meta.uk-margin-xsmall-top #{page.quantity} items
div
block pages
================================================
FILE: src/templates/mixins/_article.pug
================================================
mixin article(article)
a(href= article.href)
article(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-article " +
"uk-overflow-hidden " +
"uk-box-shadow-hover-large " +
"uk-height-1-1 " +
"tm-ignore-container")
//- Preview
if article.preview
div.tm-ratio.tm-ratio-16-9
figure.tm-media-box.uk-cover-container.uk-margin-remove
img(src= article.preview
alt= article.title
uk-cover)
div.uk-card-body
div.uk-article-body
//- Date
div.uk-article-meta.uk-margin-xsmall-bottom
time= article.date
//- Title
div
h3.uk-margin-remove= article.title
//- Description
if article.description
div.uk-margin-small-top!= article.description
================================================
FILE: src/templates/mixins/_icon.pug
================================================
mixin icon(name, ratio)
if !ratio
span(uk-icon= name)&attributes(attributes)
else
span(uk-icon=`icon: ${name}; ratio: ${ratio};`)&attributes(attributes)
================================================
FILE: src/templates/mixins/_import.pug
================================================
include _icon
include _link-to-all
include _product
include _quantity
include _product-small
include _article
================================================
FILE: src/templates/mixins/_link-to-all.pug
================================================
mixin link-to-all(text, href)
a.uk-link-muted.uk-text-uppercase.tm-link-to-all(href= href)&attributes(attributes)
span= text
+icon("chevron-right", ".75")
================================================
FILE: src/templates/mixins/_product-small.pug
================================================
mixin product-small(product)
div.uk-grid-small.uk-height-1-1(uk-grid)
//- Image
div.uk-width-1-3
div.tm-ratio.tm-ratio-4-3
a.tm-media-box(href= product.href)
figure.tm-media-box-wrap
if product.image
img(src= product.image.small alt= product.name)
else
+icon("image", "3")(class="uk-text-muted")
//- Info
div.uk-width-expand
div.tm-product-card-body.uk-padding-remove.uk-height-1-1
div.tm-product-card-info
div.uk-text-meta.uk-margin-xsmall-bottom= product.type
a.tm-product-card-title(href= product.href)= product.name
div.tm-product-card-shop
div.tm-product-card-prices
if product.isNotAvailable
div.uk-text-muted Product not available
else
if product.oldPrice
del.uk-text-meta= product.oldPrice
div.tm-product-card-price= product.price
div.tm-product-card-add
if !product.isNotAvailable
button.uk-button.uk-button-primary.tm-product-card-add-button.tm-shine.js-add-to-cart
+icon("cart")(class="tm-product-add-button-icon")
span.tm-product-card-add-button-text add to cart
================================================
FILE: src/templates/mixins/_product.pug
================================================
mixin product(product)
article.tm-product-card
//- Media
div.tm-product-card-media
div.tm-ratio.tm-ratio-4-3
a.tm-media-box(href= product.href)
//- Labels
if product.statuses
div.tm-product-card-labels
each status in product.statuses
case status
when "new"
span.uk-label.uk-label-success= status
when "top selling"
span.uk-label.uk-label-warning= status
when "trade-in"
span.uk-label.uk-label-danger= status
default
span.uk-label= status
//- Image
figure.tm-media-box-wrap
if product.image
img(src= product.image.medium alt= product.name)
else
+icon("image", "3")(class="uk-text-muted")
//- Body
div.tm-product-card-body
//- Info
div.tm-product-card-info
//- Type
div.uk-text-meta.uk-margin-xsmall-bottom= product.type
//- Title
h3.tm-product-card-title
a.uk-link-heading(href= product.href)= product.name
//- Properties
if product.properties
ul.uk-list.uk-text-small.tm-product-card-properties
each value, property in product.properties
li
span.uk-text-muted!= property + ": "
span!= value
//- Shop
div.tm-product-card-shop
//- Prices
div.tm-product-card-prices
if product.isNotAvailable
div.uk-text-muted Product not available
else
if product.oldPrice
del.uk-text-meta= product.oldPrice
div.tm-product-card-price= product.price
//- Actions buttons
div.tm-product-card-add
div.uk-text-meta.tm-product-card-actions
//- Favorite
a.tm-product-card-action.js-add-to.js-add-to-favorites(
class= { "tm-action-button-active js-added-to": product.isAddedToFavorites }
title="Add to favorites")
+icon("heart", ".75")
span.tm-product-card-action-text Add to favorites
//- Compare
a.tm-product-card-action.js-add-to.js-add-to-compare(
class= { "tm-action-button-active js-added-to": product.isAddedToCompare }
title="Add to compare")
+icon("copy", ".75")
span.tm-product-card-action-text Add to compare
//- Add to cart
if !product.isNotAvailable
button.uk-button.uk-button-primary.tm-product-card-add-button.tm-shine.js-add-to-cart
+icon("cart")(class="tm-product-card-add-button-icon")
span.tm-product-card-add-button-text add to cart
================================================
FILE: src/templates/mixins/_quantity.pug
================================================
mixin quantity(productId)
a(onclick="increment(-1, 'product-" + productId + "')"
uk-icon="icon: minus; ratio: .75")
input(id="product-" + productId
class="uk-input tm-quantity-input"
type="text"
maxlength="3"
value="1")
a(onclick="increment(+1, 'product-" + productId + "')"
uk-icon="icon: plus; ratio: .75")
================================================
FILE: src/templates/pages/404.pug
================================================
extends /layouts/_default
block vars
-
page = {
title: '404 — Page not found'
}
block default
section.uk-section.uk-section-small
div.uk-container
div.uk-text-center
h1.uk-heading-hero 404
div.uk-text-lead Page not found
div.uk-margin-top Looks like the page you're trying to visit doesn't exist.
br
a(href="index.html") Go back to Homepage
================================================
FILE: src/templates/pages/about.pug
================================================
extends /layouts/_article
block vars
-
page = {
title: 'About',
breadcrumbs: {}
}
block article
div
article(class="uk-card " +
"uk-card-default " +
"uk-card-body " +
"uk-article " +
"tm-ignore-container")
header.uk-text-center
//- Title
h1.uk-article-title= page.title
div.uk-article-body
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.
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.
h2.uk-text-center Our principles
ul.uk-list.uk-list-bullet
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.
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.
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.
h2.uk-text-center Our team
div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m"
uk-grid)
div
div.uk-grid-small.uk-flex-middle(uk-grid)
div
img(src="images/about/thomas.svg"
alt="Thomas Bruns"
width="80"
height="80")
div.uk-width-expand
div Thomas Bruns
div.uk-text-meta Co-founder & CEO
div
div.uk-grid-small.uk-flex-middle(uk-grid)
div
img(src="images/about/george.svg"
alt="George Clanton"
width="80"
height="80")
div.uk-width-expand
div George Clanton
div.uk-text-meta Co-founder & President
div
div.uk-grid-small.uk-flex-middle(uk-grid)
div
img(src="images/about/martin.svg"
alt="Martin Cade"
width="80"
height="80")
div.uk-width-expand
div Martin Cade
div.uk-text-meta Co-founder & CTO
div
div.uk-grid-small.uk-flex-middle(uk-grid)
div
img(src="images/about/carol.svg"
alt="Carol Issa"
width="80"
height="80")
div.uk-width-expand
div Carol Issa
div.uk-text-meta Former Commercial Director
div
div.uk-grid-small.uk-flex-middle(uk-grid)
div
img(src="images/about/patricia.svg"
alt="Patricia Kirk"
width="80"
height="80")
div.uk-width-expand
div Patricia Kirk
div.uk-text-meta Former Director of Strategy
div
div.uk-grid-small.uk-flex-middle(uk-grid)
div
img(src="images/about/nicole.svg"
alt="Nicole Yokoyama"
width="80"
height="80")
div.uk-width-expand
div Nicole Yokoyama
div.uk-text-meta Product Marketing Manager
h2.uk-text-center Some stats
div(class="uk-child-width-1-1 uk-child-width-1-3@s uk-text-center"
uk-grid)
div
div.uk-heading-primary.uk-text-warning 5+
div.uk-margin-small-top years on the market
div
div.uk-heading-primary.uk-text-warning 150+
div.uk-margin-small-top orders per day
div
div.uk-heading-primary.uk-text-warning 75000+
div.uk-margin-small-top clients
h2.uk-text-center Store
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.
figure
div.uk-text-bolder= shopInfo.storeName
div!= shopInfo.address
div= shopInfo.openingHours
div.tm-wrapper
figure.tm-ratio.tm-ratio-16-9.js-map(
data-latitude="59.9356728"
data-longitude="30.3258604"
data-zoom="14")
================================================
FILE: src/templates/pages/account.pug
================================================
extends /layouts/_account
block vars
-
page = {
title: 'Orders'
}
profileActivePage = 1
block account
each order in orders
section.uk-card-body
h3
a.uk-link-heading(href="#") ##{order.id}
|
|
span.uk-text-muted.uk-text-small from #{order.date}
table(class="uk-table " +
"uk-table-small " +
"uk-table-justify " +
"uk-table-responsive " +
"uk-table-divider " +
"uk-margin-small-top " +
"uk-margin-remove-bottom")
tbody
tr
th.uk-width-medium Items
td= order.items
tr
th.uk-width-medium Shipping
td= order.shipping
tr
th.uk-width-medium Payment
td= order.payment
tr
th.uk-width-medium Total
td= order.total
tr
th.uk-width-medium Status
td: span.uk-label(class= {"uk-label-danger": order.status == "Canceled"})= order.status
================================================
FILE: src/templates/pages/article.pug
================================================
extends /layouts/_article
block vars
-
article = articles[0]
page = {
title: article.title,
breadcrumbs: {
'Blog': 'blog.html'
}
}
block article
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
//- Article
section
article(class="uk-card " +
"uk-card-default " +
"uk-card-body " +
"uk-article " +
"tm-ignore-container")
header.uk-text-center
//- Title
h1.uk-article-title= article.title
//- Date
div.uk-article-meta
time= article.date
section.uk-article-body
include /partials/_article
//- Related articles
section
h2.uk-text-center Related Articles
div(class="uk-grid-medium " +
"uk-grid-match " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@s " +
"uk-child-width-1-4@m"
uk-grid)
each article in articles
div
a(href= article.href)
article(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-overflow-hidden " +
"uk-link-heading " +
"uk-display-block " +
"uk-box-shadow-hover-large " +
"uk-height-1-1 " +
"tm-ignore-container")
//- Preview
if article.preview
div.uk-card-media-top
figure.uk-margin-remove.tm-ratio.tm-ratio-16-9
div.uk-cover-container
img(src= article.preview alt= article.title uk-cover)
div.uk-card-body
//- Date
div.uk-article-meta.uk-margin-xsmall-bottom
time= article.date
//- Title
h3.uk-h4.uk-margin-remove= article.title
================================================
FILE: src/templates/pages/blog.pug
================================================
extends /layouts/_informational
block vars
-
page = {
title: 'Blog',
breadcrumbs: {}
}
informationalActivePage = 3
block informational
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
each article in articles
div
+article(article)
================================================
FILE: src/templates/pages/brands.pug
================================================
extends /layouts/_pages
block vars
-
page = {
title: 'Brands',
breadcrumbs: {}
}
block pages
div.uk-card.uk-card-default.tm-ignore-container
header.uk-card-header.uk-background-default
nav
ul.uk-subnav.uk-flex-center.uk-margin-remove
li: a(href="#number") #
li: a(href="#A") A
li: a(href="#B") B
li: a(href="#C") C
li: a(href="#D") D
li: a(href="#E") E
li: a(href="#F") F
li: a(href="#G") G
li: a(href="#H") H
li: a(href="#I") I
li: a(href="#J") J
li: a(href="#K") K
li: a(href="#L") L
li: a(href="#M") M
li: a(href="#N") N
li: a(href="#O") O
li: a(href="#P") P
li: a(href="#Q") Q
li: a(href="#R") R
li: a(href="#S") S
li: a(href="#T") T
li: a(href="#U") U
li: a(href="#V") V
li: a(href="#W") W
li: a(href="#X") X
li: a(href="#Y") Y
li: a(href="#Z") Z
section.uk-card-body(id="A")
div(uk-grid)
div(class="uk-width-1-1 uk-width-1-6@m")
h2.uk-text-center A
div(class="uk-width-1-1 uk-width-expand@m")
ul(class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-child-width-1-5@m"
uk-grid)
each brand in brands
li
a(class="uk-link-muted " +
"uk-text-center " +
"uk-display-block " +
"uk-padding-small " +
"uk-box-shadow-hover-large"
href="#")
if brand.image
div.tm-ratio.tm-ratio-4-3
div.tm-media-box
figure.tm-media-box-wrap
img.item-brand(src= brand.image alt= brand.name)
div.uk-margin-small-top.uk-text-truncate= brand.name
section.uk-card-body(id="B")
div(uk-grid)
div(class="uk-width-1-1 uk-width-1-6@m")
h2.uk-text-center B
div(class="uk-width-1-1 uk-width-expand@m")
section.uk-card-body(id="C")
div(uk-grid)
div(class="uk-width-1-1 uk-width-1-6@m")
h2.uk-text-center C
div(class="uk-width-1-1 uk-width-expand@m")
================================================
FILE: src/templates/pages/cart.pug
================================================
extends /layouts/_pages
block vars
-
page = {
title: 'Cart',
breadcrumbs: []
}
block pages
div.uk-grid-medium(uk-grid)
//- Items
div.uk-width-1-1(class="uk-width-expand@m")
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
//- Header
header(class="uk-card-header " +
"uk-text-uppercase " +
"uk-text-muted " +
"uk-text-center " +
"uk-text-small " +
"uk-visible@m")
div.uk-grid-small.uk-child-width-1-2(uk-grid)
//- Product cell
div product
//- Other cells
div
div.uk-grid-small.uk-child-width-expand(uk-grid)
div price
div.tm-quantity-column quantity
div sum
div.uk-width-auto
div(style="width: 20px;")
//- Body
each product in products
if product.isAddedToCart
div.uk-card-body
div(class="uk-grid-small " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@m " +
"uk-flex-middle"
uk-grid)
// Product cell
div
div.uk-grid-small(uk-grid)
//- Image
div.uk-width-1-3
div.tm-ratio.tm-ratio-4-3
a.tm-media-box(href= product.href)
figure.tm-media-box-wrap
if product.image
img(src= product.image.small alt= product.name)
else
+icon("image", "3")(class="uk-text-muted")
//- Info
div.uk-width-expand
div.uk-text-meta= product.type
a.uk-link-heading(href= product.href)= product.name
// Other cells
div
div(class="uk-grid-small " +
"uk-child-width-1-1 " +
"uk-child-width-expand@s " +
"uk-text-center"
uk-grid)
//- Price
div
div.uk-text-muted(class="uk-hidden@m") Price
div= product.price
//- Quantity
div.tm-cart-quantity-column
+quantity(product.id)
//- Sum
div
div.uk-text-muted(class="uk-hidden@m") Sum
div= product.price
//- Actions
div(class="uk-width-auto@s")
a.uk-text-danger(uk-tooltip="Remove")
+icon("close")
div.uk-card-footer
label
span.uk-form-label.uk-margin-small-right Promo Code
div.uk-inline
a.uk-form-icon.uk-form-icon-flip(href="#" uk-icon="arrow-right")
input.uk-input.uk-form-width-small(type="text")
//- Checkout
div.uk-width-1-1.tm-aside-column(class="uk-width-1-4@m")
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container(
uk-sticky="offset: 30; bottom: true; media: @m;")
div.uk-card-body
div.uk-grid-small(uk-grid)
div.uk-width-expand.uk-text-muted Subtotal
div $3148
div.uk-grid-small(uk-grid)
div.uk-width-expand.uk-text-muted Discount
div.uk-text-danger −$29
div.uk-card-body
div.uk-grid-small.uk-flex-middle(uk-grid)
div.uk-width-expand.uk-text-muted Total
div.uk-text-lead.uk-text-bolder $3119
a.uk-button.uk-button-primary.uk-margin-small.uk-width-1-1(
href="checkout.html") checkout
================================================
FILE: src/templates/pages/catalog.pug
================================================
extends /layouts/_pages
block vars
-
page = {
title: 'Catalog',
breadcrumbs: {},
quantity: 641
}
block pages
div.uk-grid-medium(uk-grid)
//- Navigation
aside(class="uk-width-1-4 uk-visible@m tm-aside-column")
nav.uk-card.uk-card-default.uk-card-body.uk-card-small(uk-sticky="bottom: true; offset: 90")
ul.uk-nav.uk-nav-default(uk-scrollspy-nav="closest: li; scroll: true; offset: 90")
each category in catalog
li: a(href="#" + category.id)= category.name
//- Categories
div(class="uk-width-1-1 uk-width-expand@m")
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
each category in catalog
section(id= category.id)
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
//- Header
header.uk-card-header
div.uk-grid-small.uk-flex-middle(uk-grid)
if category.image
a(href= category.href)
img(src= category.image
alt= category.name
width="50"
height="50")
div.uk-width-expand
h2.uk-h4.uk-margin-remove
a.uk-link-heading(href= category.href)= category.name
div.uk-text-meta= category.quantity + " items"
//- Body
if category.items
div.uk-card-body
ul.uk-list
each subCategory in category.items
li: a(href="subcategory.html")= subCategory
================================================
FILE: src/templates/pages/category.pug
================================================
extends /layouts/_pages
block vars
-
page = {
title: 'Laptops & Tablets',
breadcrumbs: {
'Catalog': 'catalog.html'
},
quantity: 367
}
block pages
div.uk-grid-medium(uk-grid)
//- Filters
aside#filters.uk-width-1-4.tm-aside-column.tm-filters(
uk-offcanvas="overlay: true; " +
"container: false;")
div.uk-offcanvas-bar.uk-padding-remove
div(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-flex " +
"uk-flex-column " +
"uk-height-1-1")
//- Header
header.uk-card-header.uk-flex.uk-flex-middle
div.uk-grid-small.uk-flex-1(uk-grid)
div.uk-width-expand
div.uk-h3 Filters
button.uk-offcanvas-close(type="button" uk-close)
//- Accordion
div.uk-margin-remove.uk-flex-1.uk-overflow-auto(
uk-accordion="multiple: true; targets: > .js-accordion-section"
style="flex-basis: auto")
//- Categories
section.uk-card-small.uk-card-body
h4.uk-margin-small-bottom Categories
ul.uk-nav.uk-nav-default
each category in catalog
each item in category.items
li: a(href="subcategory.html")= item
- break
//- Prices
section.uk-card-body.uk-open.js-accordion-section
h4.uk-accordion-title.uk-margin-remove Prices
div.uk-accordion-content
div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid)
div
div.uk-inline
span.uk-form-icon.uk-text-xsmall from
input.uk-input(type="text" placeholder="$59")
div
div.uk-inline
span.uk-form-icon.uk-text-xsmall to
input.uk-input(type="text" placeholder="$6559")
//- Properties
each property in filters
if property.id= 1
section.uk-card-body.js-accordion-section(
class= { "uk-open": property.isOpen })
h4.uk-accordion-title.uk-margin-remove= property.title
if property.description
+icon("question", ".75")(
class="tm-help-icon"
onclick="event.stopPropagation();")
div.uk-margin-remove(
uk-drop="mode: click;" +
"boundary-align: true; " +
"boundary: !.uk-accordion-title; " +
"pos: bottom-justify;")
div(class="uk-card " +
"uk-card-body " +
"uk-card-default " +
"uk-card-small " +
"uk-box-shadow-xlarge " +
"uk-text-small")= property.description
div.uk-accordion-content
ul.uk-list.tm-scrollbox
each item in property.items
li
input.tm-checkbox(
id= property.name + "-" + item.id
name= property.name
value= item.id
type="checkbox")
label(for= property.name + "-" + item.id)
span= item.name
|
|
span.uk-text-meta.uk-text-xsmall= item.quantity
- break
//- Reset filters
div.uk-card-body
button.uk-button.uk-button-default.uk-width-1-1
+icon("close", ".75")(class="uk-margin-xsmall-right")
| Reset all filters
//- Content
div.uk-width-expand
include /partials/_products
================================================
FILE: src/templates/pages/checkout.pug
================================================
extends /layouts/_checkout
block vars
-
page = {
title: 'Checkout'
}
block checkout
div.uk-grid-medium(uk-grid)
//- Form
form.uk-form-stacked.uk-width-1-1.tm-checkout(class="uk-width-expand@m")
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
//- Contact Information
section
h2.tm-checkout-title Contact Information
div.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container
div(class="uk-grid-small " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@s"
uk-grid)
div
label
div.uk-form-label.uk-form-label-required First Name
input.uk-input(type="text" required)
div
label
div.uk-form-label.uk-form-label-required Last Name
input.uk-input(type="text" required)
div
label
div.uk-form-label.uk-form-label-required Phone Number
input.uk-input(type="tel" required)
div
label
div.uk-form-label.uk-form-label-required Email
input.uk-input(type="email" required)
//- Shipping
section
h2.tm-checkout-title Shipping
div.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container
div(class="uk-grid-small " +
"uk-grid-match " +
"uk-child-width-1-1 " +
"uk-child-width-1-3@s " +
"uk-flex-center"
uk-switcher="toggle: > * > .tm-choose"
uk-grid)
div
a.tm-choose(href="#")
div.tm-choose-title pick up from store
div.tm-choose-description Free, tomorrow
div
a.tm-choose(href="#")
div.tm-choose-title delivery in city
div.tm-choose-description Free, tomorrow
div
a.tm-choose(href="#")
div.tm-choose-title regional delivery
div.tm-choose-description
| Via Russian Post or postal courier services. Sending to any country
div.uk-switcher.uk-margin
//- Pick up
section
div(class="uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s"
uk-grid)
div
figure.uk-card-media-top.tm-ratio.tm-ratio-16-9.js-map(
data-latitude="59.9356728"
data-longitude="30.3258604"
data-zoom="14")
div.uk-text-small
div.uk-text-bolder Store Name
div!= shopInfo.address
div= shopInfo.openingHours
//- Shipping in St Petersburg
section
div.uk-grid-small(uk-grid)
div.uk-width-expand
label
div.uk-form-label.uk-form-label-required Street
input.uk-input(type="text")
div(class="uk-width-1-3 uk-width-1-6@s")
label
div.uk-form-label.uk-form-label-required House
input.uk-input(type="text")
div.uk-grid-small(class="uk-child-width-1-3 uk-child-width-1-4@s" uk-grid)
div
label
div.uk-form-label Building
input.uk-input(type="text")
div
label
div.uk-form-label Entrance
input.uk-input(type="text")
div
label
div.uk-form-label Floor
input.uk-input(type="text")
div
label
div.uk-form-label Apartment
input.uk-input(type="text")
div.uk-width-1-1
label
div.uk-form-label Comment
textarea.uk-textarea(
rows="5"
placeholder="Additional information: phone numbers or doorphone code")
div.uk-grid-small(class="uk-child-width-1-2 uk-child-width-1-4@s" uk-grid)
div.uk-width-1-1.uk-text-meta Choose a convenient date and delivery interval
div
select.uk-select
option Tomorrow
option 25 May
option 26 May
option 27 May
option 28 May
option 29 May
option 30 May
option 1 June
div
select.uk-select
option 09:00 – 12:00
option 12:00 – 15:00
option 15:00 – 18:00
option 18:00 – 21:00
option 21:00 – 23:00
//- Regional shipping
div
div.uk-grid-small(uk-grid)
div.uk-width-1-1
label
div.uk-form-label.uk-form-label-required Country
select.uk-select
option Choose the country
option(value="RU") Russia
div.uk-grid-small(uk-grid)
div.uk-width-expand
label
div.uk-form-label.uk-form-label-required City
input.uk-input(type="text")
div(class="uk-width-1-3 uk-width-1-6@s")
label
div.uk-form-label.uk-form-label-required Post Code
input.uk-input(type="text")
div.uk-grid-small(uk-grid)
div.uk-width-expand
label
div.uk-form-label.uk-form-label-required Street
input.uk-input(type="text")
div(class="uk-width-1-3 uk-width-1-6@s")
label
div.uk-form-label.uk-form-label-required House
input.uk-input(type="text")
div.uk-grid-small(class="uk-child-width-1-3 uk-child-width-1-4@s" uk-grid)
div
label
div.uk-form-label Building
input.uk-input(type="text")
div
label
div.uk-form-label Entrance
input.uk-input(type="text")
div
label
div.uk-form-label Floor
input.uk-input(type="text")
div
label
div.uk-form-label Apartment
input.uk-input(type="text")
div.uk-width-1-1
label
div.uk-form-label Comment
textarea.uk-textarea(
rows="5"
placeholder="Additional information: phone numbers or doorphone code")
//- Payment
section
h2.tm-checkout-title Payment
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
div.uk-card-body
div(class="uk-grid-small " +
"uk-grid-match " +
"uk-child-width-1-1 " +
"uk-child-width-1-3@s " +
"uk-flex-center"
uk-switcher="toggle: > * > .tm-choose"
uk-grid)
div
a.tm-choose(href="#")
div.tm-choose-title payment upon receipt
div.tm-choose-description Cash, credit card
div
a.tm-choose(href="#")
div.tm-choose-title online by card
div.tm-choose-description Visa, MasterCard
div
a.tm-choose(href="#")
div.tm-choose-title electronic payment
div.tm-choose-description PayPal, Yandex.Money, QIWI
div.uk-card-footer
div.uk-grid-small.uk-flex-middle.uk-flex-center.uk-text-center(uk-grid)
div.uk-text-meta
+icon("lock", ".75")(class="uk-margin-xsmall-right")
| Security of payments is is provided by secure protocols
div
img(src="images/verified-by-visa.svg"
title="Verified by Visa"
style="height: 25px;")
div
img(src="images/mastercard-securecode.svg"
title="MasterCard SecureCode"
style="height: 25px;")
//- Checkout
div(class="uk-width-1-1 uk-width-1-4@m tm-aside-column")
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container(
uk-sticky="offset: 30; bottom: true; media: @m;")
section.uk-card-body
h4 Items in order
each product in products
if product.isAddedToCart
div.uk-grid-small(uk-grid)
div.uk-width-expand
div.uk-text-small= product.name
div.uk-text-meta 1 × #{product.price}
div.uk-text-right
div= product.price
section.uk-card-body
div.uk-grid-small(uk-grid)
div.uk-width-expand
div.uk-text-muted Shipping
div.uk-text-right
div Pick up from store
div.uk-text-meta Free, tomorrow
div.uk-grid-small(uk-grid)
div.uk-width-expand
div.uk-text-muted Payment
div.uk-text-right
div Online by card
section.uk-card-body
div.uk-grid-small(uk-grid)
div.uk-width-expand
div.uk-text-muted Subtotal
div.uk-text-right
div $3148
div.uk-grid-small(uk-grid)
div.uk-width-expand
div.uk-text-muted Discount
div.uk-text-right
div.uk-text-danger −$29
section.uk-card-body
div.uk-grid-small.uk-flex-middle(uk-grid)
div.uk-width-expand
div.uk-text-muted Total
div.uk-text-right
div.uk-text-lead.uk-text-bolder $3119
button.uk-button.uk-button-primary.uk-margin-small.uk-width-1-1 checkout
================================================
FILE: src/templates/pages/compare.pug
================================================
extends /layouts/_pages
block vars
-
page = {
title: 'Compare',
breadcrumbs: {}
}
block pages
div.uk-card.uk-card-default.uk-overflow-auto.tm-ignore-container
table.uk-table.uk-table-divider.tm-compare-table
thead
tr.uk-child-width-1-4
td.uk-table-middle.uk-text-center.tm-compare-column
input.tm-checkbox(id="show-difference" type="checkbox")
label(for="show-difference") Show differences only
each product in products
if product.isAddedToCompare
td.tm-compare-table-column
div.uk-height-1-1
div.uk-grid-small.uk-child-width-1-1.uk-height-1-1(uk-grid)
div.uk-text-center
a.uk-text-small.uk-text-danger(href="#")
+icon("close", ".75")
span.uk-margin-xsmall-left.tm-pseudo Delete
div
+product-small(product)
each group in compare
tbody
tr
th(colspan="4")
h3.uk-margin-remove= group.name
each values, property in group.properties
tr
th= property
each value in values
td!= value
================================================
FILE: src/templates/pages/contacts.pug
================================================
extends /layouts/_informational
block vars
-
page = {
title: 'Contacts',
breadcrumbs: {}
}
informationalActivePage = 2
block informational
article(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-card-body " +
"uk-article " +
"tm-ignore-container")
div.tm-wrapper
figure.tm-ratio.tm-ratio-16-9.js-map(
data-latitude="59.9356728"
data-longitude="30.3258604"
data-zoom="14")
div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-margin-top"
uk-grid)
section
h3 Store
ul.uk-list
li
a.uk-link-heading(href="#")
+icon("receiver")(class="uk-margin-small-right")
span.tm-pseudo= shopInfo.phone
li
a.uk-link-heading(href="#")
+icon("mail")(class="uk-margin-small-right")
span.tm-pseudo= shopInfo.email
li
div
+icon("location")(class="uk-margin-small-right")
span!= shopInfo.address
li
div
+icon("clock")(class="uk-margin-small-right")
span= shopInfo.openingHours
section
h3 Feedback
dl.uk-description-list
dt Cooperation
dd: a.uk-link-muted(href="#") cooperation@example.com
dt Partners
dd: a.uk-link-muted(href="#") partners@example.com
dt Press
dd: a.uk-link-muted(href="#") press@example.com
section.uk-width-1-1
h2.uk-text-center Contact Us
form
div.uk-grid-small.uk-child-width-1-1(uk-grid)
div
label
div.uk-form-label.uk-form-label-required Name
input.uk-input(type="text" required)
div
label
div.uk-form-label.uk-form-label-required Email
input.uk-input(type="email" required)
div
label
div.uk-form-label Topic
select.uk-select
option Customer service
option Tech support
option Other
div
label
div.uk-form-label Message
textarea.uk-textarea(rows="5")
div.uk-text-center
button.uk-button.uk-button-primary Send
================================================
FILE: src/templates/pages/delivery.pug
================================================
extends /layouts/_informational
block vars
-
page = {
title: 'Delivery',
breadcrumbs: {}
}
informationalActivePage = 6
block informational
article(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-card-body " +
"uk-article " +
"tm-ignore-container")
h2 Pickup from store in St. Petersburg
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.
figure
div.uk-text-bolder= shopInfo.storeName
div!= shopInfo.address
div= shopInfo.openingHours
div.tm-wrapper
figure.tm-ratio.tm-ratio-16-9.js-map(
data-latitude="59.9356728"
data-longitude="30.3258604"
data-zoom="14")
h2 Delivery in St. Petersburg
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.
ul
li Fusce eget lorem ex. Vivamus nisl eros, condimentum at mollis id, tempor a risus. Integer pellentesque bibendum est, dapibus lacinia lacus.
li Vivamus tellus nibh, mattis at aliquam et, vestibulum aliquet leo. Nunc cursus lectus ex, laoreet commodo ligula posuere nec.
li Suspendisse potenti. Vivamus fermentum vitae lacus ut vulputate. Mauris sed consectetur nibh.
h2 Regional Delivery
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.
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.
================================================
FILE: src/templates/pages/faq.pug
================================================
extends /layouts/_informational
block vars
-
page = {
title: 'FAQ',
breadcrumbs: {}
}
informationalActivePage = 5
block informational
article(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-card-body " +
"uk-article " +
"tm-ignore-container")
ul.uk-list-divider.uk-list-large(uk-accordion="multiple: true")
li
a.uk-accordion-title(href="#") Lorem ipsum dolor sit amet, consectetur adipiscing elit?
div.uk-accordion-content
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.
li
a.uk-accordion-title(href="#") Nullam massa sem, mollis ut luctus at, tincidunt a lorem?
div.uk-accordion-content
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.
li
a.uk-accordion-title(href="#") Aliquam pretium diam et ullamcorper malesuada?
div.uk-accordion-content
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.
li
a.uk-accordion-title(href="#") Etiam suscipit at nisi eget auctor?
div.uk-accordion-content
p Mauris id pellentesque metus. In quis arcu sed enim maximus pellentesque et eget velit. Etiam euismod enim vitae condimentum tristique.
li
a.uk-accordion-title(href="#") Sed porta diam eget enim bibendum laoreet?
div.uk-accordion-content
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.
================================================
FILE: src/templates/pages/favorites.pug
================================================
extends /layouts/_account
block vars
-
page = {
title: 'Favorites'
}
profileActivePage = 2
block account
div(class="uk-grid-collapse " +
"tm-products-list"
uk-grid)
each product in products
if product.isAddedToFavorites
+product(product)
================================================
FILE: src/templates/pages/index.pug
================================================
extends /layouts/_default
block vars
-
page = {
title: 'Home'
}
block default
//- Slider
section.uk-position-relative.uk-visible-toggle.uk-light(uk-slideshow="min-height: 300; max-height: 600;")
ul.uk-slideshow-items
each item in promo
li(style="background-color: " + item.background)
a(href="#")
figure.uk-container.uk-height-1-1
img(src= item.image
alt= item.title
width="1200"
height="600"
uk-cover)
a.uk-position-center-left.uk-position-small.uk-hidden-hover(
href="#"
uk-slideshow-item="previous"
uk-slidenav-previous)
a.uk-position-center-right.uk-position-small.uk-hidden-hover(
href="#"
uk-slideshow-item="next"
uk-slidenav-next)
div.uk-position-bottom-center.uk-position-small
ul.uk-slideshow-nav.uk-dotnav
//- Categories
section.uk-section.uk-section-default.uk-section-small
div.uk-container
div(class="uk-grid-small " +
"uk-child-width-1-2 " +
"uk-child-width-1-3@s " +
"uk-child-width-1-6@m"
uk-grid)
each category in categories
div
a(class="uk-link-muted " +
"uk-text-center " +
"uk-display-block " +
"uk-padding-small " +
"uk-box-shadow-hover-large"
href= category.href)
if category.image
div.tm-ratio.tm-ratio-4-3
div.tm-media-box
figure.tm-media-box-wrap
img.item-brand(src= category.image alt= category.title)
div.uk-margin-small-top
div.uk-text-truncate= category.title
if category.comment
div.uk-text-meta.uk-text-xsmall.uk-text-truncate= category.comment
div.uk-margin.uk-text-center
+link-to-all("see all categories", "catalog.html")
//- Trending
section.uk-section.uk-section-small
div.uk-container
h2.uk-text-center Trending Items
div.uk-card.uk-card-default.tm-ignore-container
div(class="uk-grid-collapse " +
"uk-child-width-1-3 " +
"uk-child-width-1-4@m " +
"tm-products-grid"
uk-grid)
- var count = 0
each product in products
if count < 8
+product(product)
- count++;
div.uk-margin.uk-text-center
+link-to-all("shop all", "subcategory.html")
//- Brands
section.uk-section.uk-section-default.uk-section-small
div.uk-container
h2.uk-text-center Popular Brands
div.uk-margin-medium-top(uk-slider="finite: true")
div.uk-position-relative
div.uk-grid-small.uk-flex-middle(uk-grid)
div(class="uk-visible@m")
a(href="#"
uk-slidenav-previous
uk-slider-item="previous")
div.uk-width-expand.uk-slider-container
ul(class="uk-slider-items " +
"uk-child-width-1-3 " +
"uk-child-width-1-6@s " +
"uk-grid " +
"uk-grid-large")
each brand in brands
li
div.tm-ratio.tm-ratio-16-9
a.uk-link-muted.tm-media-box.tm-grayscale(
href="#"
title= brand.name)
figure.tm-media-box-wrap
img(src= brand.image alt= brand.name)
div(class="uk-visible@m")
a(href="#"
uk-slider-item="next"
uk-slidenav-next)
ul(class="uk-slider-nav " +
"uk-dotnav " +
"uk-flex-center " +
"uk-margin-medium-top " +
"uk-hidden@m")
div.uk-margin.uk-text-center
+link-to-all("see all brands", "brands.html")
//- Blog
section.uk-section.uk-section-small
div.uk-container
h2.uk-text-center Blog
div(class="uk-grid-medium " +
"uk-grid-match " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@s"
uk-grid)
each article in articles
div
+article(article)
div.uk-margin.uk-text-center
+link-to-all("see all articles", "blog.html")
//- About & News
section.uk-section.uk-section-default.uk-section-small
div.uk-container
div(class="uk-grid-medium " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@s"
uk-grid)
//- About
section
h2(class="uk-text-center uk-text-left@s") About
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.
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.
div(class="uk-text-center uk-text-left@s")
+link-to-all("read more", "about.html")
//- News
section
h2(class="uk-text-center uk-text-left@s") Latest News
ul.uk-list.uk-list-small.uk-list-divider
each article in news
li
article.uk-article
div.uk-article-body
//- Date
div.uk-article-meta.uk-margin-xsmall-bottom
time= article.date
//- Title
h3.uk-h4.uk-margin-remove
a.uk-link-heading(href= article.href)= article.title
//- Description
if article.description
div.uk-margin-xsmall-top.uk-text-small!= article.description
div(class="uk-margin uk-text-center uk-text-left@s")
+link-to-all("see all news", "news.html")
//- Subscribe
section.uk-section.uk-section-primary.uk-section-small.uk-light
div.uk-container
div.uk-text-center
div.uk-h2.uk-margin-remove Subscribe for updates
div Be aware of new products and special offers.
div.uk-margin
form
div.uk-grid-small.uk-flex-center(uk-grid)
div(class="uk-width-1-1 uk-width-medium@s")
div.uk-inline.uk-width-1-1
span.uk-form-icon(uk-icon="mail")
input.uk-input(type="email" placeholder="Your email" required)
div
button.uk-button.uk-button-primary subscribe
================================================
FILE: src/templates/pages/news.pug
================================================
extends /layouts/_informational
block vars
-
page = {
title: 'News',
breadcrumbs: {}
}
informationalActivePage = 4
block informational
section.uk-card.uk-card-default.uk-card-small.uk-card-body.tm-ignore-container
ul.uk-list.uk-list-large.uk-list-divider
each article in news
li
article.uk-article
div.uk-article-body
//- Date
div.uk-article-meta.uk-margin-xsmall-bottom
time= article.date
//- Title
div
h3
a.uk-link-heading(href= article.href)= article.title
//- Description
if article.description
div.uk-margin-small-top!= article.description
================================================
FILE: src/templates/pages/personal.pug
================================================
extends /layouts/_account
block vars
-
page = {
title: 'Personal Info'
}
profileActivePage = 3
block account
div.uk-card-body
form.uk-form-stacked
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
//- Contact
fieldset.uk-fieldset
legend.uk-h4 Contact
div(class="uk-grid-small " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@s"
uk-grid)
div
label
div.uk-form-label First Name
input.uk-input(type="text" value= profile.firstName)
div
label
div.uk-form-label Last Name
input.uk-input(type="text" value= profile.lastName)
div
label
div.uk-form-label Phone Number
input.uk-input(type="tel" value= profile.phone)
div
label
div.uk-form-label Date of Birth
input.uk-input(type="date" value= profile.dateOFBirth)
//- Address
fieldset.uk-fieldset
legend.uk-h4 Address
div.uk-grid-small(uk-grid)
div.uk-width-1-1
label
div.uk-form-label Country
select.uk-select
option Choose the country
option(value="RU") Russia
div.uk-grid-small(uk-grid)
div.uk-width-expand
label
div.uk-form-label City
input.uk-input(type="text")
div(class="uk-width-1-3 uk-width-1-6@s")
label
div.uk-form-label Post Code
input.uk-input(type="text")
div.uk-grid-small(uk-grid)
div.uk-width-expand
label
div.uk-form-label Street
input.uk-input(type="text")
div(class="uk-width-1-3 uk-width-1-6@s")
label
div.uk-form-label House
input.uk-input(type="text")
div(class="uk-grid-small uk-child-width-1-3 uk-child-width-1-4@s"
uk-grid)
div
label
div.uk-form-label Building
input.uk-input(type="text")
div
label
div.uk-form-label Entrance
input.uk-input(type="text")
div
label
div.uk-form-label Floor
input.uk-input(type="text")
div
label
div.uk-form-label Apartment
input.uk-input(type="text")
div.uk-width-1-1
label
div.uk-form-label Comment
textarea.uk-textarea(
rows="5"
placeholder="Additional information: phone numbers or doorphone code")
div.uk-card-footer.uk-text-center
button.uk-button.uk-button-primary save
================================================
FILE: src/templates/pages/product.pug
================================================
extends /layouts/_pages
block vars
-
product = products[0];
page = {
title: product.name,
breadcrumbs: {
'Catalog': 'catalog.html',
'Laptops & Tablets': 'category.html',
'Laptops': 'subcategory.html'
}
}
block pages
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
//- Product
div
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
div.uk-grid-small.uk-grid-collapse.uk-grid-match(uk-grid)
//- Media
div(class="uk-width-1-1 uk-width-expand@m")
div.uk-grid-collapse.uk-child-width-1-1(
uk-slideshow="finite: true; ratio: 4:3;"
uk-grid)
//- Primary image
div
ul.uk-slideshow-items(uk-lightbox)
li
if product.image
a.uk-card-body.tm-media-box.tm-media-box-zoom(href= product.image.large)
figure.tm-media-box-wrap
img(src= product.image.large alt= product.name)
else
figure.tm-media-box-wrap
+icon("image", "5")(class="uk-text-muted")
if product.additionalImages
each additionalImage in product.additionalImages
li
a.uk-card-body.tm-media-box.tm-media-box-zoom(href= additionalImage.large)
figure.tm-media-box-wrap
img(src= additionalImage.large alt= product.name)
//- Additional images
if product.additionalImages
div
div.uk-card-body.uk-flex.uk-flex-center
div(class="uk-width-1-2 uk-visible@s")
div(uk-slider="finite: true")
div.uk-position-relative
div.uk-slider-container
ul.tm-slider-items.uk-slider-items.uk-child-width-1-4.uk-grid.uk-grid-small
li(uk-slideshow-item="0")
div.tm-ratio.tm-ratio-1-1
a.tm-media-box.tm-media-box-frame
figure.tm-media-box-wrap
img(src= product.image.small alt= product.name)
each additionalImage, index in product.additionalImages
li(uk-slideshow-item= index + 1)
div.tm-ratio.tm-ratio-1-1
a.tm-media-box.tm-media-box-frame(href="#")
figure.tm-media-box-wrap
img(src= additionalImage.small alt= product.name)
div
a.uk-position-center-left-out.uk-position-small(
href="#"
uk-slider-item="previous"
uk-slidenav-previous)
a.uk-position-center-right-out.uk-position-small(
href="#"
uk-slider-item="next"
uk-slidenav-next)
ul(class="uk-slideshow-nav uk-dotnav uk-hidden@s")
//- Info
div(class="uk-width-1-1 uk-width-1-3@m tm-product-info")
div.uk-card-body
//- Brand
div
a(href= product.brand.href title= product.brand.name)
img(src= product.brand.image alt= product.brand.name style="height: 40px;")
//- Rating & Statuses
div.uk-margin
div.uk-grid-small(uk-grid)
//- Rating
div.uk-flex.uk-flex-middle
ul.uk-iconnav.uk-margin-xsmall-bottom.tm-rating
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
div.uk-margin-xsmall-left
a.uk-text-meta.js-scroll-to-description(
href="#description"
onclick="UIkit.switcher('.js-product-switcher').show(3);") (2)
//- Statuses
if product.statuses
div
each status in product.statuses
case status
when "new"
span.uk-label.uk-label-success.uk-margin-xsmall-right= status
when "top selling"
span.uk-label.uk-label-warning.uk-margin-xsmall-right= status
when "trade-in"
span.uk-label.uk-label-danger.uk-margin-xsmall-right= status
default
span.uk-label= status
//- Variations
if product.statuses
div.uk-margin
div.uk-grid-medium(uk-grid)
each variation in product.variations
div
div.uk-text-small.uk-margin-xsmall-bottom= variation.name
ul.uk-subnav.uk-subnav-pill.tm-variations(uk-switcher)
each value in variation.values
li
if variation.name === "Color"
a.tm-variation-color(uk-tooltip= value.name)
div(style="background-color: " + value.value)
else
a= value.name
//- Shop
div.uk-margin
div.uk-padding-small.uk-background-primary-lighten.uk-border-rounded
div.uk-grid-small.uk-child-width-1-1(uk-grid)
//- Prices
div
if product.isNotAvailable
div.uk-text-muted Product not available
else
if product.oldPrice
del.uk-text-meta= product.oldPrice
div.tm-product-price= product.price
//- Add to cart
if !product.isNotAvailable
div
div.uk-grid-small(uk-grid)
//- Quantity
div
+quantity(product.id)
//- Add to cart button
div
button(class="uk-button " +
"uk-button-primary " +
"tm-product-add-button " +
"tm-shine " +
"js-add-to-cart") add to cart
//- Actions buttons
div(class="uk-width-auto uk-width-expand@s uk-flex uk-flex-middle uk-text-meta")
a.uk-margin-small-right.js-add-to.js-add-to-favorites(
class= { "tm-action-button-active js-added-to": product.isAddedToFavorites }
uk-tooltip="Add to favorites")
+icon("heart")
a.js-add-to.js-add-to-compare(
class= { "tm-action-button-active js-added-to": product.isAddedToCompare }
uk-tooltip="Add to compare")
+icon("copy")
//- Delivery info
div.uk-margin
div.uk-padding-small.uk-background-muted.uk-border-rounded
div.uk-grid-small.uk-child-width-1-1.uk-text-small(uk-grid)
//- Delivery
div
div.uk-grid-collapse(uk-grid)
+icon("cart")(class="uk-margin-xsmall-right")
div
div.uk-text-bolder Delivery
div.uk-text-xsmall.uk-text-muted In stock, free, tomorrow
//- Pick up
div
div.uk-grid-collapse(uk-grid)
+icon("location")(class="uk-margin-xsmall-right")
div
div.uk-text-bolder Pick up from store
div.uk-text-xsmall.uk-text-muted In stock, free, tomorrow
//- Properties
div.uk-margin
if product.properties
ul.uk-list.uk-text-small.uk-margin-remove
for value, property in product.properties
li
span.uk-text-muted= property + ": "
span!= value
div.uk-margin-small-top
a.uk-link-heading.js-scroll-to-description(
href="#description"
onclick="UIkit.switcher('.js-product-switcher').show(1);")
span.tm-pseudo Detailed specifications
+icon("chevron-down", ".75")(class="uk-margin-xsmall-left")
//- Description
div#description.uk-width-1-1.tm-product-description
header
nav.tm-product-nav(
uk-sticky="offset: 60; " +
"bottom: #description; " +
"cls-active: tm-product-nav-fixed;")
ul.uk-subnav.uk-subnav-pill.js-product-switcher(
uk-switcher="connect: .js-tabs")
li: a.js-scroll-to-description(href="#description") Overview
li: a.js-scroll-to-description(href="#description") Specifications
li: a.js-scroll-to-description(href="#description") Accessories
|
|
span (9)
li: a.js-scroll-to-description(href="#description") Reviews
|
|
span (2)
li: a.js-scroll-to-description(href="#description") Q&A
div.uk-card-body
div.uk-switcher.js-product-switcher.js-tabs
//- Overview
section
article.uk-article
div.uk-article-body
include /partials/_article
//- Specifications
section
each group in product.specifications
h2= group.name
table.uk-table.uk-table-divider.uk-table-justify.uk-table-responsive
each value, property in group.properties
tr
th.uk-width-medium= property
td.uk-table-expand!= value
//- Accessories
section
div.tm-wrapper
div(class="uk-grid-collapse " +
"uk-child-width-1-3@s " +
"uk-child-width-1-4@m " +
"tm-products-grid"
uk-grid)
each product in products
+product(product)
//- Reviews
section
if product.reviews
div.uk-grid-small.uk-grid-divider(uk-grid)
div(class="uk-width-1-1 " +
"uk-width-1-5@s " +
"uk-text-center " +
"tm-reviews-column")
div.uk-text-meta.uk-text-uppercase average rating
div.uk-heading-primary 5.0
div.uk-flex.uk-flex-center
ul.uk-iconnav.tm-rating
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
div.uk-margin-small-top.uk-text-meta based on 2 reviews
button(class="uk-button uk-button-primary uk-margin-top uk-width-1-1"
uk-toggle="target: #review") write a review
div(class="uk-width-1-1 " +
"uk-width-expand@s")
div.uk-grid-small.uk-grid-divider.uk-child-width-1-1(uk-grid)
each review in product.reviews
article
section.uk-grid-small.uk-child-width-1-1(uk-grid)
header
div.uk-h4.uk-margin-remove= review.author
time.uk-text-meta= review.date
div
ul.uk-iconnav.uk-margin-bottom.tm-rating
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
li: +icon("star")(class="uk-text-warning")
div!= review.text
div.uk-grid-small.uk-flex-middle.uk-margin-top(uk-grid)
div.uk-text-meta Was this review helpful to you?
div
button.uk-button.uk-button-default.uk-button-small
| Yes
span.uk-margin-xsmall-left.uk-text-muted= review.likes
button.uk-button.uk-button-default.uk-button-small.uk-margin-small-left
| No
span.uk-margin-xsmall-left.uk-text-muted= review.dislikes
//- Q&A
section
ul.uk-list-divider.uk-list-large(uk-accordion="multiple: true")
each question in product.questions
li
a.uk-accordion-title(href="#")= question.question
div.uk-accordion-content= question.answer
// Related items
section
div(uk-slider="finite: true")
div.uk-grid-small.uk-flex-middle.uk-margin-bottom(uk-grid)
h2.uk-width-expand(class="uk-text-center uk-text-left@s") Related Products
div(class="uk-visible@s")
a.tm-slidenav(href="#" uk-slider-item="previous" uk-slidenav-previous)
a.tm-slidenav(href="#" uk-slider-item="next" uk-slidenav-next)
div
div.uk-card.uk-card-default.uk-card-small.tm-ignore-container
div.uk-position-relative
div.uk-slider-container
div(class="uk-slider-items " +
"uk-grid-collapse " +
"uk-child-width-1-3 " +
"uk-child-width-1-4@m " +
"tm-products-grid")
each product in products
+product(product)
ul.uk-slider-nav.uk-dotnav.uk-flex-center.uk-margin-top(class="uk-hidden@s")
//- Modals
div#review(uk-modal)
div.uk-modal-dialog.uk-modal-body
button.uk-modal-close-outside(type="button" uk-close)
h2.uk-modal-title.uk-text-center Review
form.uk-form-stacked
div.uk-grid-small.uk-child-width-1-1(uk-grid)
div
label
div.uk-form-label.uk-form-label-required Name
input.uk-input(type="text" required)
div
label
div.uk-form-label.uk-form-label-required Email
input.uk-input(type="email" required)
div
div.uk-form-label Rating
ul.uk-iconnav.tm-rating
li: a(uk-icon="star")
li: a(uk-icon="star")
li: a(uk-icon="star")
li: a(uk-icon="star")
li: a(uk-icon="star")
div
label
div.uk-form-label.uk-form-label-required Review
textarea.uk-textarea(rows="5" required)
div.uk-text-center
button.uk-button.uk-button-primary Send
================================================
FILE: src/templates/pages/settings.pug
================================================
extends /layouts/_account
block vars
-
page = {
title: 'Settings'
}
profileActivePage = 4
block account
div.uk-card-body
form.uk-form-stacked
div.uk-grid-medium.uk-child-width-1-1(uk-grid)
//- Email
fieldset.uk-fieldset
legend.uk-h4 Email
div(class="uk-grid-small " +
"uk-child-width-1-1"
uk-grid)
div
label
div.uk-form-label Current Email
input.uk-input.uk-form-width-large(type="email" value= profile.email disabled)
div
label
div.uk-form-label New Email
input.uk-input.uk-form-width-large(type="email")
div
button.uk-button.uk-button-primary update email
//- Password
fieldset.uk-fieldset
legend.uk-h4 Password
div(class="uk-grid-small " +
"uk-child-width-1-1"
uk-grid)
div
label
div.uk-form-label Current Password
input.uk-input.uk-form-width-large(type="password")
div
label
div.uk-form-label New Password
input.uk-input.uk-form-width-large(type="password")
div
label
div.uk-form-label Confirm Password
input.uk-input.uk-form-width-large(type="password")
div
button.uk-button.uk-button-primary update password
//- Email notifications
fieldset.uk-fieldset
legend.uk-h4 Email Notifications
ul.uk-list.uk-margin-remove
li
input(class="tm-checkbox"
id="notification-1"
type="checkbox"
name="notification"
value="1"
checked)
label(for="notification-1")
span Weekly Newsletter
li
input(class="tm-checkbox"
id="notification-2"
type="checkbox"
name="notification"
value="1"
checked)
label(for="notification-2")
span New Product Announcements
li
input(class="tm-checkbox"
id="notification-3"
type="checkbox"
name="notification"
value="1"
checked)
label(for="notification-3")
span Product Specials
================================================
FILE: src/templates/pages/subcategory.pug
================================================
extends /layouts/_pages
block vars
-
page = {
title: 'Laptops',
breadcrumbs: {
'Catalog': 'catalog.html',
'Laptops & Tablets': 'category.html'
},
quantity: 289
}
block pages
div.uk-grid-medium(uk-grid)
//- Filters
aside#filters.uk-width-1-4.tm-aside-column.tm-filters(
uk-offcanvas="overlay: true; " +
"container: false;")
div.uk-offcanvas-bar.uk-padding-remove
div(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-flex " +
"uk-flex-column " +
"uk-height-1-1")
//- Header
header.uk-card-header.uk-flex.uk-flex-middle
div.uk-grid-small.uk-flex-1(uk-grid)
div.uk-width-expand
h3 Filters
button.uk-offcanvas-close(type="button" uk-close)
//- Accordion
div.uk-margin-remove.uk-flex-1.uk-overflow-auto(
uk-accordion="multiple: true; targets: > .js-accordion-section"
style="flex-basis: auto")
//- Prices
section.uk-card-body.uk-open.js-accordion-section
h4.uk-accordion-title.uk-margin-remove Prices
div.uk-accordion-content
div.uk-grid-small.uk-child-width-1-2.uk-text-small(uk-grid)
div
div.uk-inline
span.uk-form-icon.uk-text-xsmall from
input.uk-input(type="text" placeholder="$59")
div
div.uk-inline
span.uk-form-icon.uk-text-xsmall to
input.uk-input(type="text" placeholder="$6559")
//- Properties
each property in filters
section.uk-card-body.js-accordion-section(
class= { "uk-open": property.isOpen })
h4.uk-accordion-title.uk-margin-remove= property.title
if property.description
+icon("question", ".75")(
class="tm-help-icon"
onclick="event.stopPropagation();")
div.uk-margin-remove(
uk-drop="mode: click;" +
"boundary-align: true; " +
"boundary: !.uk-accordion-title; " +
"pos: bottom-justify;")
div(class="uk-card " +
"uk-card-body " +
"uk-card-default " +
"uk-card-small " +
"uk-box-shadow-xlarge " +
"uk-text-small")= property.description
div.uk-accordion-content
ul.uk-list.tm-scrollbox
each item in property.items
li
input.tm-checkbox(
id= property.name + "-" + item.id
name= property.name
value= item.id
type="checkbox")
label(for= property.name + "-" + item.id)
span= item.name
|
|
span.uk-text-meta.uk-text-xsmall= item.quantity
div.uk-card-body
button.uk-button.uk-button-default.uk-width-1-1
+icon("close", ".75")(class="uk-margin-xsmall-right")
| Reset all filters
//- Content
div.uk-width-expand
include /partials/_products
================================================
FILE: src/templates/partials/_article.pug
================================================
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.
div.tm-wrapper.uk-text-center
figure
a(href="images/articles/macbook-photo.jpg")
img(src="images/articles/macbook-photo.jpg"
alt="MacBook Pro")
figcaption MacBook Pro
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.
h2 Touch Bar
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.
h2 Retina Display
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.
figure.uk-text-center
a(href="images/articles/macbook-promo-4.jpg")
img(src="images/articles/macbook-promo-4.jpg"
alt="MacBook Pro")
h2 Force Touch Trackpad
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.
div.tm-wrapper
figure.tm-ratio.tm-ratio-16-9
iframe(
src="https://www.youtube.com/embed/WVPRkcczXCY"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen)
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.
figure(uk-slideshow)
div.uk-position-relative.uk-visible-toggle.uk-light
ul.uk-slideshow-items
li
img(
src="images/articles/macbook-promo-1.jpg"
alt="MacBook Pro"
uk-cover)
li
img(
src="images/articles/macbook-promo-2.jpg"
alt="MacBook Pro"
uk-cover)
a.uk-position-center-left.uk-position-small.uk-hidden-hover(
href="#"
uk-slidenav-previous
uk-slideshow-item="previous")
a.uk-position-center-right.uk-position-small.uk-hidden-hover(
href="#"
uk-slidenav-next
uk-slideshow-item="next")
ul.uk-slideshow-nav.uk-dotnav.uk-flex-center.uk-margin
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.
blockquote.twitter-tweet(data-lang="en")
p(lang="en" dir="ltr")
| Mophie's latest battery pack is powerful enough to charge your 15-inch MacBook Pro
a(href="https://t.co/jN4RzcxOyG") https://t.co/jN4RzcxOyG
a(href="https://t.co/5oJBKZRVBx") pic.twitter.com/5oJBKZRVBx
| — The Verge (@verge)
a(href="https://twitter.com/verge/status/948539601265872896?ref_src=twsrc%5Etfw") January 3, 2018
script(src="https://platform.twitter.com/widgets.js" charset="utf-8" async)
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.
table(class="uk-table " +
"uk-table-large " +
"uk-table-middle " +
"uk-table-divider " +
"uk-table-justify " +
"uk-table-responsive")
thead
tr
th
th.uk-width-1-4.uk-text-center MacBook Pro 13"
th.uk-width-1-4.uk-text-center MacBook Pro 13" with Touch Bar
th.uk-width-1-4.uk-text-center MacBook Pro 15" with Touch Bar
tbody
tr
th Dimensions
td 0.59 × 11.97 × 8.36 inches
td 0.59 × 11.97 × 8.36 inches
td 0.61 × 13.75 × 9.48 inches
tr
th Weight
td 3.02 pounds
td 3.02 pounds
td 4.02 pounds
tr
th Display
td 13.3" 2560×1600,<br>60Hz Retina Display
td 13.3" 2560×1600,<br>60Hz Retina Display
td 15.4" 2880×1800,<br>60Hz Retina Display
tr
th Inputs
td 2 × USB-C Ports,<br>1 × 3.5mm Headphone Jack
td 4 × USB-C Ports,<br>1 × 3.5mm Headphone Jack
td 4 × USB-C Ports,<br>1 × 3.5mm Headphone Jack
tr
th Battery Life
td Approximately 10 hours
td Approximately 10 hours
td Approximately 10 hours
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.
div.tm-wrapper
figure.uk-text-center
a(href="images/articles/macbook-promo-3.jpg")
img(src="images/articles/macbook-promo-3.jpg"
alt="MacBook Pro")
figcaption 13-inch and 15-inch
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.
blockquote(cite="#")
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.
footer Tim Cook
================================================
FILE: src/templates/partials/_cart-offcanvas.pug
================================================
div#cart-offcanvas(uk-offcanvas="overlay: true; flip: true")
aside.uk-offcanvas-bar.uk-padding-remove
div(class="uk-card " +
"uk-card-default " +
"uk-card-small " +
"uk-height-1-1 " +
"uk-flex " +
"uk-flex-column " +
"tm-shadow-remove")
header.uk-card-header.uk-flex.uk-flex-middle
div.uk-grid-small.uk-flex-1(uk-grid)
div.uk-width-expand
div.uk-h3 Cart
button.uk-offcanvas-close(type="button" uk-close)
div.uk-card-body.uk-overflow-auto
ul.uk-list.uk-list-divider
each product in products
if product.isAddedToCart
li.uk-visible-toggle
arttcle
div.uk-grid-small(uk-grid)
//- Image
div.uk-width-1-4
div.tm-ratio.tm-ratio-4-3
a.tm-media-box(href= product.href)
figure.tm-media-box-wrap
if product.image
img(src= product.image.small alt= product.name)
else
+icon("image", "3")(class="uk-text-muted")
//- Info
div.uk-width-expand
div.uk-text-meta.uk-text-xsmall= product.type
a.uk-link-heading.uk-text-small(href= product.href)= product.name
div.uk-margin-xsmall.uk-grid-small.uk-flex-middle(uk-grid)
div.uk-text-bolder.uk-text-small= product.price
div.uk-text-meta.uk-text-xsmall 1 × #{product.price}
//- Delete
div
a(class="uk-icon-link " +
"uk-text-danger " +
"uk-invisible-hover"
href="#"
uk-icon="icon: close; ratio: .75"
uk-tooltip="Remove")
footer.uk-card-footer
div.uk-grid-small(uk-grid)
div.uk-width-expand.uk-text-muted.uk-h4 Subtotal
div.uk-h4.uk-text-bolder $3148.00
div(class="uk-grid-small " +
"uk-child-width-1-1 " +
"uk-child-width-1-2@m " +
"uk-margin-small" uk-grid)
div
a(class="uk-button uk-button-default uk-margin-small uk-width-1-1"
href="cart.html") view cart
div
a(class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
href="checkout.html") checkout
================================================
FILE: src/templates/partials/_footer.pug
================================================
section.uk-section.uk-section-secondary.uk-section-small.uk-light
div.uk-container
div(class="uk-grid-medium " +
"uk-child-width-1-1 " +
"uk-child-width-1-4@m"
uk-grid)
div
a.uk-logo(href="index.html")
img(src="images/logo-inverse.svg" width="90" height="32" alt="Logo")
p.uk-text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris eros. Nulla quis ante sed tortor efficitur facilisis.
ul.uk-iconnav
each social in socials
li: a(href="#" title= social.name uk-icon= social.icon)
div
nav.uk-grid-small.uk-child-width-1-2(uk-grid)
div
ul.uk-nav.uk-nav-default
each item in footerMenuLeft
li: a(href= item.href)= item.name
div
ul.uk-nav.uk-nav-default
each item in footerMenuRight
li: a(href= item.href)= item.name
div
ul.uk-list.uk-text-small
li
a.uk-link-muted(href="#")
+icon("receiver")(class="uk-margin-small-right")
span.tm-pseudo= shopInfo.phone
li
a.uk-link-muted(href="#")
+icon("mail")(class="uk-margin-small-right")
span.tm-pseudo= shopInfo.email
li
div.uk-text-muted
+icon("location")(class="uk-margin-small-right")
span!= shopInfo.address
li
div.uk-text-muted
+icon("clock")(class="uk-margin-small-right")
span= shopInfo.openingHours
div
form.uk-form-stacked
label
div.uk-form-label.uk-text-muted Subscribe for updates
div.uk-inline.uk-width-1-1
a.uk-form-icon.uk-form-icon-flip(href="#" uk-icon="mail")
input.uk-input(type="email" placeholder="Your email" required)
div.uk-margin.uk-text-small.uk-text-muted Shopping Categories icons by Jaro Sigrist from Noun Project
================================================
FILE: src/templates/partials/_head.pug
================================================
meta(charset="UTF-8")
meta(http-equiv="x-ua-compatible" content="ie=edge")
meta(name="viewport" content="width=device-width, initial-scale=1")
if page.title
title= page.title
================================================
FILE: src/templates/partials/_header.pug
================================================
include ../components/_toolbar
include ../components/_navbar
================================================
FILE: src/templates/partials/_nav-offcanvas.pug
================================================
div#nav-offcanvas(uk-offcanvas="overlay: true")
aside.uk-offcanvas-bar.uk-padding-remove
div.uk-card.uk-card-default.uk-card-small.tm-shadow-remove
header.uk-card-header.uk-flex.uk-flex-middle
div
a.uk-link-muted.uk-text-bold(href="#")= shopInfo.phone
div.uk-text-xsmall.uk-text-muted(style="margin-top: -2px;")
div!= shopInfo.address
div= shopInfo.openingHours
nav.uk-card-small.uk-card-body
ul.uk-nav-default.uk-nav-parent-icon.uk-list-divider(uk-nav)
each item in navbarMenu
li(class= { "uk-parent": item.items })
a(href= item.href)= item.name
if item.items
ul.uk-nav-sub.uk-list-divider
each category in item.items
li: a(href="subcategory.html")= category.name
if item.name === "Catalog"
li.uk-text-center
+link-to-all('see all categories', item.href)
if item.name === "Brands"
li.uk-text-center
+link-to-all('see all brands', item.href)
li
a(href="compare.html") Compare
span.uk-badge.uk-margin-xsmall-left 3
nav.uk-card-small.uk-card-bod
gitextract_l960gcdy/
├── .gitignore
├── LICENCE
├── README.md
├── gulpfile.js
├── package.json
└── src/
├── js/
│ ├── script.js
│ ├── uikit-icons.js
│ └── uikit.js
├── sass/
│ ├── custom.scss
│ ├── style.scss
│ ├── uikit-components.scss
│ └── uikit-theme/
│ ├── mixins/
│ │ ├── _import.scss
│ │ ├── accordion.scss
│ │ ├── article.scss
│ │ ├── background.scss
│ │ ├── base.scss
│ │ ├── breadcrumb.scss
│ │ ├── button.scss
│ │ ├── card.scss
│ │ ├── form.scss
│ │ ├── margin.scss
│ │ ├── notification.scss
│ │ ├── offcanvas.scss
│ │ ├── section.scss
│ │ ├── subnav.scss
│ │ ├── table.scss
│ │ └── text.scss
│ └── variables.scss
└── 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
SYMBOL INDEX (4 symbols across 1 files)
FILE: src/js/script.js
function initMap (line 2) | function initMap() {
function init (line 34) | function init() {
function _switch (line 43) | function _switch(opt) {
function increment (line 55) | function increment(incrementor, target) {
Condensed preview — 73 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (206K chars).
[
{
"path": ".gitignore",
"chars": 104,
"preview": ".DS_Store\n.DS_Store?\n._*\nThumbs.db\nIcon?\n.Trashes\nehthumbs.db\n*.log\n*.log*\n*.swp\n.idea\ndist\nnode_modules"
},
{
"path": "LICENCE",
"chars": 1080,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2018 Vladimir Ković\n\nPermission is hereby granted, free of charge, to any person ob"
},
{
"path": "README.md",
"chars": 2034,
"preview": "# Computer store e-commerce template\n\n[](https://githu"
},
{
"path": "gulpfile.js",
"chars": 1715,
"preview": "var gulp = require('gulp'),\n clean = require('gulp-clean'),\n include = require('gulp-include'),\n pug = require("
},
{
"path": "package.json",
"chars": 909,
"preview": "{\n \"name\": \"uikit-computer-store-template\",\n \"version\": \"1.0.0\",\n \"description\": \"Computer store e-commerce tem"
},
{
"path": "src/js/script.js",
"chars": 3546,
"preview": "// Google Maps\nfunction initMap() {\n var elements = document.querySelectorAll('.js-map');\n Array.prototype.forEach"
},
{
"path": "src/js/uikit-icons.js",
"chars": 58,
"preview": "//=require ../../node_modules/uikit/dist/js/uikit-icons.js"
},
{
"path": "src/js/uikit.js",
"chars": 52,
"preview": "//=require ../../node_modules/uikit/dist/js/uikit.js"
},
{
"path": "src/sass/custom.scss",
"chars": 21791,
"preview": "//\n// Custom variables\n//\n\n// Breakpoints\n$breakpoint-tablet: 768px;\n\n// Product card\n$product-card-title-max-lines: 3;\n"
},
{
"path": "src/sass/style.scss",
"chars": 414,
"preview": "// UIkit variables and custom variable overrides\n@import \"uikit-theme/variables\";\n\n// UIkit mixins\n@import \"~uikit/src/s"
},
{
"path": "src/sass/uikit-components.scss",
"chars": 3826,
"preview": "// Base\n@import \"~uikit/src/scss/components/mixin\";\n@import \"~uikit/src/scss/components/base\";\n\n// Elements\n@import \"~ui"
},
{
"path": "src/sass/uikit-theme/mixins/_import.scss",
"chars": 282,
"preview": "@import \"accordion\";\n@import \"article\";\n@import \"background\";\n@import \"base\";\n@import \"breadcrumb\";\n@import \"button\";\n@i"
},
{
"path": "src/sass/uikit-theme/mixins/accordion.scss",
"chars": 579,
"preview": "@mixin hook-accordion-title() {\n cursor: pointer;\n\n overflow: hidden;\n\n &::before {\n content: \"\";\n "
},
{
"path": "src/sass/uikit-theme/mixins/article.scss",
"chars": 708,
"preview": "@mixin hook-article-misc() {\n .uk-article-body {\n\n &:not(:first-child) {\n margin-top: $global-margi"
},
{
"path": "src/sass/uikit-theme/mixins/background.scss",
"chars": 142,
"preview": "@mixin hook-background-misc() {\n .uk-background-primary-lighten {\n background-color: $background-primary-backg"
},
{
"path": "src/sass/uikit-theme/mixins/base.scss",
"chars": 148,
"preview": "@mixin hook-base-body() {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rend"
},
{
"path": "src/sass/uikit-theme/mixins/breadcrumb.scss",
"chars": 397,
"preview": "@mixin hook-breadcrumb-misc() {\n .uk-breadcrumb > :nth-last-child(2):not(.uk-first-column)::before {\n @media ("
},
{
"path": "src/sass/uikit-theme/mixins/button.scss",
"chars": 216,
"preview": "@mixin hook-button() {\n border-radius: $border-rounded-border-radius;\n text-transform: $button-text-transform;\n "
},
{
"path": "src/sass/uikit-theme/mixins/card.scss",
"chars": 3304,
"preview": "@mixin hook-card-default() {\n border-radius: $border-rounded-border-radius;\n box-shadow: $card-default-box-shadow;"
},
{
"path": "src/sass/uikit-theme/mixins/form.scss",
"chars": 609,
"preview": "@mixin hook-form() {\n border-radius: $border-rounded-border-radius;\n border: $form-border-width solid $form-border"
},
{
"path": "src/sass/uikit-theme/mixins/margin.scss",
"chars": 562,
"preview": "@mixin hook-margin-misc() {\n .uk-margin-xsmall {\n margin-bottom: $margin-xsmall-margin;\n }\n\n * + .uk-mar"
},
{
"path": "src/sass/uikit-theme/mixins/notification.scss",
"chars": 80,
"preview": "@mixin hook-notification-message() {\n box-shadow: $global-small-box-shadow;\n}"
},
{
"path": "src/sass/uikit-theme/mixins/offcanvas.scss",
"chars": 444,
"preview": "@mixin hook-offcanvas-misc() {\n .uk-offcanvas-bar .uk-card-header {\n min-height: 60px;\n padding-top: 0;"
},
{
"path": "src/sass/uikit-theme/mixins/section.scss",
"chars": 398,
"preview": "@mixin hook-section-misc() {\n .uk-section-small {\n padding-top: $section-small-padding-vertical;\n paddi"
},
{
"path": "src/sass/uikit-theme/mixins/subnav.scss",
"chars": 251,
"preview": "@mixin hook-subnav-item() {\n border-radius: $border-rounded-border-radius;\n font-size: $subnav-item-font-size;\n "
},
{
"path": "src/sass/uikit-theme/mixins/table.scss",
"chars": 238,
"preview": "@mixin hook-table-misc() {\n .uk-table tbody th {\n font-size: $global-font-size;\n vertical-align: top;\n "
},
{
"path": "src/sass/uikit-theme/mixins/text.scss",
"chars": 181,
"preview": "@mixin hook-text-misc() {\n .uk-text-xsmall {\n font-size: $global-xsmall-font-size;\n line-height: 1.2;\n "
},
{
"path": "src/sass/uikit-theme/variables.scss",
"chars": 3390,
"preview": "//\n// UIkit global variables definitions\n//\n// Default variables with default values needed for custom variables below ("
},
{
"path": "src/templates/components/_navbar.pug",
"chars": 5563,
"preview": "div.uk-navbar-container.tm-navbar-container(uk-sticky=\"cls-active: tm-navbar-container-fixed\")\n div.uk-container(uk-nav"
},
{
"path": "src/templates/components/_toolbar.pug",
"chars": 1994,
"preview": "include ../mixins/_icon\n\ndiv(class=\"uk-navbar-container \" +\n \"uk-light \" +\n \"uk-visible@m \" +\n "
},
{
"path": "src/templates/data/_data.pug",
"chars": 31725,
"preview": "-\n var shopInfo = {\n phone: '8 800 799 99 99',\n email: 'example@example.com',\n address: 'St. Petersburg, "
},
{
"path": "src/templates/layouts/_account.pug",
"chars": 2688,
"preview": "extends _default\n\nblock vars\n\nblock default\n section.uk-section.uk-section-small\n div.uk-container\n div.uk-grid"
},
{
"path": "src/templates/layouts/_article.pug",
"chars": 534,
"preview": "extends _default\n\nblock vars\n\nblock default\n section.uk-section.uk-section-small\n div.uk-container\n div.uk-grid"
},
{
"path": "src/templates/layouts/_checkout.pug",
"chars": 1343,
"preview": "extends _index\n\nblock vars\n\nblock index\n\n header\n div.uk-navbar-container.tm-navbar-container\n div.uk-container"
},
{
"path": "src/templates/layouts/_default.pug",
"chars": 1016,
"preview": "extends _index\n\nblock vars\n\nblock index\n\n header\n include ../partials/_header\n\n main\n\n block default\n\n //- Ad"
},
{
"path": "src/templates/layouts/_index.pug",
"chars": 614,
"preview": "include ../data/_data\ninclude ../mixins/_import\n\ndoctype html\n\n//- Variables\nblock vars\n - var page\n\n//- Template\nhtml("
},
{
"path": "src/templates/layouts/_informational.pug",
"chars": 635,
"preview": "extends /layouts/_pages\n\nblock vars\n\nblock pages\n div.uk-grid-medium(uk-grid)\n\n //- Content\n section(class=\"uk-wi"
},
{
"path": "src/templates/layouts/_pages.pug",
"chars": 715,
"preview": "extends _default\n\nblock vars\n\nblock default\n section.uk-section.uk-section-small\n div.uk-container\n div.uk-grid"
},
{
"path": "src/templates/mixins/_article.pug",
"chars": 954,
"preview": "mixin article(article)\n\n a(href= article.href)\n article(class=\"uk-card \" +\n \"uk-card-default \" +\n "
},
{
"path": "src/templates/mixins/_icon.pug",
"chars": 165,
"preview": "mixin icon(name, ratio)\n\n if !ratio\n span(uk-icon= name)&attributes(attributes)\n else\n span(uk-icon=`icon: ${nam"
},
{
"path": "src/templates/mixins/_import.pug",
"chars": 109,
"preview": "include _icon\ninclude _link-to-all\ninclude _product\ninclude _quantity\ninclude _product-small\ninclude _article"
},
{
"path": "src/templates/mixins/_link-to-all.pug",
"chars": 165,
"preview": "mixin link-to-all(text, href)\n\n a.uk-link-muted.uk-text-uppercase.tm-link-to-all(href= href)&attributes(attributes)\n "
},
{
"path": "src/templates/mixins/_product-small.pug",
"chars": 1275,
"preview": "mixin product-small(product)\n\n div.uk-grid-small.uk-height-1-1(uk-grid)\n\n //- Image\n div.uk-width-1-3\n div.t"
},
{
"path": "src/templates/mixins/_product.pug",
"chars": 2841,
"preview": "mixin product(product)\n\n article.tm-product-card\n\n //- Media\n div.tm-product-card-media\n div.tm-ratio.tm-rat"
},
{
"path": "src/templates/mixins/_quantity.pug",
"chars": 354,
"preview": "mixin quantity(productId)\n a(onclick=\"increment(-1, 'product-\" + productId + \"')\"\n uk-icon=\"icon: minus; ratio: .75\""
},
{
"path": "src/templates/pages/404.pug",
"chars": 414,
"preview": "extends /layouts/_default\n\nblock vars\n -\n page = {\n title: '404 — Page not found'\n }\n\nblock default\n sectio"
},
{
"path": "src/templates/pages/about.pug",
"chars": 5749,
"preview": "extends /layouts/_article\n\nblock vars\n -\n page = {\n title: 'About',\n breadcrumbs: {}\n }\n\nblock article\n"
},
{
"path": "src/templates/pages/account.pug",
"chars": 1085,
"preview": "extends /layouts/_account\n\nblock vars\n -\n page = {\n title: 'Orders'\n }\n\n profileActivePage = 1\n\nblock acc"
},
{
"path": "src/templates/pages/article.pug",
"chars": 2057,
"preview": "extends /layouts/_article\n\nblock vars\n -\n article = articles[0]\n\n page = {\n title: article.title,\n brea"
},
{
"path": "src/templates/pages/blog.pug",
"chars": 278,
"preview": "extends /layouts/_informational\n\nblock vars\n -\n page = {\n title: 'Blog',\n breadcrumbs: {}\n }\n\n infor"
},
{
"path": "src/templates/pages/brands.pug",
"chars": 2366,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n page = {\n title: 'Brands',\n breadcrumbs: {}\n }\n\nblock pages\n d"
},
{
"path": "src/templates/pages/cart.pug",
"chars": 3966,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n page = {\n title: 'Cart',\n breadcrumbs: []\n }\n\nblock pages\n div"
},
{
"path": "src/templates/pages/catalog.pug",
"chars": 1626,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n page = {\n title: 'Catalog',\n breadcrumbs: {},\n quantity: 641\n"
},
{
"path": "src/templates/pages/category.pug",
"chars": 4137,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n page = {\n title: 'Laptops & Tablets',\n breadcrumbs: {\n 'Cat"
},
{
"path": "src/templates/pages/checkout.pug",
"chars": 10823,
"preview": "extends /layouts/_checkout\n\nblock vars\n -\n page = {\n title: 'Checkout'\n }\n\nblock checkout\n div.uk-grid-medi"
},
{
"path": "src/templates/pages/compare.pug",
"chars": 1277,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n page = {\n title: 'Compare',\n breadcrumbs: {}\n }\n\nblock pages\n "
},
{
"path": "src/templates/pages/contacts.pug",
"chars": 2437,
"preview": "extends /layouts/_informational\n\nblock vars\n -\n page = {\n title: 'Contacts',\n breadcrumbs: {}\n }\n\n i"
},
{
"path": "src/templates/pages/delivery.pug",
"chars": 2388,
"preview": "extends /layouts/_informational\n\nblock vars\n -\n page = {\n title: 'Delivery',\n breadcrumbs: {}\n }\n\n i"
},
{
"path": "src/templates/pages/faq.pug",
"chars": 3869,
"preview": "extends /layouts/_informational\n\nblock vars\n -\n page = {\n title: 'FAQ',\n breadcrumbs: {}\n }\n\n inform"
},
{
"path": "src/templates/pages/favorites.pug",
"chars": 302,
"preview": "extends /layouts/_account\n\nblock vars\n -\n page = {\n title: 'Favorites'\n }\n\n profileActivePage = 2\n\nblock "
},
{
"path": "src/templates/pages/index.pug",
"chars": 7038,
"preview": "extends /layouts/_default\n\nblock vars\n -\n page = {\n title: 'Home'\n }\n\nblock default\n\n //- Slider\n section."
},
{
"path": "src/templates/pages/news.pug",
"chars": 765,
"preview": "extends /layouts/_informational\n\nblock vars\n -\n page = {\n title: 'News',\n breadcrumbs: {}\n }\n\n infor"
},
{
"path": "src/templates/pages/personal.pug",
"chars": 2988,
"preview": "extends /layouts/_account\n\nblock vars\n -\n page = {\n title: 'Personal Info'\n }\n\n profileActivePage = 3\n\nbl"
},
{
"path": "src/templates/pages/product.pug",
"chars": 17030,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n product = products[0];\n\n page = {\n title: product.name,\n breadc"
},
{
"path": "src/templates/pages/settings.pug",
"chars": 2616,
"preview": "extends /layouts/_account\n\nblock vars\n -\n page = {\n title: 'Settings'\n }\n\n profileActivePage = 4\n\nblock a"
},
{
"path": "src/templates/pages/subcategory.pug",
"chars": 3683,
"preview": "extends /layouts/_pages\n\nblock vars\n -\n page = {\n title: 'Laptops',\n breadcrumbs: {\n 'Catalog': 'ca"
},
{
"path": "src/templates/partials/_article.pug",
"chars": 6762,
"preview": "p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod nisl nunc, a dictum magna laoreet eget. "
},
{
"path": "src/templates/partials/_cart-offcanvas.pug",
"chars": 2652,
"preview": "div#cart-offcanvas(uk-offcanvas=\"overlay: true; flip: true\")\n aside.uk-offcanvas-bar.uk-padding-remove\n div(class=\"u"
},
{
"path": "src/templates/partials/_footer.pug",
"chars": 2032,
"preview": "section.uk-section.uk-section-secondary.uk-section-small.uk-light\n div.uk-container\n div(class=\"uk-grid-medium \" +\n "
},
{
"path": "src/templates/partials/_head.pug",
"chars": 177,
"preview": "meta(charset=\"UTF-8\")\nmeta(http-equiv=\"x-ua-compatible\" content=\"ie=edge\")\nmeta(name=\"viewport\" content=\"width=device-wi"
},
{
"path": "src/templates/partials/_header.pug",
"chars": 61,
"preview": "include ../components/_toolbar\ninclude ../components/_navbar\n"
},
{
"path": "src/templates/partials/_nav-offcanvas.pug",
"chars": 1571,
"preview": "div#nav-offcanvas(uk-offcanvas=\"overlay: true\")\n aside.uk-offcanvas-bar.uk-padding-remove\n div.uk-card.uk-card-defau"
},
{
"path": "src/templates/partials/_products.pug",
"chars": 2749,
"preview": "div.uk-grid-medium.uk-child-width-1-1(uk-grid)\n\n //- Items\n div\n div.uk-card.uk-card-default.uk-card-small.tm-ignor"
}
]
About this extraction
This page contains the full source code of the vkovic/uikit-computer-store-template GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 73 files (188.5 KB), approximately 47.4k tokens, and a symbol index with 4 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.