Changelog

1.2.0 (July 26, 2021)

  • Added: Freelancer demo single service template.
  • Added: Freelancer demo single post template.
  • Added: Freelancer demo terms and privacy page template.
  • Added: Minimal demo blog listing template.
  • Added: Minimal demo single project template.
  • Added: Minimal demo single post template.
  • Added: Minimal demo terms and privacy page template.
  • Added: Studio demo single service template.
  • Added: Studio demo single project template.
  • Added: Studio demo single post template.
  • Added: 404 page.
  • Improved: Some minor tweaks.

1.0.0 (July 22, 2021)

  • Initial Release.

# Introduction

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

# Installation

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

# Package contents

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/
          • custom/
          • template/
      • js/
      • css/
      • fonts/
      • images/

# HTML Markup

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.min.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.min.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>

# Plugins

An overview of the custom configured plugins supplied with Dannel.

Swiper Js

We made it easy to deal with and even responsive to different screens using breakpoints.


Basic usage:

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>

Responsive:

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.

Typed Js

To configure TypedJs, use the data-typed attribute and it's options.


Basic usage: 
<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.

Anime Js

To configure AnimeJs, use the data-anime attribute and it's options or our built-in options below.


Basic usage: 
<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.

# Customizing CSS

SCSS Method:

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.


CSS Method:

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" />

# Updating template

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.

How to get support

We provide support for bugfixes and guidance on using the template including:

  • Availability to answer questions.
  • Answering technical questions about template's features
  • Assistance with reported bugs and issues.
  • Help with included 3rd party assets.

However, item support does not include:

  • Customization services.
  • Installation services.

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.

Giving Feedback

We strive to improve our products and we rely on feedback from our customers.

Please feel free to share any feedback about Dannel we will appreciate it!

Thank you for being one of our valued customers!