getting-started.html
<!DOCTYPE html>
<html>
<head>
<title>Papillon - Getting Started</title>
<meta charset="UTF-8">
<meta name="Content-Language" content="en">
<meta name="Description" content="How to install and start using Papillon CSS">
<meta name="Keywords" content="css framework, css, framework, css3, html5, javascript, papillon css, Romain Arnaud">
<meta name="Subject" content="Papillon CSS Framework">
<meta name="Author" content="Romain Arnaud">
<meta name="Publisher" content="Romain Arnaud">
<meta name="Identifier-Url" content="http://romainarnaud.fr">
<meta name="Geography" content="Montpellier, France, 34000">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="src/min/test.css">
<script src="src/js/misc.js"></script>
<script src="src/js/papillon.js"></script>
<script src="src/js/dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68620829-3', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header>
<img src="logo.svg"></img>Papillon
<small>( pa.pi.jõ )<br/>The beautiful, easy to use CSS framework</small>
</header>
<nav class="top">
<div class="toggle"></div>
<div class="links">
<a href="./demo">Demo</a>
<a href="./doc">Documentation</a>
<a href="#">Getting started</a>
<a href="https://github.com/Rominou34/papillon">GitHub</a>
</div>
</nav>
<main>
<div class="container">
<h1 class="text-center">Start using Papillon</h1>
<p>
The way you need to install Papillon depends on how you plan to use it.
Make sure to pick the one that best fits your needs as you can easily be held
back or overwhelmed by the lack or the overdose of features.
</p>
<!-- FOR NEWBS !-->
<h2 class="section-header">Easy mode</h2>
<h3>
<small>
<i>When you just need to have a beautiful website fast, and you
don't care about all the settings.</i>
</small>
</h3>
<p class="margin-sm">
If you don't want to tweak the settings and are ok with default
color scheme, fonts, sizes, etc. then just download the minified
<code>papillon.min.css</code> and <code>papillon.js</code> files.
</p>
<a class="button primary large margin-sm" href="http://rominou34.github.io/papillon/src/min/papillon.min.css" download>
Download CSS
</a>
<a class="button secondary large margin-sm" href="http://rominou34.github.io/papillon/src/min/papillon.min.js" download>
Download Javascript
</a>
<!-- FOR GUYS WHO WANT SOME PRETTY CSS !-->
<h2 class="section-header">Creative mode</h2>
<h3>
<small>
<i>When you want to quickly create your website but have to follow a graphical
guideline, such as sticking to a logotype color scheme.</i>
</small>
</h3>
<p class="margin-sm">
You plan on using the framework as it's intended to be, without much
more to add, but our magnificient color palette isn't fitting your needs ?<br/>
<strong>No problem, you can create your unique CSS file using all the settings
you need !</strong>
</p>
<div class="padding-md">
<h3>How to customize the framework using SASS</h3>
<ol>
<li>
First of all, you'll need to have the CSS preprocessor
<a href="https://sass-lang.com/">SASS</a> installed.
SASS runs using Ruby, so you'll need to install
<a href="https://www.ruby-lang.org">Ruby</a> first.<br/>
When it's done, just open the terminal ( or the command prompt
if you're using Windows ) and install SASS using the Ruby
package manager Gem:
<pre>
<code>gem install sass</code>
</pre>
</li>
<li>
When SASS is installed, you are ready to unleash the framework
to its full power and customize it to your needs. Just clone the
repo to get all the source code:
<pre>
<code>git clone https://github.com/Rominou34/papillon.git</code>
</pre>
<strong>
Now it's easy: just open the 3 files in <code>src/scss/config/</code>
</strong>
These 3 files are the configuration files, containing variables
representing some visual parameters of the framework.<br/>
For example, let's say you want to change the primary color of the
theme: just go into <code>src/scss/config/colors.scss</code> and
change the variable <code>$primary-color</code> to the one you want.
</li>
<li>
After each modification you did to the files in the <code>src/scss/</code>
folder, you have to recompile the framework so it will update the <code>.css</code>
file with your values:
<pre>
<code>sass src/scss/main.scss:src/min/papillon.min.css</code>
</pre>
This command compiles the main <code>.scss</code> file (
<code>main.scss</code> ), which is calling the different modules,
and it compiles the framework into the <code>src/min/papillon.min.css</code>
file but you can change the command to compile it into whatever file you need
</ol>
</div>
</div>
<hr/>
<div class="container stack-lg col-12 soft-col text-center">
<div class="col-4">
<h4>Want to see it at work ?</h4>
<a href="./demo" class="button primary large">
Look at the demo
</a>
<p>
<br/>
Happily, I provided some demo pages so you can see the extent of
its power
</p>
</div>
<div class="col-4">
<h4>Want to try it out ?</h4>
<a href="https://github.com/Rominou34/papillon" class="button primary large">
Check out the GitHub
</a>
<p>
<br/>
Everything regarding the download, informations or even the
ability to contribute can be found on the GitHub of the project
</p>
</div>
<div class="col-4">
<h4>Want to check out the doc ?</h4>
<a href="./doc" class="button primary large">
Documentation
</a>
<p>
<br/>
The documentation isn't there yet, I will start working on it soon.
</p>
</div>
<div class="col-12">
<i><b>Note:</b> The framework is still in development so
watch the repo if you want to be aware of the latest features</i>
</div>
</div>
</main>
<footer>
Papillon CSS 2016<br/>
Romain Arnaud
</footer>
</body>
</html>