@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"presets": [ |
||||
|
"@babel/preset-env" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
node_modules |
||||
|
dist |
||||
|
build |
||||
@ -0,0 +1,21 @@ |
|||||
|
MIT License |
||||
|
|
||||
|
Copyright (c) 2018 cssninjaStudio |
||||
|
|
||||
|
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. |
||||
@ -0,0 +1,50 @@ |
|||||
|
# 👋 Fresh |
||||
|
> Fresh is a free landing page starter built by [cssninjaStudio](https://cssninja.io). |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## ✌️ preview |
||||
|
|
||||
|
Check out the live demo by clicking [here](https://cssninjastudio.github.io/fresh/). |
||||
|
Fresh is built with [Bulma](https://bulma.io) and [Alpine JS](https://github.com/alpinejs/alpine). |
||||
|
|
||||
|
## 👍 Features |
||||
|
|
||||
|
* Gulp 4 and nodejs 12.13.0 (minimum) |
||||
|
* Bulma 0.9.1 |
||||
|
* ES6 support |
||||
|
* Alpine JS |
||||
|
|
||||
|
## 👌 Usage |
||||
|
|
||||
|
1. Install Dev Depedencies |
||||
|
|
||||
|
```sh |
||||
|
npm install |
||||
|
``` |
||||
|
|
||||
|
2. To start development server |
||||
|
|
||||
|
```sh |
||||
|
npm run dev |
||||
|
``` |
||||
|
|
||||
|
## 🍔 Issues |
||||
|
|
||||
|
If you've found an issue or a bug, you can report it in the issues section of this repository. Please try to follow these simple guidelines to report your issue: |
||||
|
|
||||
|
* Issue definition |
||||
|
* Expected behaviour |
||||
|
* Actual behaviour |
||||
|
* steps to reproduce |
||||
|
* Already tried fixes (if relevant) |
||||
|
|
||||
|
## 🎉 More |
||||
|
|
||||
|
You liked Fresh? Check also our other premium Envato bulma themes [Css Ninja](https://cssninja.io/themes). |
||||
|
|
||||
|
Find more premium bulma templates on [Css Ninja](https://cssninja.io/category/all). |
||||
|
|
||||
|
## 🚀 About Us |
||||
|
|
||||
|
Css Ninja is a web design studio. We build handcrafted and polished templates that will give some hype to your startup or to your next project. |
||||
@ -0,0 +1,12 @@ |
|||||
|
To run: |
||||
|
|
||||
|
`**npm run dev**` |
||||
|
|
||||
|
### get git remote url |
||||
|
|
||||
|
`git remote get-url origin` |
||||
|
|
||||
|
`git remote show origin` |
||||
|
|
||||
|
`git remote -v` |
||||
|
|
||||
@ -0,0 +1,26 @@ |
|||||
|
module.exports = { |
||||
|
config: { |
||||
|
port: 9050 |
||||
|
}, |
||||
|
paths: { |
||||
|
root: "./", |
||||
|
src: { |
||||
|
base: "./src", |
||||
|
css: "./src/css", |
||||
|
js: "./src/js", |
||||
|
img: "./src/img" |
||||
|
}, |
||||
|
dist: { |
||||
|
base: "./dist", |
||||
|
css: "./dist/css", |
||||
|
js: "./dist/js", |
||||
|
img: "./dist/img" |
||||
|
}, |
||||
|
build: { |
||||
|
base: "./build", |
||||
|
css: "./build/css", |
||||
|
js: "./build/js", |
||||
|
img: "./build/img" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
[1129/113133.419:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) |
||||
|
[1220/235610.433:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) |
||||
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 694 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 338 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 632 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 816 B |
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,798 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||
|
<title>Fresh</title> |
||||
|
|
||||
|
<link rel="icon" type="image/png" href="img/favicon.png" /> |
||||
|
<link rel="preconnect" href="https://fonts.gstatic.com"> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
||||
|
|
||||
|
<link rel="stylesheet" href="css/app.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="css/main.css"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div id="pageloader" class="pageloader"></div> |
||||
|
<div id="infraloader" class="infraloader is-active"></div> |
||||
|
<section class="hero is-fullheight is-default is-bold"> |
||||
|
|
||||
|
<nav x-data="initNavbar()" class="navbar is-fresh is-transparent no-shadow" role="navigation" |
||||
|
aria-label="main navigation"> |
||||
|
<div class="container"> |
||||
|
<div class="navbar-brand"> |
||||
|
<a class="navbar-item" href="https://cssninja.io"> |
||||
|
<img src="img/logo/fresh-alt.svg" alt="" width="112" height="28"> |
||||
|
</a> |
||||
|
|
||||
|
<a @click="openSidebar()" class="navbar-item is-hidden-desktop is-hidden-tablet"> |
||||
|
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
||||
|
'open': $store.app.isSiderbarOpen, |
||||
|
'': !$store.app.isSiderbarOpen |
||||
|
}"> |
||||
|
<svg width="1000px" height="1000px"> |
||||
|
<path class="path1" |
||||
|
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> |
||||
|
<path class="path2" d="M 300 500 L 700 500"></path> |
||||
|
<path class="path3" |
||||
|
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> |
||||
|
</svg> |
||||
|
<button id="menu-icon-trigger" class="menu-icon-trigger"></button> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<div class="navbar-burger" @click="openMobileMenu()"> |
||||
|
<span class="menu-toggle"> |
||||
|
<span class="icon-box-toggle" :class="{ |
||||
|
'active': mobileOpen, |
||||
|
'': !mobileOpen |
||||
|
}"> |
||||
|
<span class="rotate"> |
||||
|
<i class="icon-line-top"></i> |
||||
|
<i class="icon-line-center"></i> |
||||
|
<i class="icon-line-bottom"></i> |
||||
|
</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div id="navbar-menu" class="navbar-menu is-static" :class="{ |
||||
|
'is-active': mobileOpen, |
||||
|
'': !mobileOpen |
||||
|
}"> |
||||
|
|
||||
|
<div class="navbar-start"> |
||||
|
<a @click="openSidebar()" class="navbar-item is-hidden-mobile"> |
||||
|
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
||||
|
'open': $store.app.isSiderbarOpen, |
||||
|
'': !$store.app.isSiderbarOpen |
||||
|
}"> |
||||
|
<svg width="1000px" height="1000px"> |
||||
|
<path class="path1" |
||||
|
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"> |
||||
|
</path> |
||||
|
<path class="path2" d="M 300 500 L 700 500"></path> |
||||
|
<path class="path3" |
||||
|
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"> |
||||
|
</path> |
||||
|
</svg> |
||||
|
<button id="menu-icon-trigger" class="menu-icon-trigger"></button> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="navbar-end"> |
||||
|
<a href="#" class="navbar-item is-secondary"> |
||||
|
Features |
||||
|
</a> |
||||
|
<a href="#" class="navbar-item is-secondary"> |
||||
|
Pricing |
||||
|
</a> |
||||
|
<a href="#" class="navbar-item is-secondary modal-trigger" data-modal="auth-modal"> |
||||
|
Log in |
||||
|
</a> |
||||
|
<a class="navbar-item"> |
||||
|
<span class="button signup-button rounded secondary-btn raised"> |
||||
|
Sign up |
||||
|
</span> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
<nav x-data="initNavbar()" x-on:scroll.window="scroll()" id="navbar-clone" class="navbar is-fresh is-transparent" role="navigation" aria-label="main navigation" :class="{ |
||||
|
'is-active': scrolled, |
||||
|
'': !scrolled |
||||
|
}"> |
||||
|
<div class="container"> |
||||
|
<div class="navbar-brand"> |
||||
|
<a class="navbar-item" href="https://cssninja.io"> |
||||
|
<img src="img/logo/fresh-alt.svg" alt="" width="112" height="28"> |
||||
|
</a> |
||||
|
|
||||
|
<a @click="openSidebar()" class="navbar-item is-hidden-desktop is-hidden-tablet"> |
||||
|
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
||||
|
'open': $store.app.isSiderbarOpen, |
||||
|
'': !$store.app.isSiderbarOpen |
||||
|
}"> |
||||
|
<svg width="1000px" height="1000px"> |
||||
|
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> |
||||
|
<path class="path2" d="M 300 500 L 700 500"></path> |
||||
|
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> |
||||
|
</svg> |
||||
|
<button id="menu-icon-trigger" class="menu-icon-trigger"></button> |
||||
|
</div> |
||||
|
</a> |
||||
|
|
||||
|
<div class="navbar-burger" @click="openMobileMenu()"> |
||||
|
<span class="menu-toggle"> |
||||
|
<span class="icon-box-toggle" :class="{ |
||||
|
'active': mobileOpen, |
||||
|
'': !mobileOpen |
||||
|
}"> |
||||
|
<span class="rotate"> |
||||
|
<i class="icon-line-top"></i> |
||||
|
<i class="icon-line-center"></i> |
||||
|
<i class="icon-line-bottom"></i> |
||||
|
</span> |
||||
|
</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div id="cloned-navbar-menu" class="navbar-menu is-fixed" :class="{ |
||||
|
'is-active': mobileOpen, |
||||
|
'': !mobileOpen |
||||
|
}"> |
||||
|
|
||||
|
<div class="navbar-start"> |
||||
|
<a @click="openSidebar()" class="navbar-item is-hidden-mobile"> |
||||
|
<div id="cloned-menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
||||
|
'open': $store.app.isSiderbarOpen, |
||||
|
'': !$store.app.isSiderbarOpen |
||||
|
}"> |
||||
|
<svg width="1000px" height="1000px"> |
||||
|
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> |
||||
|
<path class="path2" d="M 300 500 L 700 500"></path> |
||||
|
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> |
||||
|
</svg> |
||||
|
<button id="cloned-menu-icon-trigger" class="menu-icon-trigger"></button> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="navbar-end"> |
||||
|
<a href="#" class="navbar-item is-secondary"> |
||||
|
Features |
||||
|
</a> |
||||
|
<a href="#" class="navbar-item is-secondary"> |
||||
|
Pricing |
||||
|
</a> |
||||
|
<a href="#" class="navbar-item is-secondary modal-trigger" data-modal="auth-modal"> |
||||
|
Log in |
||||
|
</a> |
||||
|
<a class="navbar-item"> |
||||
|
<span class="button signup-button rounded secondary-btn raised"> |
||||
|
Sign up |
||||
|
</span> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
<div class="hero-body"> |
||||
|
<div class="container"> |
||||
|
<div class="columns is-vcentered"> |
||||
|
<div class="column is-5 is-offset-1 landing-caption"> |
||||
|
<h1 class="title is-1 is-bold is-spaced"> |
||||
|
Manage, Deploy. |
||||
|
</h1> |
||||
|
<h2 class="subtitle is-5 is-muted">Lorem ipsum sit dolor amet is a dummy text used by typography industry </h2> |
||||
|
<div class="button-wrap"> |
||||
|
<a class="button cta is-rounded primary-btn raised"> |
||||
|
Get Started |
||||
|
</a> |
||||
|
<a class="button cta is-rounded"> |
||||
|
Discover |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-5"> |
||||
|
<figure class="image is-4by3"> |
||||
|
<img src="img/illustrations/worker.svg" alt="Description"> |
||||
|
</figure> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="hero-foot mb-20"> |
||||
|
<div class="container"> |
||||
|
<div class="tabs is-centered"> |
||||
|
<ul> |
||||
|
<li><a><img class="partner-logo" src="img/logo/clients/systek.svg"></a></li> |
||||
|
<li><a><img class="partner-logo" src="img/logo/clients/tribe.svg"></a></li> |
||||
|
<li><a><img class="partner-logo" src="img/logo/clients/kromo.svg"></a></li> |
||||
|
<li><a><img class="partner-logo" src="img/logo/clients/infinite.svg"></a></li> |
||||
|
<li><a><img class="partner-logo" src="img/logo/clients/gutwork.svg"></a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section section-feature-grey is-medium"> |
||||
|
<div class="container"> |
||||
|
<div class="title-wrapper has-text-centered"> |
||||
|
<h2 class="title is-2">Great Power Comes </h2> |
||||
|
<h3 class="subtitle is-5 is-muted">With great Responsability</h3> |
||||
|
<div class="divider is-centered"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="content-wrapper"> |
||||
|
<div class="columns"> |
||||
|
<div class="column is-one-third"> |
||||
|
<div class="feature-card is-bordered has-text-centered is-feature-reveal"> |
||||
|
<div class="card-title"> |
||||
|
<h4>App builder</h4> |
||||
|
</div> |
||||
|
<div class="card-icon"> |
||||
|
<img src="img/icons/web.svg"> |
||||
|
</div> |
||||
|
<div class="card-text"> |
||||
|
<p>This is some cool explanatory text that is on two rows</p> |
||||
|
</div> |
||||
|
<div class="card-action"> |
||||
|
<a href="#" class="button btn-align-md primary-btn raised">Free Trial</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="feature-card is-bordered has-text-centered is-feature-reveal"> |
||||
|
<div class="card-title"> |
||||
|
<h4>Cloud integration</h4> |
||||
|
</div> |
||||
|
<div class="card-icon"> |
||||
|
<img src="img/icons/rocket.svg"> |
||||
|
</div> |
||||
|
<div class="card-text"> |
||||
|
<p>This is some explanatory text that is on two rows</p> |
||||
|
</div> |
||||
|
<div class="card-action"> |
||||
|
<a href="#" class="button btn-align-md primary-btn raised">Get Started</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="feature-card is-bordered has-text-centered is-feature-reveal"> |
||||
|
<div class="card-title"> |
||||
|
<h4>Addons & Plugins</h4> |
||||
|
</div> |
||||
|
<div class="card-icon"> |
||||
|
<img src="img/icons/light-bulb.svg"> |
||||
|
</div> |
||||
|
<div class="card-text"> |
||||
|
<p>This is some explanatory text that is on two rows</p> |
||||
|
</div> |
||||
|
<div class="card-action"> |
||||
|
<a href="#" class="button btn-align-md primary-btn raised">Get Started</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section is-medium"> |
||||
|
<div class="container"> |
||||
|
<div class="title-wrapper has-text-centered"> |
||||
|
<h2 class="title is-2">Awesome Features</h2> |
||||
|
<h3 class="subtitle is-5 is-muted">To make you super happy</h3> |
||||
|
<div class="divider is-centered"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="columns is-vcentered side-feature mt-60"> |
||||
|
<div class="column is-4 is-offset-2"> |
||||
|
<h3 class="title is-3 mb-10 is-title-reveal">Connect with people</h3> |
||||
|
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p> |
||||
|
</div> |
||||
|
<div class="column is-5"> |
||||
|
<img src="img/illustrations/features/feature-1.png" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="columns is-vcentered side-feature mt-60"> |
||||
|
<div class="column is-5 is-offset-1"> |
||||
|
<img src="img/illustrations/features/feature-2.png" alt=""> |
||||
|
</div> |
||||
|
<div class="column is-4 is-offset-1"> |
||||
|
<h3 class="title is-3 mb-10 is-title-reveal">Collaborate easily</h3> |
||||
|
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section section-feature-grey is-medium"> |
||||
|
<div class="container"> |
||||
|
|
||||
|
<div class="columns is-vcentered app-side"> |
||||
|
<div class="column is-5 is-offset-1"> |
||||
|
<h3 class="title is-3 is-spaced is-title-reveal">An intuitive app</h3> |
||||
|
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p> |
||||
|
</div> |
||||
|
<div class="column is-10"> |
||||
|
<div class="has-text-centered"> |
||||
|
<img class="pushed-image" src="img/illustrations/mockups/app-mockup.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section is-medium"> |
||||
|
<div class="container"> |
||||
|
<div class="title-wrapper has-text-centered"> |
||||
|
<h2 class="title is-2">Wait, there's more</h2> |
||||
|
<h3 class="subtitle is-5 is-muted">To make you super happy</h3> |
||||
|
<div class="divider is-centered"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="content-wrapper"> |
||||
|
<div class="columns is-multiline icon-list"> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-github" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Github</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-bitbucket" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Bitbucket</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-slack" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Slack</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-npm" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Npm</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-javascript" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Javascript</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-nodejs" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Nodejs</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-angular" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Angular</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-google" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Google</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-python" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Python</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-wordpress" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>WordPress</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-android" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Android</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column is-3"> |
||||
|
<div class="feature-icon has-text-centered"> |
||||
|
<div class="icon-wrap is-icon-reveal"> |
||||
|
<ion-icon name="logo-apple" size="large"></ion-icon> |
||||
|
</div> |
||||
|
<h4>Apple</h4> |
||||
|
<p>Some feature text</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section is-medium has-background-image" data-background="https://source.unsplash.com/g30P1zcOzXo/1600x900" data-color="#4FC1EA" data-color-opacity=".6"> |
||||
|
<div class="overlay"></div> |
||||
|
<div class="container"> |
||||
|
|
||||
|
<div class="title-wrapper has-text-centered"> |
||||
|
<h2 class="title is-2 light-text is-spaced">Our clients love us</h2> |
||||
|
<h3 class="subtitle is-5 light-text">Look at what they say about us</h3> |
||||
|
</div> |
||||
|
|
||||
|
<div class="content-wrapper"> |
||||
|
<div class="columns is-vcentered"> |
||||
|
<div class="column is-4"> |
||||
|
<figure class="testimonial"> |
||||
|
<blockquote> |
||||
|
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. |
||||
|
</blockquote> |
||||
|
<div class="author"> |
||||
|
<img src="img/illustrations/faces/1.png" alt=""/> |
||||
|
<h5>Irma Walters</h5><span>Accountant</span> |
||||
|
</div> |
||||
|
</figure> |
||||
|
</div> |
||||
|
<div class="column is-4"> |
||||
|
<figure class="testimonial"> |
||||
|
<blockquote> |
||||
|
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. |
||||
|
</blockquote> |
||||
|
<div class="author"> |
||||
|
<img src="img/illustrations/faces/2.png" alt=""/> |
||||
|
<h5>John Bradley</h5><span>Financial Analyst</span> |
||||
|
</div> |
||||
|
</figure> |
||||
|
</div> |
||||
|
<div class="column is-4"> |
||||
|
<figure class="testimonial"> |
||||
|
<blockquote> |
||||
|
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. |
||||
|
</blockquote> |
||||
|
<div class="author"> |
||||
|
<img src="img/illustrations/faces/3.png" alt=""/> |
||||
|
<h5>Gary Blackman</h5><span>HR Manager</span> |
||||
|
</div> |
||||
|
</figure> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section is-medium"> |
||||
|
<div class="container"> |
||||
|
<div class="title-wrapper has-text-centered"> |
||||
|
<h2 class="title is-2">Get Started</h2> |
||||
|
<h3 class="subtitle is-5 is-muted">Choose one of our plans</h3> |
||||
|
<div class="divider is-centered"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pricing-wrap"> |
||||
|
<div class="feature-card is-pricing has-text-centered"> |
||||
|
<h3 class="plan-name">Starter</h3> |
||||
|
<img src="img/illustrations/pricing/1.svg" alt=""/> |
||||
|
<div class="price"> |
||||
|
0 |
||||
|
</div> |
||||
|
<p>Sign up, get some awesome features and get started now</p> |
||||
|
<a class="button is-fullwidth is-bold">Get Started</a> |
||||
|
</div> |
||||
|
<div class="feature-card is-pricing has-text-centered"> |
||||
|
<h3 class="plan-name">Pro</h3> |
||||
|
<img src="img/illustrations/pricing/2.svg" alt=""/> |
||||
|
<div class="price"> |
||||
|
15 |
||||
|
</div> |
||||
|
<p>Sign up, get some awesome features and get started now</p> |
||||
|
<a class="button is-fullwidth primary-btn raised is-bold">Get Started</a> |
||||
|
</div> |
||||
|
<div class="feature-card is-pricing has-text-centered"> |
||||
|
<h3 class="plan-name">Business</h3> |
||||
|
<img src="img/illustrations/pricing/3.svg" alt=""/> |
||||
|
<div class="price"> |
||||
|
30 |
||||
|
</div> |
||||
|
<p>Sign up, get some awesome features and get started now</p> |
||||
|
<a class="button is-fullwidth is-bold">Get Started</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="section section-light-grey is-medium"> |
||||
|
<div class="container"> |
||||
|
<div class="title-wrapper has-text-centered"> |
||||
|
<h2 class="title is-2 is-spaced">Drop us a line or two </h2> |
||||
|
<h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3> |
||||
|
<div class="divider is-centered"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="content-wrapper"> |
||||
|
<div class="columns"> |
||||
|
<div class="column is-6 is-offset-3"> |
||||
|
<form> |
||||
|
<div class="columns is-multiline"> |
||||
|
<div class="column is-6"> |
||||
|
<input class="input is-medium" type="text" placeholder="First Name *"> |
||||
|
</div> |
||||
|
<div class="column is-6"> |
||||
|
<input class="input is-medium" type="text" placeholder="Last Name *"> |
||||
|
</div> |
||||
|
<div class="column is-6"> |
||||
|
<input class="input is-medium" type="text" placeholder="Email *"> |
||||
|
</div> |
||||
|
<div class="column is-6"> |
||||
|
<input class="input is-medium" type="email" placeholder="Company"> |
||||
|
</div> |
||||
|
<div class="column is-12"> |
||||
|
<textarea class="textarea" rows="6" placeholder=""></textarea> |
||||
|
</div> |
||||
|
<div class="column is-12"> |
||||
|
<div class="form-footer has-text-right mt-10"> |
||||
|
<button class="button cta is-large primary-btn form-button raised is-clear">Send Message</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<div id="auth-modal" class="modal"> |
||||
|
<div class="modal-background"></div> |
||||
|
<div class="modal-content"> |
||||
|
<div class="flex-card auth-card"> |
||||
|
<div class="tabs-wrapper"> |
||||
|
<div class="tabs"> |
||||
|
<ul> |
||||
|
<li class="is-active" data-tab="login-tab"><a>Login</a></li> |
||||
|
<li data-tab="register-tab"><a>Register</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div id="login-tab" class="tab-content is-active"> |
||||
|
<div class="field"> |
||||
|
<label>Username</label> |
||||
|
<div class="control"> |
||||
|
<input type="text" class="input is-medium" placeholder="Enter username"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field"> |
||||
|
<label>Password</label> |
||||
|
<div class="control"> |
||||
|
<input type="password" class="input is-medium" placeholder="Enter password"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<a class="button is-fullwidth secondary-btn is-rounded raised">Log in</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button class="modal-close is-large" aria-label="close"></button> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<footer class="footer footer-dark"> |
||||
|
<div class="container"> |
||||
|
<div class="columns"> |
||||
|
<div class="column"> |
||||
|
<div class="footer-logo"> |
||||
|
<img src="img/logo/fresh-white-alt.svg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="footer-column"> |
||||
|
<div class="footer-header"> |
||||
|
<h3>Product</h3> |
||||
|
</div> |
||||
|
<ul class="link-list"> |
||||
|
<li><a href="#">Discover features</a></li> |
||||
|
<li><a href="#">Why choose our Product ?</a></li> |
||||
|
<li><a href="#">Compare features</a></li> |
||||
|
<li><a href="#">Our Roadmap</a></li> |
||||
|
<li><a href="#">Request features</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="footer-column"> |
||||
|
<div class="footer-header"> |
||||
|
<h3>Docs</h3> |
||||
|
</div> |
||||
|
<ul class="link-list"> |
||||
|
<li><a href="#">Get Started</a></li> |
||||
|
<li><a href="#">User guides</a></li> |
||||
|
<li><a href="#">Admin guide</a></li> |
||||
|
<li><a href="#">Developers</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="footer-column"> |
||||
|
<div class="footer-header"> |
||||
|
<h3>Blogroll</h3> |
||||
|
</div> |
||||
|
<ul class="link-list"> |
||||
|
<li><a href="#">Latest News</a></li> |
||||
|
<li><a href="#">Tech articles</a></li> |
||||
|
<li><a href="#">Video Blog</a></li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="footer-column"> |
||||
|
<div class="footer-header"> |
||||
|
<h3>Follow Us</h3> |
||||
|
<nav class="level is-mobile"> |
||||
|
<div class="level-left"> |
||||
|
<a class="level-item" href="https://github.com/#"> |
||||
|
<span class="icon"> |
||||
|
<ion-icon name="logo-github" size="large"></ion-icon> |
||||
|
</span> |
||||
|
</a> |
||||
|
<a class="level-item" href="https://facebook.com/#"> |
||||
|
<span class="icon"> |
||||
|
<ion-icon name="logo-facebook" size="large"></ion-icon> |
||||
|
</span> |
||||
|
</a> |
||||
|
<a class="level-item" href="https://google.com/#"> |
||||
|
<span class="icon"> |
||||
|
<ion-icon name="logo-google" size="large"></ion-icon> |
||||
|
</span> |
||||
|
</a> |
||||
|
<a class="level-item" href="https://linkedin.com/#"> |
||||
|
<span class="icon"> |
||||
|
<ion-icon name="logo-linkedin" size="large"></ion-icon> |
||||
|
</span> |
||||
|
</a> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<a href="https://bulma.io" target="_blank"> |
||||
|
<img src="img/logo/made-with-bulma.png" alt="Made with Bulma" width="128" height="24"> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</footer> |
||||
|
<!-- Back To Top Button --> |
||||
|
<div x-data="initBackToTop()" x-on:scroll.window="scroll($event)" @click="goTop($event)" id="backtotop"><a href="javascript:" :class="{ |
||||
|
'visible': scrolled, |
||||
|
'': !scrolled |
||||
|
}"></a></div> <div x-data="initSidebar()" class="sidebar" :class="{ |
||||
|
'is-active': $store.app.isSiderbarOpen, |
||||
|
'': !$store.app.isSiderbarOpen |
||||
|
}"> |
||||
|
<div class="sidebar-header"> |
||||
|
<img src="img/logo/fresh-square.svg"> |
||||
|
<a @click="closeSidebar()" class="sidebar-close" href="javascript:void(0);"><i data-feather="x"></i></a> |
||||
|
</div> |
||||
|
<div class="inner"> |
||||
|
<ul class="sidebar-menu"> |
||||
|
<li><span class="nav-section-title"></span></li> |
||||
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-1" class="have-children" :class="{ |
||||
|
'active': openedMenu === 'sidebar-menu-1', |
||||
|
'': openedMenu != 'sidebar-menu-1' |
||||
|
}"> |
||||
|
<a href="#"> |
||||
|
<span class="material-icons">apps</span> |
||||
|
<span>Apps</span> |
||||
|
</a> |
||||
|
<ul x-show.transition="openedMenu === 'sidebar-menu-1'"> |
||||
|
<li><a href="#">Dashboard</a></li> |
||||
|
<li><a href="#">Account</a></li> |
||||
|
<li><a href="#">Documents</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-2" class="have-children" :class="{ |
||||
|
'active': openedMenu === 'sidebar-menu-2', |
||||
|
'': openedMenu != 'sidebar-menu-2' |
||||
|
}"> |
||||
|
<a href="#"> |
||||
|
<span class="material-icons">duo</span> |
||||
|
<span>Messages</span> |
||||
|
</a> |
||||
|
<ul x-show.transition="openedMenu === 'sidebar-menu-2'"> |
||||
|
<li><a href="#">Inbox</a></li> |
||||
|
<li><a href="#">Compose</a></li> |
||||
|
<li><a href="#">Video</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-3" class="have-children" :class="{ |
||||
|
'active': openedMenu === 'sidebar-menu-3', |
||||
|
'': openedMenu != 'sidebar-menu-3' |
||||
|
}"> |
||||
|
<a href="#"> |
||||
|
<span class="material-icons">insert_photo</span> |
||||
|
<span>Media</span> |
||||
|
</a> |
||||
|
<ul x-show.transition="openedMenu === 'sidebar-menu-3'"> |
||||
|
<li><a href="#">Library</a></li> |
||||
|
<li><a href="#">Upload</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-4" class="have-children" :class="{ |
||||
|
'active': openedMenu === 'sidebar-menu-4', |
||||
|
'': openedMenu != 'sidebar-menu-4' |
||||
|
}"> |
||||
|
<a href="#"> |
||||
|
<span class="material-icons">policy</span> |
||||
|
<span>Settings</span> |
||||
|
</a> |
||||
|
<ul x-show.transition="openedMenu === 'sidebar-menu-4'"> |
||||
|
<li><a href="#">User settings</a></li> |
||||
|
<li><a href="#">App settings</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script> |
||||
|
<script src="js/bundle.js"></script> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,186 @@ |
|||||
|
const { src, dest, task, watch, series, parallel } = require('gulp'); |
||||
|
const del = require('del'); |
||||
|
const options = require("./config"); |
||||
|
const browserSync = require('browser-sync').create(); |
||||
|
|
||||
|
const sass = require('gulp-sass'); |
||||
|
const bourbon = require('node-bourbon').includePaths; |
||||
|
const postcss = require('gulp-postcss'); |
||||
|
const concat = require('gulp-concat'); |
||||
|
const uglify = require('gulp-uglify'); |
||||
|
const imagemin = require('gulp-imagemin'); |
||||
|
const cleanCSS = require('gulp-clean-css'); |
||||
|
const purgecss = require('gulp-purgecss'); |
||||
|
const sourcemaps = require('gulp-sourcemaps'); |
||||
|
const autoprefixer = require('gulp-autoprefixer'); |
||||
|
const panini = require('panini'); |
||||
|
|
||||
|
const browserify = require("browserify"); |
||||
|
const babelify = require("babelify"); |
||||
|
const source = require("vinyl-source-stream"); |
||||
|
const nodepath = 'node_modules/'; |
||||
|
|
||||
|
sass.compiler = require('sass'); |
||||
|
|
||||
|
//Note : Webp still not supported in major browsers including forefox
|
||||
|
//const webp = require('gulp-webp'); //For converting images to WebP format
|
||||
|
//const replace = require('gulp-replace'); //For Replacing img formats to webp in html
|
||||
|
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P
|
||||
|
|
||||
|
//Load Previews on Browser on dev
|
||||
|
function livePreview(done) { |
||||
|
browserSync.init({ |
||||
|
server: { |
||||
|
baseDir: options.paths.dist.base |
||||
|
}, |
||||
|
port: options.config.port || 5000 |
||||
|
}); |
||||
|
done(); |
||||
|
} |
||||
|
|
||||
|
//Copy latest installed Bulma
|
||||
|
function setupBulma() { |
||||
|
console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n"); |
||||
|
return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass']) |
||||
|
.pipe(dest('src/sass/')); |
||||
|
} |
||||
|
|
||||
|
//Compile Sass code
|
||||
|
function compileSASS() { |
||||
|
console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n"); |
||||
|
return src(['src/sass/bulma.sass']) |
||||
|
.pipe(sass({ |
||||
|
outputStyle: 'compressed', |
||||
|
sourceComments: 'map', |
||||
|
sourceMap: 'sass', |
||||
|
includePaths: bourbon |
||||
|
}).on('error', sass.logError)) |
||||
|
.pipe(autoprefixer('last 2 versions')) |
||||
|
.pipe(dest('dist/assets/css')) |
||||
|
.pipe(browserSync.stream()); |
||||
|
} |
||||
|
|
||||
|
//Compile Scss code
|
||||
|
function compileSCSS() { |
||||
|
console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n"); |
||||
|
return src(['src/scss/main.scss']) |
||||
|
.pipe(sass({ |
||||
|
outputStyle: 'compressed', |
||||
|
sourceComments: 'map', |
||||
|
sourceMap: 'scss', |
||||
|
includePaths: bourbon |
||||
|
}).on('error', sass.logError)) |
||||
|
.pipe(autoprefixer('last 2 versions')) |
||||
|
.pipe(dest('dist/css')) |
||||
|
.pipe(browserSync.stream()); |
||||
|
} |
||||
|
|
||||
|
//Compile HTML partials with Panini
|
||||
|
function compileHTML() { |
||||
|
console.log("\n\t" + logSymbols.info, "Compiling HTML..\n"); |
||||
|
panini.refresh(); |
||||
|
return src('src/pages/**/*.html') |
||||
|
.pipe(panini({ |
||||
|
root: 'src/pages/', |
||||
|
layouts: 'src/layouts/', |
||||
|
partials: 'src/partials/', |
||||
|
helpers: 'src/helpers/', |
||||
|
data: 'src/data/' |
||||
|
})) |
||||
|
.pipe(dest('dist')) |
||||
|
.pipe(browserSync.stream()); |
||||
|
} |
||||
|
|
||||
|
//Concat CSS Plugins
|
||||
|
function concatCssPlugins() { |
||||
|
console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n"); |
||||
|
return src([ |
||||
|
nodepath + 'simplebar/dist/simplebar.min.css', |
||||
|
nodepath + 'plyr/dist/plyr.css', |
||||
|
nodepath + 'codemirror/lib/codemirror.css', |
||||
|
nodepath + 'codemirror/theme/shadowfox.css', |
||||
|
'src/assets/vendor/css/*', |
||||
|
]) |
||||
|
.pipe(sourcemaps.init()) |
||||
|
.pipe(concat('app.css')) |
||||
|
.pipe(sourcemaps.write('./')) |
||||
|
.pipe(dest('dist/css')) |
||||
|
.pipe(browserSync.stream()); |
||||
|
} |
||||
|
|
||||
|
//Reset Panini Cache
|
||||
|
function resetPages(done) { |
||||
|
console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n"); |
||||
|
panini.refresh(); |
||||
|
done(); |
||||
|
} |
||||
|
|
||||
|
//Triggers Browser reload
|
||||
|
function previewReload(done) { |
||||
|
console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n"); |
||||
|
browserSync.reload(); |
||||
|
done(); |
||||
|
} |
||||
|
|
||||
|
//Development Tasks
|
||||
|
function devHTML() { |
||||
|
return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base)); |
||||
|
} |
||||
|
|
||||
|
//Optimize images
|
||||
|
function devImages() { |
||||
|
return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img)); |
||||
|
} |
||||
|
|
||||
|
// Let's write our task in a function to keep things clean
|
||||
|
function javascriptBuild() { |
||||
|
// Start by calling browserify with our entry pointing to our main javascript file
|
||||
|
return ( |
||||
|
browserify({ |
||||
|
entries: [`${options.paths.src.js}/main.js`], |
||||
|
// Pass babelify as a transform and set its preset to @babel/preset-env
|
||||
|
transform: [babelify.configure({ presets: ["@babel/preset-env"] })] |
||||
|
}) |
||||
|
// Bundle it all up!
|
||||
|
.bundle() |
||||
|
// Source the bundle
|
||||
|
.pipe(source("bundle.js")) |
||||
|
// Then write the resulting files to a folder
|
||||
|
.pipe(dest(`dist/js`)) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
//Copy data files
|
||||
|
function copyData() { |
||||
|
console.log("\n\t" + logSymbols.info, "Copying data files..\n"); |
||||
|
return src([ |
||||
|
'src/data/**/*', |
||||
|
]) |
||||
|
.pipe(dest('dist/data')) |
||||
|
.pipe(browserSync.stream()); |
||||
|
} |
||||
|
|
||||
|
function watchFiles() { |
||||
|
//watch('src/**/*.html', compileHTML);
|
||||
|
watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload)); |
||||
|
watch(['src/scss/**/*', 'src/scss/*'], compileSCSS); |
||||
|
watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload)); |
||||
|
watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload)); |
||||
|
console.log("\n\t" + logSymbols.info, "Watching for Changes..\n"); |
||||
|
} |
||||
|
|
||||
|
function devClean() { |
||||
|
console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n"); |
||||
|
return del([options.paths.dist.base]); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
exports.setup = series(setupBulma); |
||||
|
|
||||
|
exports.default = series( |
||||
|
devClean, // Clean Dist Folder
|
||||
|
resetPages, |
||||
|
parallel(concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML), |
||||
|
livePreview, // Live Preview Build
|
||||
|
watchFiles // Watch for Live Changes
|
||||
|
); |
||||
@ -0,0 +1,76 @@ |
|||||
|
{ |
||||
|
"name": "fresh", |
||||
|
"version": "4.0.1", |
||||
|
"description": "Fresh - Bulma + Alpine JS landing page", |
||||
|
"main": "gulpfile.js", |
||||
|
"dependencies": { |
||||
|
"@ryangjchandler/spruce": "^2.4.0", |
||||
|
"alpinejs": "^2.8.0", |
||||
|
"bulma": "^0.9.1", |
||||
|
"js-datepicker": "^5.16.0", |
||||
|
"notyf": "^3.9.0", |
||||
|
"codemirror": "^5.58.3", |
||||
|
"feather-icons": "^4.24.0", |
||||
|
"ionicons": "^5.2.3", |
||||
|
"plyr": "^3.5.6", |
||||
|
"postcss": "^8.1.6", |
||||
|
"simplebar": "^5.2.1" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/cli": "^7.12.1", |
||||
|
"@babel/core": "^7.12.3", |
||||
|
"@babel/polyfill": "^7.12.1", |
||||
|
"@babel/preset-env": "^7.12.1", |
||||
|
"@babel/register": "^7.12.1", |
||||
|
"autoprefixer": "^10.0.1", |
||||
|
"babelify": "^10.0.0", |
||||
|
"browser-sync": "^2.26.13", |
||||
|
"browserify": "^17.0.0", |
||||
|
"del": "^6.0.0", |
||||
|
"gulp": "^4.0.2", |
||||
|
"gulp-autoprefixer": "^7.0.1", |
||||
|
"gulp-clean-css": "^4.3.0", |
||||
|
"gulp-concat": "^2.6.1", |
||||
|
"gulp-imagemin": "^7.1.0", |
||||
|
"gulp-postcss": "^9.0.0", |
||||
|
"gulp-purgecss": "^3.0.0", |
||||
|
"gulp-replace": "^1.0.0", |
||||
|
"gulp-sass": "^4.1.0", |
||||
|
"gulp-sourcemaps": "^2.6.1", |
||||
|
"gulp-uglify": "^3.0.2", |
||||
|
"gulp-webp": "^4.0.1", |
||||
|
"ini": "1.3.6", |
||||
|
"log-symbols": "^4.0.0", |
||||
|
"node-bourbon": "^4.2.8", |
||||
|
"npm-force-resolutions": "0.0.3", |
||||
|
"panini": "^1.7.1", |
||||
|
"sass": "^1.30.0", |
||||
|
"vinyl-source-stream": "^2.0.0" |
||||
|
}, |
||||
|
"resolutions": { |
||||
|
"ini": "1.3.6" |
||||
|
}, |
||||
|
"scripts": { |
||||
|
"dev": "gulp", |
||||
|
"build": "gulp prod", |
||||
|
"prod": "gulp prod", |
||||
|
"preinstall": "npx npm-force-resolutions" |
||||
|
}, |
||||
|
"repository": { |
||||
|
"type": "git", |
||||
|
"url": "git+https://github.com/" |
||||
|
}, |
||||
|
"keywords": [ |
||||
|
"gulp", |
||||
|
"gulp4", |
||||
|
"bulma", |
||||
|
"bulmacss", |
||||
|
"sass" |
||||
|
], |
||||
|
"author": "Css Ninja", |
||||
|
"license": "Commercial", |
||||
|
"bugs": { |
||||
|
"url": "https://github.com/" |
||||
|
}, |
||||
|
"homepage": "https://github.com/" |
||||
|
} |
||||
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 694 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |