3 |
14 |
15 | {{ APP_NAME_FORMATTED }}
4 | 5 |Modern Frontend Tooling
6 | 7 |{{ APP_DESCRIPTION }}
8 | 9 |
10 | Get Started
11 | View on GitHub
12 |
13 |
16 | 
17 |
18 |
17 |
17 | 
22 |
6 | {{ APP_NAME_FORMATTED }}
7 | v{{ APP_VERSION }}
8 |
9 |
10 |
15 |
16 | 
2 |
3 | # frontend-starter
4 |
5 | FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Gulp
6 |
7 | ## Homepage
8 | [https://zakandaiev.github.io/frontend-starter](https://zakandaiev.github.io/frontend-starter)
9 |
10 | ## Features
11 | * Modern environment for development
12 | * Twig template engine
13 | * Well thought-out and convenient project structure
14 | * HTML5 and CSS3 ready
15 | * SEO friendly
16 | * SASS/SCSS preprocessor
17 | * Autoprefixer
18 | * Live-server with hot-reload
19 | * HTML, CSS, JS, images auto minifier
20 | * Ready-to-use Javascript utils, HTML styled components, CSS helpers, SASS utils etc.
21 | * reseter.css
22 | * .htaccess, robots.txt, sitemap.xml, favicon
23 | * 404 page
24 | * And many more...
25 |
26 | ## How to use
27 |
28 | ### Install
29 |
30 | ``` bash
31 | # Clone the repository
32 | git clone https://github.com/zakandaiev/frontend-starter.git
33 |
34 | # Go to the folder
35 | cd frontend-starter
36 |
37 | # Install
38 | npm i
39 | # or
40 | npm install
41 |
42 | # Remove link to the original repository
43 | # - if you use Windows system
44 | Remove-Item .git -Recurse -Force
45 | # - or if you use Unix system
46 | rm -rf .git
47 | ```
48 |
49 | ### Develop
50 |
51 | ``` bash
52 | # Start development mode with live-server
53 | npm run dev
54 | # or with options
55 | npm run dev --port 3000
56 | ```
57 |
58 | ### Build
59 |
60 | ``` bash
61 | # Build static files for production
62 | npm run build
63 | # or
64 | npm run prod
65 | # or with options
66 | npm run build --base=/subdomain --dist=./dest
67 |
68 | # Start server for build preview
69 | npm run preview
70 | # or with options
71 | npm run preview --port 3001
72 | ```
73 |
74 | ### Lint
75 |
76 | ``` bash
77 | # ESLint
78 | npm run lint:js
79 | # or
80 | npm run lint:js:fix
81 |
82 | # StyleLint
83 | npm run lint:css
84 | # or
85 | npm run lint:css:fix
86 | ```
87 |
88 | ### Backend emulation
89 |
90 | ``` bash
91 | # Fastify listen backend.js
92 | npm run backend
93 | ```
94 |
--------------------------------------------------------------------------------
/src/js/component/section-navigation.js:
--------------------------------------------------------------------------------
1 | import { getSlug } from '@/js/util/cyr-to-lat';
2 | import { randomString } from '@/js/util/random';
3 |
4 | document.addEventListener('DOMContentLoaded', () => {
5 | const navigation = document.querySelector('.section__navigation');
6 | const navigationTitles = document.querySelectorAll('.section__title');
7 |
8 | if (!navigation || !navigationTitles.length) {
9 | return false;
10 | }
11 |
12 | navigationTitles.forEach((title) => {
13 | const link = document.createElement('a');
14 | const linkId = `${getSlug(title.textContent)}-${randomString()}`;
15 |
16 | title.id = linkId;
17 |
18 | link.href = `#${linkId}`;
19 | link.innerHTML = `${title.textContent}`;
20 | link.classList.add('section__navigation-item');
21 |
22 | navigation.appendChild(link);
23 | });
24 |
25 | setSticky(navigation);
26 | sclollSpy();
27 | });
28 |
29 | function setSticky(navigation) {
30 | const parentNode = navigation.closest('.position-sticky');
31 |
32 | if (!parentNode) {
33 | return false;
34 | }
35 |
36 | const headerHeight = document.getElementById('header')?.offsetHeight || 0;
37 |
38 | if (window.innerWidth >= 768) {
39 | parentNode.style.top = `calc(2em + ${headerHeight}px)`;
40 | } else {
41 | parentNode.style.top = `${headerHeight}px`;
42 | }
43 | }
44 |
45 | function sclollSpy() {
46 | const sections = document.querySelectorAll('.section');
47 |
48 | const observer = new IntersectionObserver(
49 | (entries) => {
50 | entries.forEach((entry) => {
51 | if (entry.isIntersecting) {
52 | const activeSectionTitle = entry.target.querySelector('.section__title');
53 |
54 | if (!activeSectionTitle) {
55 | return false;
56 | }
57 |
58 | document.querySelectorAll('.section__navigation-item').forEach((item) => {
59 | if (item.hash === `#${activeSectionTitle.id}`) {
60 | item.classList.add('active');
61 | } else {
62 | item.classList.remove('active');
63 | }
64 | });
65 | }
66 | });
67 | },
68 | {
69 | root: document,
70 | rootMargin: '-10% 0px -90% 0px',
71 | },
72 | );
73 |
74 | sections.forEach((section) => {
75 | observer.observe(section);
76 | });
77 | }
78 |
--------------------------------------------------------------------------------
/src/sass/config/root-variable.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --font-family-heading: "Inter", sans-serif;
3 | --font-family-text: "Inter", sans-serif;
4 |
5 | --gap: 1.6rem;
6 |
7 | // COLOR
8 | @each $key, $val in $color-list {
9 | --color-#{$key}: #{$val};
10 | }
11 |
12 | // FONT
13 | @each $key, $val in $font-weight-list {
14 | #{'--font-' + $key}: #{$val};
15 | }
16 |
17 | // RADIUS
18 | @each $key, $val in $radius-list {
19 | --radius-#{$key}: #{$val};
20 | }
21 |
22 | // Z-INDEX
23 | @each $key, $val in $z-index-list {
24 | --zi-#{$key}: #{$val};
25 | }
26 |
27 | // BORDER - COLOR
28 | @each $name, $color in $border-color-list {
29 | --color-border-#{$name}: #{$color};
30 | }
31 |
32 | // BORDER - COLOR INVERSE
33 | @each $name, $color in $border-color-inverse-list {
34 | --color-border-inverse-#{$name}: #{$color};
35 | }
36 |
37 | // BORDER - WIDTH
38 | @each $size, $value in $border-width-list {
39 | --border-width-#{$size}: #{$value};
40 | }
41 |
42 | // BORDER - KIT
43 | @each $size, $width in $border-width-list {
44 | @each $name, $color in $border-color-list {
45 | --border-#{$size}-#{$name}: var(--border-width-#{$size}) solid var(--color-border-#{$name});
46 | }
47 | }
48 |
49 | // SHADOW - COLOR
50 | @each $name, $color in $shadow-color-list {
51 | --color-shadow-#{$name}: #{$color};
52 | }
53 |
54 | // SHADOW - COLOR INVERSE
55 | @each $name, $color in $shadow-color-inverse-list {
56 | --color-shadow-inverse-#{$name}: #{$color};
57 | }
58 |
59 | // SHADOW - WIDTH
60 | @each $size, $value in $shadow-width-list {
61 | --shadow-width-#{$size}: #{$value};
62 | }
63 |
64 | // SHADOW - KIT
65 | @each $size, $width in $shadow-width-list {
66 | @each $name, $color in $shadow-color-list {
67 | --shadow-#{$size}-#{$name}: var(--shadow-width-#{$size}) var(--color-shadow-#{$name});
68 | }
69 | }
70 |
71 | // TRANSITION
72 | --transition-time: 0.3s;
73 | --transition-timing: cubic-bezier(0.25, 0.8, 0.5, 1);
74 | --transition: all var(--transition-time) var(--transition-timing);
75 |
76 | color-scheme: light;
77 | }
78 |
79 | :root[data-theme="dark"] {
80 | // COLOR
81 | @each $key, $val in $color-inverse-list {
82 | --color-#{$key}: #{$val};
83 | }
84 |
85 | // BORDER - COLOR
86 | @each $name, $color in $border-color-inverse-list {
87 | --color-border-#{$name}: #{$color};
88 | }
89 |
90 | // SHADOW - COLOR
91 | // @each $name, $color in $shadow-color-inverse-list {
92 | // --color-shadow-#{$name}: #{$color};
93 | // }
94 |
95 | color-scheme: dark;
96 | }
97 |
--------------------------------------------------------------------------------
/src/sass/component/section.scss:
--------------------------------------------------------------------------------
1 | .section {
2 | display: block;
3 |
4 | // .section__title
5 | &__title {
6 | display: flex;
7 | gap: 1.2rem;
8 | align-items: flex-start;
9 | justify-content: space-between;
10 |
11 | font-size: 2.4rem;
12 | font-weight: var(--font-medium);
13 | color: var(--color-heading);
14 |
15 | & + .section__body {
16 | margin: 3.2rem 0 0;
17 | }
18 | }
19 |
20 | // .section__body
21 | &__body {
22 | display: block;
23 | width: 100%;
24 |
25 | & > *:not(:first-child) {
26 | margin: 1.6rem 0 0;
27 | }
28 |
29 | a {
30 | text-decoration: underline;
31 |
32 | &:hover {
33 | text-decoration: none;
34 | }
35 | }
36 | }
37 |
38 | // .section__navigation
39 | &__navigation {
40 | display: flex;
41 | flex-direction: column;
42 |
43 | // .section__navigation-item
44 | &-item {
45 | position: relative;
46 |
47 | display: block;
48 |
49 | padding: 0.6rem 0 0.6rem 1.6rem;
50 | border-left: var(--border-md-medium);
51 |
52 | font-size: 1.4rem;
53 | font-weight: var(--font-regular);
54 | color: var(--color-text);
55 |
56 | transition: var(--transition);
57 |
58 | &:hover, &:focus, &:active {
59 | color: var(--color-heading);
60 | }
61 |
62 | & > * {
63 | @include ellipsis;
64 | }
65 |
66 | &.active {
67 | color: var(--color-heading);
68 |
69 | &::before {
70 | content: "";
71 |
72 | position: absolute;
73 | top: 50%;
74 | left: 0;
75 | transform: translate(-50%, -50%);
76 |
77 | width: calc(var(--border-width-md) * 2);
78 | height: 2.4rem;
79 |
80 | background: var(--color-primary);
81 | }
82 | }
83 | }
84 | }
85 |
86 | // .section_offset
87 | &_offset {
88 | padding: 2.4rem 0;
89 | }
90 |
91 | // .section_offset-top
92 | &_offset-top {
93 | padding-top: 2.4rem;
94 | }
95 |
96 | // .section_offset-bottom
97 | &_offset-bottom {
98 | padding-bottom: 2.4rem;
99 | }
100 |
101 | // .section_grow
102 | &_grow {
103 | flex-grow: 1;
104 | }
105 | }
106 |
107 | @include query(md) {
108 | .section {
109 | // .section_offset
110 | &_offset {
111 | padding: 3.2rem 0;
112 | }
113 |
114 | // .section_offset-top
115 | &_offset-top {
116 | padding-top: 3.2rem;
117 | }
118 |
119 | // .section_offset-bottom
120 | &_offset-bottom {
121 | padding-bottom: 3.2rem;
122 | }
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/layout/main.twig:
--------------------------------------------------------------------------------
1 | {% set title = title is not defined or title is null ? APP_NAME_FORMATTED : title ~ ' - ' ~ APP_NAME_FORMATTED %}
2 | {% set locale = meta.locale|default('en-US') %}
3 | {% set description = meta.description|default(APP_DESCRIPTION) %}
4 | {% set keywords = meta.keywords|default(APP_KEYWORDS) %}
5 | {% set image = meta.image %}
6 |
7 |
8 |
9 |
10 |
11 | {% block head %}
12 | 
{{ APP_DESCRIPTION }}.
21 | 22 |This starter is delivering with ready-to-use utils, styled components, helpers and much more. Its overview is available in 23 | components 24 | section. 25 |
26 |36 | # Clone the repository 37 | git clone {{ APP_REPOSITORY }}.git 38 | 39 | # Go to the folder 40 | cd {{ APP_NAME }} 41 | 42 | # Install packages 43 | npm i 44 | # or 45 | npm install 46 | 47 | # Remove link to the original repository 48 | # - if you use Windows system 49 | Remove-Item .git -Recurse -Force 50 | # - or if you use Unix system 51 | rm -rf .git 52 |53 |
58 | # Start development mode with live-server 59 | npm run dev 60 | # or with options 61 | npm run dev --port=3000 62 |63 |
68 | # Build static files for production 69 | npm run build 70 | # or 71 | npm run prod 72 | # or with options 73 | npm run build --base=/subdomain --dist=/dest 74 | 75 | # Start server for build preview 76 | npm run preview 77 | # or with options 78 | npm run preview --port=3001 79 |80 |
85 | # ESLint 86 | npm run lint:js 87 | # or 88 | npm run lint:js:fix 89 | 90 | # StyleLint 91 | npm run lint:css 92 | # or 93 | npm run lint:css:fix 94 |95 |
100 | # Fastify listen backend.js 101 | npm run backend 102 |103 |
FrontEnd Starter is a boilerplate kit for easy building modern static web-sites using Gulp.
This starter is delivering with ready-to-use utils, styled components, helpers and much more. Its overview is available in components section.
2 | # Clone the repository 3 | git clone https://github.com/zakandaiev/frontend-starter.git 4 | 5 | # Go to the folder 6 | cd frontend-starter 7 | 8 | # Install packages 9 | npm i 10 | # or 11 | npm install 12 | 13 | # Remove link to the original repository 14 | # - if you use Windows system 15 | Remove-Item .git -Recurse -Force 16 | # - or if you use Unix system 17 | rm -rf .git 18 |
19 | # Start development mode with live-server 20 | npm run dev 21 | # or with options 22 | npm run dev --port=3000 23 |
24 | # Build static files for production 25 | npm run build 26 | # or 27 | npm run prod 28 | # or with options 29 | npm run build --base=/subdomain --dist=/dest 30 | 31 | # Start server for build preview 32 | npm run preview 33 | # or with options 34 | npm run preview --port=3001 35 |
36 | # ESLint 37 | npm run lint:js 38 | # or 39 | npm run lint:js:fix 40 | 41 | # StyleLint 42 | npm run lint:css 43 | # or 44 | npm run lint:css:fix 45 |
46 | # Fastify listen backend.js 47 | npm run backend 48 |
This starter is delivering with ready-to-use utils, styled components, helpers and much more. Some majors of these are described in this section.
There are a bunch of different css helper classes such as .d-flex, .mt-4, .bg-primary, .color-error etc.
Full list you can view in @/src/sass/component/helper.scss file.
| Lorem ipsum | Dolor sit |
|---|---|
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
|---|---|
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
|---|---|
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
| Lorem ipsum | Dolor sit |
Controls with data-toast, data-toast-type and data-toast-duration attributes.
If the data-toast is empty then toast text will be equal event.target.textContent .
Example with custom text, primary type and 10s duration.
Controls with data-copy attribute.
If the data-copy is empty then text to copy will be equal event.target.textContent .
Also you can combine data attributes and set data-toast to notify user.