Introduction

Loudsight is beautifully designed, expertly crafted components UI kit for building a high-quality website and web apps using web technologies — HTML, TailwindCSS, and JavaScript.

Core libraries used

Here is a list of some core libraries that we use in Loudsight:

  • TailwindCSS

    A utility-first CSS framework packed with classes.

  • Gulp

    We use Gulp as our build tool to bundle JavaScript & Css.

  • Bootstrap(Javascript)

    We included Bootstrap, but only javascript part for the ease of some component functionality.

Installation

Prerequisites

Before you begin with Loudsight, you may need to install the following tools make sure your development environment able to run the template.

After choosing the package you want to install, navigate to project root directory, where the package.json located and run the command below in console: 

node --version
npm --version

Installing Gulp.js

Please note, first Gulp should be installed globally and for that reason -g command is used.

$ npm install --global
                                       gulp-cli

Now Working with Theme Folder

Navigate to the root /Loudsight directory and run npm install to install our local dependencies listed in package.json.

1. Installing NPM modules
$ npm i

If you check the project folder when the command has finished executing, you should see that Gulp has created a node_modules folder

2. Run Gulp

Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file. To try it out run: 

$ gulp
3. Build Production Files

Generates a /dist with all the production files. 

$ gulp build

This will take some time and install all necessary dependencies into the node_modules directory in order for you to start developing.

TailwindCSS

Tailwind CSS is a utility-first CSS framework with predefined classes that you can use to build and design the UI directly in the HTML. We use Tailwind as our core CSS framework, most of the UI in Elstar is built entirely with it features, so you can easily update the theme & base by altering `tailwind.config.js` under the root directory.

Tooling

If you are using VS Code as your IDE, we suggest to install Tailwind CSS IntelliSense plugin, it provides autocomplete, syntax highlighting, and linting based on your Tailwind config which can speed up your development.

You can make any your own utility to the beginning, E.g:

<button
                                       class="btn bg-indigo-600 text-white
                                          border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
                                          hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
                                          active:border-indigo-800 focus:outline-none focus:ring-4
                                          focus:ring-indigo-300">Button</button>

You can always visit the official doc to find out classes usage & Tailwind configuration: https://tailwindcss.com/

Starter

As we mentioned in Installation section, we have provided a starter version with minimum core components and functionality setup, we strongly recommend developer use this version to build the app on top.

COMMAND DESCRIPTION
gulp Compile and watch the SCSS/JS/HTML , use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file. To try it out run:
gulp build Generates a `/dist` with all the production files.

Folder Structure

This section will show you how to keep your files organized. Our theme file structure that looks like this.As mentioned previously, the default Geeks themes are some of the best examples of good theme development. 


                                    ├── src
                                    │ ├── assets # The output css directory
                                    │ ├── css # Compiled CSS
                                    │ ├── fonts # All fonts are used in the theme.
                                    │ ├── images # All the images are used in the theme
                                    | ├── js # All Javascript source files used in theme.
                                    │ ├── tailwind # CSS files
                                    │ ├── components # All Components for theme.
                                    │ ├── partials # A specific loop header and footer files for the templating.
                                    │ ├── index.html # Index and All HTML file is start file run when the gulp
                                    ├── .gitignore # Ignore file for git
                                    ├── gulpfile.js # Gulp setup file
                                    ├── package.json
                                    ├── package.lock.json
                                    ├── README.md
                                    └── tailwind.config.js # TailwindCSS configuration file
Buy Pro