Quick Start - Notus Tailwind JS

To start using this TailwindCSS and JavaScript 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.

  • (If you are not a power user, and do not know how to use the terminal, or do not know what NodeJS is, please skip this step) 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
  • (If you are not a power user, and do not know how to use the terminal, or do not know what NodeJS is, please skip this step) Open Terminal
  • Go to your file project (where you’ve unzipped the product)
  • If you are not a power user, and do not know how to use the terminal, or do not know what NodeJS is, please skip the next steps, and only check the .html files from the unzipped product
  • Run in terminal npm install
  • Then run npm start
  • 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 HTML and JavaScript application
    • Check these tutorials here: https://www.w3schools.com/howto/howto_make_a_website.asp
    • Copy what you need from Notus JS 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:3000
  • More information → HTML
  • More information → JavaScript
  • 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 Javascript 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 scripts area of the .html files and also 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 each .html file, in the head part of the file): 

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

Important Globals

Notus Javascript 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 all of the *.html files. 

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