Clinically web template documentation.
Guide to get started with Clinically web template.
Change App Name
To begin, change your app name in package.json
{
"name" : "your app name",
}Installation
We recommend you to use [Node.js]v16 + and latest NPM version to run. Install the dependencies and devDependencies.
Run this command on your favorite terminal inside folder directory :
npm installor
npm iDevelopment
To customize the styles and scripts, edit all your development resource in /src. Make a change in your file and instantaneously see your updates! Open your favorite terminal and run these commands.
npm startor just watch files with external dev server or live server
npm run watchBuilding for source
For test release:
npm run buildFor production release:
npm run build:prodYou need to know about Clinically web template.
Using Bootstrap v5.2 and jQuery
We already have Bootstrap v5.2 and jQuery in this project, so you don't need to add it manually in html.
Source Management
For images and fonts or other asset resources, put all assets in /src/assets/media folder and it will be copied to /dist/assets/media folder. Also when you want to add a plugin into this project, you should put the plugin in /src/assets/plugins folder, and it will be copied to /dist/assets/plugins.
Creating New Scss File
For styling pages separately, you just need to create a file with name without underscore in front of the file name in the folder /src/assets/scss/pages.
Creating New Javascript File
For javascript files, you can add a javascript file anywhere inside /src/assets/js and it will compiled according to the file path.
Import by url() Rule
If you want to use url() to import some resource files from src inside your scss file, make sure the path you import is fully relative to your current file.
Here is a list of out development tools, maybe you want to help improve our module bundler or dev tools or you just need to read some documentation of our dev tools.
Webpack
As our module bundler. Visit Official Site
Handlebars
As our template engine. Visit Official Site
Bootstrap
Utilizes Sass for a modular and customizable architecture. Visit Official Site
JQuery
Fast, small, and feature-rich JavaScript library. Visit Official Site
Contain a whole Clinically project structure.
dist/
Our production directory, we need to build to see our generated files, and do not modify any files here.
assets/
All of our assets will be generated here.
media/
Images and fonts or other asset resources from /src/assets/media will be copied here.
plugins/
External plugins or libraries from /src/assets/plugins will be copied here.
css/
Contains generated css files.
js/
Contains generated js files.
*.html files
Generated html files . eg: index.html, about-v1.html, about-v2.html.
src/
Our development directory.
assets/
Contains all of our development assets.
media/
Contains images and fonts or other asset resources.
plugins/
Contains external plugins or libraries.
scss/
Contains our scss files.
js/
Contains our js files.
partials/
Contains our html partial files. eg: template, layouts, components.
*.html files
Our html files . eg: index.html, about-us.html, booking.html.
helpers/
Contains all of our helper for bundle the project.
handlebars.js
Our handlebars helper, you can modify this file and add helpers you need.
webpack.config.js
All configuration for webpack module bundler.
package.json
Our metadata project here and used for managing the project's dependencies, scripts, version and a whole lot more.
.gitignore
Specify intentionally untracked files that Git should ignore.
README.md
Our project description and development guide.
This theme use a templating engine Handlebars, using a template.html in partials/ folder to contain component, style, script
<head>
Here is general structure of <head> in partials/template.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{#if title}}{{title}} | {{/if}} Clinically - Medical & Healthcare HTML Template</title>
<meta content="{{#if title}}{{title}} | {{/if}} Clinically - Medical & Healthcare HTML Template" property="og:title" />
<meta content="{{#if title}}{{title}} | {{/if}} Clinically - Medical & Healthcare HTML Template" property="twitter:title" />
<meta name="description" content="{{#if description}}description{{else}}Medical & Healthcare HTML Template{{/if}}" />
<link href="assets/media/images/favicon-clinically.svg" rel="shortcut icon" type="image/x-icon" />
<-- Start::Global Styles (used by all pages) -->
<link href="assets/css/styles.bundle.css" rel="stylesheet" type="text/css" />
<-- End::Global Styles -->
<-- Start::Plugins (used by this page) -->
{{#each cssPlugins}}
<link href="assets/plugins/{{this}}.css" rel="stylesheet" type="text/css" />
{{/}}each
<-- End::Plugins -->
<-- Start::Page Styles (used by this page) -->
{{#each cssPage}}
<link href="assets/css/pages/{{this}}.css" rel="stylesheet" type="text/css" />
{{/}}each
<-- End::Page Styles -->
</head>
<body>
Here is general structure of <body> in partials/template.html
<body class= "{{#if bodyClass}}{{bodyClass}}{{/if}}">
{{#if @partial-block}} {{> @partial-block }} {{/if}}
<-- Start::Global Bundle Scripts (used by all pages) -->
<script src="assets/js/scripts.bundle.js"></script>
<script src="assets/plugins/example.min.js"></script>
<-- End::Global Bundle Scripts -->
{{#if jsPlugins}}
<-- Start::Plugins (used by this page) -->
{{#each jsPlugins}}
<link href="assets/plugins/{{this}}.css" rel="stylesheet" type="text/css" />
{{/each}}
<-- End::Plugins -->
{{/if}} {{#if js}}
<-- Start::Page Scripts (used by this page) -->
{{#each js}}
<link href="assets/js/{{this}}.css" rel="stylesheet" type="text/css" />
{{/each}}
<-- End::Page Scripts -->
{{/if}}
</body>
Implementation
Here is example to use on pages
~ Opening Template ~
{{#>
partials/template.html <-- Extend template.html from partials folder -->
title="Homepage" <-- Insert title -->
htmlClass="example" <-- Give class to <html> -->
bodyClass="example" <-- Give class to <body> -->
cssPlugins=(array "slick/slick" "slick/slick-theme") <-- Import CSS plugins -->
cssPage=(array "homepage") <-- Import CSS style page -->
js=(array "pages/homepage") <-- Import Javascript page -->
jsPlugins=(array "retina" "datepicker/js/bootstrap-datepicker.min" "slick/slick.min") <-- Import Javascript plugins -->
}}
~ Calling Sections or Layout from partials/layout, partials/sections ex: navbar ~
{{>
partials/layout/header.html extraClass="navbar-fixed js-navbar-fixed"
}}
~ Start make content on body ~
<section class="hero">
<container>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</container>
</section>
~ Calling Sections or Layout from partials/layout, partials/sections ex: footer ~
{{>
partials/layout/footer.html
}}
~ Closing Template ~
{{/
partials/template.html
}}
In this project we're using 7-1 pattern for our architecture.
abstracts/
Contains variables, functions, mixins, tools and helpers used across the project.
base/
Contains reset file, some typographic rules, and some standard styles for commonly used HTML elements.
components/
Contains all kind of specific modules like slider, loader, widget, and basically anything along those lines.
layouts/
Contains everything that takes part in laying out the site like header, footer, navigation, or sidebar.
pages/
Contains styles for a specific page you can put here (you should import _init.scss in first line of your page style file).
themes/
Contains theme settings (we don't need it now).
vendors/
Contains styles for external libraries.
Explain Plugins Usage for Better Experience
Retina JS
1. To begin, import 2 same image, with second image filename is yourfilename@2x.png
Example: yourfilename.png and yourfilename@2x.png
2. Add data-rjs="yourfilename@2x.png" attribute on your html image tag.
<img src="yourfilename.png" data-rjs="yourfilename@2x.png">3. Retina JS will automatically replaces images on your page with high-resolution variants (if they exist).
Slick
As our carousel. Visit Official Site
Datepicker
As our custom date picker. Visit Official Site
Font Awesome
For some icons that we used. Visit Official Site
