Product Name

Welcome to Lumen

The ClickFunnels Design System

Thanks for checking out Lumen, the UI Design System here at ClickFunnels!

You can view example components and pages from the navigation on the left, and you can switch versions using the dropdown at the top.

If you’d like to get started developing on Lumen, make sure to check out the README.

Installation Guide

CDN

Copy this into your site header:


		<link href="//lumen.clickfunnels.com/1.9.1/assets/semantic.min.css" rel="stylesheet" />

And this into the footer:


		<script src="//lumen.clickfunnels.com/1.9.1/assets/semantic.min.js" type="text/javascript"></script>

NOTE: The version number (1.9.1 in this example) changes frequently, be sure to check the changelog or see latest verions at this page’s header for the latest version and update the links accordingly.

Local Installation

Installing Dependencies


		1. git clone git@github.com:Etison/lumen-design-system.git
		


		2. cd lumen-design-system
		

	
		3. bundle
		

	
		4. npm install

Note: The npm install command above should build the Semantic project using the version of gulp installed in the node_modules directory. You can use this specific version of gulp, but it means you have to use the full path to the binary file. In most cases, it will be easier if you just run


		npm install -g gulp

to make the gulp command available globally. You can then run all of the gulp commands listed below.

Local Development

First, run gulp build


		gulp build

which will run the Semantic build task. You will need to run this after every git pull which brings in external changes (so, every time you get the latest code and start working essentially).

Next, run gulp (or gulp watch if you want to be pedantic)


		gulp

or


		gulp watch

which will start the Semantic watch task as well as spawn a bundler process to run the Jekyll server.