Usage

Using Solid is easy. You only need the precompiled files, or NodeJS and the source files to build from source.

Using prebuilt files

If you wish to quickly build a site without altering any variables such as colors, you can use the prebuilt CSS and JS files found in the /dist directory. Simply load them into your HTML file and start adding components.

Add the following lines to your HTML file


<link href="css/solid.min.css" rel="stylesheet">

<script src="lib/jquery.min.js"></script> <!-- jQuery -->
<script src="lib/popper.min.js"></script> <!-- Popper.js - dependency of Bootstrap -->

<script src="js/plugins.min.js"></script> <!-- Load plugins -->

<script src="js/main.min.js"></script> <!-- Other javascript -->

Building from source

Building from source allows you to change variables such as colors and other settings, and puts the power of the SASS CSS preprocessor at your disposal.

Installing NodeJS

In order to run the tools that are used to compile the source code, you need NodeJS. Download and install NodeJS from here https://nodejs.org/en/download/. Make sure that you also install npm, NodeJS’s package manager.

To test if your installation has been successful, run the following commands:


node -v


npm -v

If these return a version number, install the packages by running the following command in the root folder of your project, where package.json can be found:


npm install

Starting the workflow

Various NPM scripts can be run to start certain processes. You may edit these scripts in the package.json file to your liking. Gulp scripts can be found in Gulpfile.js.

Development mode

Initialize a development mode where files in /src are watched and automatically processed upon changes. Additionally, a dev server is started with /dist/index.html on http://http://localhost:3000.


npm run dev

Building your site

Process all files in src/ and build your site into the dist/ folder.


npm run build

Cleaning

Delete the dist/ folder using


npm run clean

Starter template


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Load the stylesheet. -->
	<link href="css/solid.min.css" rel="stylesheet">

	<!-- Title -->
	<title>WEBSITE TITLE</title>

</head>
<body>





	<!-- Initializes lightbox element -->
	<div id="solid-lightbox-init"></div>

	<!-- Load required Javascript -->
	<script src="lib/jquery.min.js"></script> <!-- jQuery -->
	<script src="lib/popper.min.js"></script> <!-- Popper.js - dependency of Bootstrap -->

	<script src="js/plugins.min.js"></script> <!-- Load plugins -->
	
	<script src="js/main.min.js"></script> <!-- Other javascript -->
	
</body>
</html>

Getting started Workflow