Quick Start

To start using this product you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

Local Development

If you do not want to use our template as base for your project, and want to integrate our template into your own project, please skip this part and the Live production one, and go straight to Packages. You might also find useful this link here.

Install NodeJS LTS version from NodeJs Official Page
Go to creative tim website and login into your account
Go to product page (be sure to be logged into your account)
Press the download button (this will download onto your computer a zip file)
Unzip the downloaded file to a folder in your computer
Open Terminal
Go to your file project (where you’ve unzipped the product)
Run in terminal npm install
Then run npm run dev
Or you can simply run npm run install:clean (if you use a linux based terminal) which will install node_modules and also will start your project.
If you have an error something containing Module not found please make sure your config files are configured as that from our product
(Optional) You can create a new Svelte application
- Check their official docs here: https://svelte.dev/ and https://svelte.dev/tutorial/basics and https://svelte.dev/docs
- Copy what you need from Notus Svelte to your own project
- Also, if you have issues with integrating your project with our product, please check that you have our config integrated with yours as well
- Here is a useful thread on integrating our products with other projects
Navigate to https://localhost:5000
More information → Svelte
More information → Tailwind CSS

Live Production

NOTE! Creative Tim unfortunately cannot help you with deploying your app.

One of the recurrent issues with our products is the fact that when deploying, you will need to delete the homepage prop from inside the package.json file, or in some cases, you will need to configure it to your own domain.

These are some free open source tutorial on how to deploy a Svelte app on some servers. Please note that your project might need some additional configs to deploy it on these servers:

Packages

If you want to add our template over your own project, please add all contents of the packaje.json file to your own package.json file.

You will also need our configs from the public/index.html, rollup.config.js and tailwind.config.js.

CSS

To get our look, if you’ve started a new app, you will need to import our styles inside your app like so (in our case, these are added inside public/index.html):

    <link rel="stylesheet" href="/build/bundle.css" />
    <link
      rel="stylesheet"
      href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <link rel="stylesheet" href="/assets/styles/tailwind.css" />

Important Globals

Notus Svelte employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

Responsive meta tag

This product is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> inside the public/index.html file.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />