Get familiar with the basic setup and overview of Dannel.
A well crafted, creative, minimal and modern designed Digital & Studio Agency Template. This Template is ideal for Digital Agencies, Studios, Freelancers, Startup Companies and Large Corporations.
It has unique layout and features. It’s design is up to modern design trends.
Current version: 1.2.0
Unzip the template package to any folder and open a command line at that location.
Dannel's dev tools require Node. run npm install
and the required packages for the Dannel dev tools will be downloaded to the node_modules directory.
npm install --unsafe-perm
NB: If you are a Mac user add sudo before every command.
NB: If the npm installation failed due to permissions use --unsafe-perm command to install as admin.
When you want to customize or view template use the command line below so while dev mode is running all files in the pages, scss and js folders are monitored for changes, which will inject updated CSS or cause a refresh in ViteJs.
npm run dev
After you've finished customizing your template, it's time to build your production version, which you will find in a folder called /dist/
npm run build
Optional: If you want to know the external output of the scss files use the command line below for debugging:
npm run css:debug
Pages are named according to their purpose, and you can open any of the files in your browser to see it in action, or modify the markup to suit your needs.
For more info about each folder instructions mouseover on each path:
dist/
docs/
src/
pages/
assets/
scss/
core/
theme/
common/
template/
js/
css/
fonts/
images/
The HTML markup of Dannel.
<!DOCTYPE html> <html lang="en" class="studio-agency uk-background-white dark:uk-background-gray-100 dark:uk-text-gray-40"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dannel.</title> <meta name="description" content="page description here"> <link rel="preload" href="../assets/fonts/space-grotesk/SpaceGrotesk-Regular.woff" as="font" type="font/woff" crossorigin> <link rel="preload" href="../assets/fonts/space-grotesk/SpaceGrotesk-Bold.woff" as="font" type="font/woff" crossorigin> <link rel="preload" href="../assets/fonts/space-grotesk/SpaceGrotesk-Medium.woff" as="font" type="font/woff" crossorigin> <link rel="preload" href="../assets/fonts/brand-icons/brand-icons.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="https://cdn.jsdelivr.net/npm/swiper@6.5.0/swiper-bundle.min.css" as="style"> <link rel="preload" href="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/css/uikit.min.css" as="style"> <link rel="preload" href="../assets/css/theme/main.css" as="style"> <script src="../assets/js/app-head.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@6.5.0/swiper-bundle.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/css/uikit.min.css"> <link rel="stylesheet" href="../assets/css/theme/main.css"> </head> <body> // Body markup here.. <!-- Initiat Scripts --> <script defer src="https://cdn.jsdelivr.net/npm/uikit@3.6.18/dist/js/uikit.min.js"></script> <script defer src="../assets/js/responsive-uk-attr.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/swiper@6.5.0/swiper-bundle.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> <script defer src="../assets/js/app.js"></script> <script defer src="../assets/js/swiper-helper.js"></script> <script defer src="../assets/js/typed-helper.js"></script> <script defer src="../assets/js/anime-helper.js"></script> <script defer src="../assets/js/anime-helper-defined-timelines.js"></script> </body> </html>
An overview of the custom configured plugins supplied with Dannel.
We made it easy to deal with and even responsive to different screens using breakpoints.
To configure SwiperJs, use the data-swiper
attribute and use the built-in options that are explained in the table below.
<div class="swiper-container" data-swiper="items: 3; dots: .swiper-pagination;"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
We have custom configured responsive control using breakpoints data-swiper-{breakpoint}
, the available breakpoints: s
, m
, l
and xl
.
<div class="swiper-container" data-swiper="items: 1; center: true;" data-swiper-m="items: 3; center: false;"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div>
Buil-in Options:
Option | Value | Default | Description |
---|---|---|---|
items |
number | 'auto' | 1 |
number of slides per view. |
sets |
number | 1 |
Set numbers of slides to define and enable group sliding. |
active |
number | 0 |
Index number of initial slide. |
connect |
string | null |
Connet two sliders via css class selector. |
gap |
number | 48 |
Distance between slides in px. |
center |
boolean | false |
If true, then active slide will be centered, not always on the left side. |
center-bounds |
boolean | false |
If true, then active slide will be centered without adding gaps at the beginning and end of slider. |
dots |
string | .swiper-dotnav |
String with CSS selector or HTML element of the container with pagination. |
dots-type |
string | bullets |
String with type of pagination. Can be 'bullets', 'fraction', 'progressbar' or 'custom'. |
dots-click |
boolean | true |
If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type. |
next |
string | .swiper-next |
String with CSS selector or HTML element of the element that will work like 'next' button after click on it. |
prev |
string | .swiper-prev |
String with CSS selector or HTML element of the element that will work like 'prev' button after click on it. |
disable-class |
string | uk-invisible |
CSS class name added to navigation button when it becomes disabled. |
auto-height |
boolean | false |
Set to true and slider wrapper will adapt its height to the height of the currently active slide. |
autoplay |
number | 3000 |
Activate autoplay and set a delay between transitions (in ms). If this parameter is not specified, auto play will be disabled. |
autoplay-init |
boolean | true |
Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction. |
offset |
number | 0 |
Add (in px) additional slide offset in the end of the container (after all slides). |
fade |
boolean | false |
Enables slides cross fade. |
As you can see, we have shortened some useful options according to their meaning. If you do not find one of the options here, know that it has not been shortened and you should use the default option found in the documentation for this plugin.
To configure TypedJs, use the data-typed
attribute and it's options.
<span data-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; shuffle: false"> <span>portfolio</span> <span>studio</span> <span>agency</span> <span>creative</span> </span>
Options:
You can find all options on TypedJs documentation.
To configure AnimeJs, use the data-anime
attribute and it's options or our built-in options below.
<div data-anime="translateX: 250; scale: 2; rotate: 1turn; onclick: true;"> Animate me </div>
Buit-in Options:
Option | Value | Default | Description |
---|---|---|---|
onclick |
boolean string | false alternate || restart |
Start animation when element clicked. |
onhover |
boolean | false |
Start animation when element hovered. |
onview |
boolean number | false 0 |
Start animation when it's on viewport. You can set an offset in px for ex: 100 or -100. |
autoplay |
boolean | true |
Autoplay animation when element it's on viewport. |
You can find all other options on AnimeJs documentation.
The most streamlined way to make edits and additions to the template CSS is to use the provided user-config.scss
, user.scss
and user-init.scss
files located in the /assets/scss/template/custom folder.
When used in conjunction with the provided dev tools, your custom CSS is included in main.scss
and overrides the default template style.
This is the preferred method as your changes are kept separate from the core framework or template files. By separating your CSS edits into their own files, you can easily overwrite all of the default template SCSS files when you update the template.
If you need to add CSS for additional components or other needs, simply edit user.scss
and add any SCSS or CSS you require.
If you prefer to work with Dannel as a static source without the aid of Node, Gulp and Sass, you will need to add custom CSS through a separate CSS file.
We have provided a blank custom.css
file in the assets/css folder. To make your custom CSS active, you will need to add the following line after main.scss
is referenced in the <head>
of each page:
<link href="./assets/css/custom.css" rel="stylesheet" type="text/css" media="all" />
Updates will be released periodically to add new features, provide fixes where necessary and maintain compatibility.
Most often, the updated files are javascript or CSS and your project should need little adjustment in order to stay up to date.
The changelog is be updated with each release and lists the updated files.
To bring your project up to date with the latest version of Dannel, simply download the latest version, unzip the files and replace the old version in your project with the updated version of each Dannel file.
Any breaking changes that affect compatibility with older versions of Dannel will be noted, and further instructions on updating will be provided in the changelog.
We provide support for bugfixes and guidance on using the template including:
However, item support does not include:
To access support, find the support link in your Themeforest Marketplace item dashboard support tab.
In case you need help installing or customizing your template according to your requirements, we are pleased to provide this service by contacting us via e-mail.
This type of service may charge you a fee depending on your requirements.
We strive to improve our products and we rely on feedback from our customers.
Please feel free to share any feedback about Dannel via your downloads page on Themeforest Marketplace.
Thank you for being one of our valued customers!