Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a Single Page “About Me” Site With Prepros, Jade & Stylus

by
Final product image
What You'll Be Creating

Today we'll be learning how to create a static one page "About Me" website using the awesome free app Prepros from Alpha Pixels.

Prepros is an interface tool which handles preprocessing, and other front-end tasks. Prepros' greatest strength is the incredible ease with which it allows you to use preprocessors of various kinds, be they for CSS, HTML or JavaScript. So as we put together our static site we'll be playing with three preprocessors for these languages; Stylus, Jade and (a tiny bit of) CoffeeScript respectively.

With Prepros there's no need to install Node.js, Ruby or any modules and gems, and you never have to touch command line. Just install and run Prepros, add your project and it will handle all your compiling, combining and minifying for you.

As part of our site creation we'll also be including some smooth scrolling effects to take visitors from one section of the site to the next, plus some CSS based animation effects for extra punch. Check out the live demo to see what you'll be making.

1. Getting Setup

We'll begin by getting you setup with a project folder organized to best work with Prepros.

I always find it's easier to keep the preprocessor source files you work on separate from the actual site files they'll compile into. By having all your output files in their own folder it's easy to grab the whole thing and upload it to your live site when you're done.

Setup Your Project Structure

Create a project folder named anything you like, e.g. static_site_project.

Inside your project folder create two subfolders; site and source.

In the source folder create a file named index.jade and an additional four subfolders; contentscriptsstylus and templates.

In the scripts folder create a file named site.js and another subfolder named js.

In the stylus folder create a file named style.styl

When you're done, your project structure should look like this:

Install & Configure Prepros

Out of the box Prepros will automatically watch and compile all your files for you. All we need to do is tell it where to put our compiled files, as well as which folders we actually want it to ignore.

Download and install Prepros. Run Prepros, then drag your static_site_project folder onto the interface to add it as a new project.

Click the little gear icon, the one second from the left at the bottom right corner of the Prepros interface, to go into the project settings.

Click CSS Options, then change Output Path Type to "Relative to Source File Directory" and enter ../../site/css/ in the CSS Path field.

Click HTML Options, then change Output Path Type to "Relative to Source File Directory" and enter ../site/ in the Html Path field.

Next, click JS Options and enter ../../site/js/ in the Concatenated & JMinified S Path field.

Then click Project Filters and enter content,templates in the Comma Separated Filters To Exclude field.

It's time to check our setup and try compiling. Click your project name in the left sidebar of Prepros. Everything should now look like this:

If it does, you're ready to run your first project compilation, which will add files into your currently empty site folder. Click the More Options icon, the right most button at the bottom right of Prepros, then choose Compile All Files.

Take a look at your site folder. You should now see the following files and folders inside:

Now we're all set to start coding!

2. Jade in a Nutshell

Instead of coding raw HTML we're going to be working with Jade. I like to think of Jade as "shorthand" for HTML. It lets you write a whole lot less code and use things like variables and mixins to add logic, which all comes together to make for a very efficient process.

If you look at the language reference for Jade you might at first feel like it's a little complex, however there are a few fairly simple key principles that its main functionality boils down to:

HTML Elements

Place any HTML element by just removing the < and > signs, no closing tag required. E.g.

<body></body>
...use instead:
body

<h1></h1>
...use instead:
h1

<p></p>
...use instead:
p

Nesting

Instead of trying to keep track of opening and closing HTML tags, just tab indent wherever you need something to be nested. E.g.

<main><p>...</p></main>

...use instead:

main
    p

Multiple lines indented with the same number of tabs will be wrapped by a common parent element.

Plain Text Inside Elements

Plain text can be placed inside elements by typing it on the same line, after a space e.g.

<h1>Heading Text</h1>

...use instead:

h1 Heading Text

Or, you can put the text on its own line and place a pipe symbol in front of it e.g.

h1
    | This is a heading but I'd like to have
    br
    | a line break in it

CSS Classes and IDs

In most cases, CSS classes and IDs can be appended directly to a HTML element e.g.

<h1 id="idname" class="classname otherclass">Heading Text</h1>

...use instead:

h1#idname.classname.otherclass Heading Text

If you're just placing a div you don't even have to specify the element. A div is the default Jade element, so if you place an ID / class alone it will be automatically applied to a div e.g.

<div class="thisclass">...</div>

...use instead:

.thisclass

Attributes

Wherever a tag needs attributes, just place them between brackets with comma separation, for example:

<a href="webdesign.tutsplus.com" target="_blank">Link Text</a>

...use instead:

a( href="webdesign.tutsplus.com", target="_blank" ) Link Text

There are lots of other powerful features that we'll be working with later such as variables, mixins and logic, but what you see above covers the real crux of using Jade.

Note: It's a good idea to get a Jade syntax highlighter for your preferred code editor before going ahead. I use Jade for Sublime Text (works with versions 2 and 3).

3. Create Your Wrapper Template

One of the coolest things you can do with Jade is create extendable, reusable templates that have block placeholders where content can be slotted in. The easiest way to explain what this means is with a simple example.

Let's say you create this base template, named base.jade:

//- base.jade
header.pagetitle
    h1
        block pagetitle

main.pagecontent
    block pagecontent

The two block lines are placeholders for content to be supplied from elsewhere.

You could then create another template named page.jade that extends the base.jade template, and supply content therein to be inserted where the block placeholders are, just by matching the block names:

//- page.jade
extends base

block pagetitle
    | Welcome to the Page

block pagecontent
	p Have a nice day!

The content after block pagetitle in the page.jade template would appear where the matching block pagetitle placeholder is in the base.jade template. 

Likewise, the content after block pagecontent in page.jade would appear where block pagecontent is in base.jade.

Hence, page.jade would compile into:

<header class="pagetitle">
<h1>Welcome to the Page</h1>
</header>
<main class="pagecontent">
<p>Have a nice day!</p>
</main>

By using this technique you can reuse your templates over and over, supplying different content to put through to the block placeholders each time, which is very handy both for keeping your code organized and for creating multi-page sites.

We're going to use this approach to create a template that will contain the essential base HTML for our site and wrappers to go around our site's content.

Create wrapper.jade

In your project's source > templates folder create a file named wrapper.jade then add this code to it:

doctype html
html( lang="en" )
    head
		title
			block title
		meta( charset='utf-8' )
		meta( http-equiv='X-UA-Compatible', content='IE=edge' )
		meta( name='viewport', content='width=device-width, initial-scale=1.0' )
		link( href='css/style.css', rel='stylesheet', type='text/css' )
		link( href='//fonts.googleapis.com/css?family=Bangers|Indie+Flower', rel='stylesheet', type='text/css' )
		script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' )
		script( src='js/site.min.js' )
	body
		block content

When compiled this code will turn into our doctype, html, head, title, meta, link, script and body tags. We're loading the style.css and site.min.js files we generated earlier as well as a couple of Google Fonts we'll be using.

Note the two block placeholders, block title and block content. When we extend this template shortly we'll provide the content that should be slotted in there, generating the page's title and its content.

When you save this file it will not automatically compile as we have told Prepros to ignore any files in the templates folder. This is because we don't want an empty "wrapper.html" file in our site that has no page title or content. Instead, this will all be compiled once we extend the template in the next step.

4. Extend Your Wrapper

You'll recall we already created a file in your source folder named index.jade. Prepros is configured to autocompile this file into site > index.html any time you save.

Add the following code to index.jade:

extends templates/wrapper

block title
    | Static Site With Prepros

block content
	#section01.pane
		.wrapper
			h3 Welcome
			p Content goes here

Save your file and you should see this appear at the bottom right corner of your screen:

Go to Prepros, click the More Options button then choose Copy Live Preview Url:

Paste that URL into your browser and add /site/ to the end to load your compiled site. You should see:

Note: We'll be making a single page site in this tutorial, however you could repeat the above process as many times as you liked for a multi-page site. For example, if you created a file named about.jade in the same way it would be automatically detected by Prepros which would generate an about.html site file for you.

5. Setting Up Your Stylus Basics

Before we go further with coding up your site's content we want to get a bit of basic styling in place. Our preprocessor of choice for this tutorial is Stylus. You can read all about how it works in my article on why Stylus is my favorite.

Stylus has a very similar syntax to Jade in that it uses tab indentation to determine nesting, doesn't require semi-colon line terminators etc. Being able to follow several of the same syntax rules when working with the two languages at the same time helps to keep things running smoothly.

Nib and Normalize.css

The first thing we're going to do is bring in the awesome Nib mixin library, plus some Normalize.css code formatted in Stylus syntax so we can process it into our stylesheet.

Go to Prepros, click on your style.styl file in the interface and you'll see an options sidebar open up on the right. In that options area check the Use Nib box:

Next, grab this Stylus Normalize file from Cory Simmons and save it into your source > stylus folder. However when you do, save it as _normalize.styl. The underscore will prevent Prepros from automatically compiling the file.

Now open up the style.styl file you created earlier and add this code:

// *************
// IMPORTS
// *************

@import nib
@import _normalize

Your file should automatically compile and when you go back to your site if everything has been imported correctly you'll see the default font has changed:

Add Details

We now have all our groundwork in place so we're ready to add some custom styling. 

We're going to add in variables to define the layout, typography and color settings for our site, and we're going to setup some mixins and styles to implement them into our design.

I'll be sharing some of my super magic Stylus code for universal domination that I use in my own personal projects.

Go ahead and add the following code to your style.styl file, below the import lines you already added:

// *************
// VARIABLES
// *************

$base_font_size = 16
//standard default browser size is 16px, so this brings base font size to 18px while keeping things flexible for user
$base_font_size_ems = unit($base_font_size / 16, em)

$px = unit(1 / $base_font_size, rem)

$type_regular_font_family = 'Indie Flower'
$type_h_font_family = 'Bangers'

$type_h_font_sizes = {
    'h1': 3,
	'h2': 2.35,
	'h3': 1.95,
	'h4': 1.65,
	'h5': 1.313,
	'h6': 1.125
}

$type_h_font_vmargins = {
	'h1': 1,
	'h2': 1,
	'h3': 1.313,
	'h4': 1.313,
	'h5': 1.313,
	'h6': 1.313
}

$type_h_font_lineheight = 1.313em

$type_wrapper_font_size = 18 * $px

$layout_site_width = 1200

$color_site_bg = lighten( black, 10% )
$color_wrapper_bg = white

$color_text_default = black
$color_link_default = #c00
$color_link_hover = saturate($color_link_default, 70%)

$color_highlight = #ffc600
$color_shadow = black


// *************
// MIXINS
// *************

h_tags($factor=1)
	h1, h2, h3, h4, h5, h6
			font-family $type_h_font_family
			line-height $type_h_font_lineheight
			font-weight 400
	for h_lvl, value in $type_h_font_sizes
		{h_lvl}
			((value * $factor) < 1) ? $size = 1 : $size = value * $factor
			font-size unit( $size, em )
			margin unit( $type_h_font_vmargins[h_lvl], em ) 0

raised()
	box-shadow 1 * $px 1 * $px 3 * $px rgba(0,0,0,.5)


// *************
// STYLES
// *************


// ELEMENTS
// -------------

*
	box-sizing border-box

html, body
	height 100%

html
	font-size $base_font_size_ems
	font-family $type_regular_font_family
	background-color $color_site_bg
	color $color_text_default
	overflow-x hidden

img
	max-width 100%
	height auto

a, a:link, a:visited
	text-decoration none
	color $color_link_default

a:hover, a:active
	text-decoration none
	color $color_link_hover

//H tag font family, size, line-height, margin
h_tags()


// CLASSES
// -------------

.pane
	display table
	width 100%
	height 100%
	position relative
	padding 20 * $px

.wrapper
	display table-cell
	vertical-align middle
	margin 0 auto
	padding 80 * $px 0
	background-color $color_wrapper_bg
	font-size $type_wrapper_font_size
	text-align center
	border 10 * $px solid $color_shadow
	box-shadow 4 * $px 4 * $px 5 * $px rgba(0,0,0,.5)

Variable Section

In the variables section you'll see the variables $base_font_size and $base_font_size_ems. These two variables set the base font size for our site and then convert it into an em based number we can use to keep our design scalable and flexible. The $px variable gives us a rem based equivalent to one pixel that we can use in place of the unit px, e.g. instead of 20px use 20 * $px.

The variables prefixed $type_ set the following, in order:

  • Regular font family
  • Heading font family
  • Heading 1 to 6 font sizes - defined as a hash
  • Heading 1 to 6 font vertical margins - defined as a hash
  • Heading line height
  • Font size for text inside the .wrapper class

The $layout_site_width variable sets the maximum width we want our content to stretch to, and the variables prefixed $color_ set the various colors we'll be throughout the design.

Mixins Section

In the mixins section you'll see my handy dandy heading tag generation code. It processes the numbers from the variables prefaced $type_h_ into lovely, flexible H tag code. 

It also accepts the argument $factor which is a multiplier run against all the heading font sizes. This gives you the ability to scale all your heading text when required, such as in a media query, just by passing a multiplier. For example, calling h_tags(0.5) would make all your headings half the size of what has been defined in your $type_h_ variables.

The raised() mixin is a shadow style we'll be using on some elements later in the tutorial.

Styles Section

The styles section is split into two categories; "elements", for default HTML elements, and "classes", containing custom defined selectors.

The elements section contains fairly self explanatory code that sets some default behaviours, colors, styles and typography. The classes section uses the .pane and .wrapper classes to create a large white square, bordered in black with a drop shadow that is surrounded by spacing that shows through the dark grey site background.  Through use of the lines display table, display table-cell and vertical-align middle, all content in this white square are vertically aligned.

Your site should now look like this:

6. Add Some Content

Now that we have basic styling in place let's add some content to work with. This is where the content folder you created earlier comes into play.

In your source > content folder create a file named hello.jade. Add this code to it:

h1 Hello
h3 I'm Your Name
h4 This is What I Do

Replace the placeholder text in the second and third lines with something that represents you and what you do.

Earlier we told Prepros to ignore files in the content folder, so to get this content into our site we're going to use Jade's include functionality.

Head back to your index.jade file and update it to the following:

extends templates/wrapper

block title
    | Static Site With Prepros

block content
	#section01.pane.hello
		.wrapper
			include content/hello

What we have done is replace the inline content with the line include content/hello which will pull in the content from the file we just created. 

We're going to be creating several white panes like the one we already have. We've therefore also added a matching class of .hello to the parent div so we have something via which we add unique styling.

Save your index.jade file and you should see your new content in place:

This is content that will welcome people to the site so we want it to have a bit more impact. Add this new code to your style.styl file:

.hello
    .wrapper
		font-size 42 * $px
		h1
			color $color_highlight
			font-size 5.2em
			line-height 0.7em
			margin-bottom 0.7em
			font-family 'Bangers'
			background-color $color_shadow
			text-shadow 12 * $px 12 * $px 0 $color_shadow, -3 * $px -3 * $px 0 $color_shadow, 3 * $px -3 * $px 0 $color_shadow, -3 * $px 3 * $px 0 $color_shadow, 3 * $px 3 * $px 0 $color_shadow
		h3, h4
			font-family 'Indie Flower'
			margin 1em 0

With this code we're targeting the .hello class we added earlier and using it to increase the base font size of this pane, which will in turn scale up the heading tags within as they are em based.

However we want the first line of text reading "Hello" to be even bigger so it's increased from its default of 3em up to 5.2em. It's also colored bright yellow, given a black outline and drop shadow, then placed over a large black strip.

Finally, we change the font applied on the second and third lines to "Indie Flower" and reduce the size of their margins so they can fit on the page more snugly.

This is the result:

7. Add Extra White Panes

Now let's go ahead and add some extra white panes and the content files for them.

In your source > content folder create these files: skills.jade, systems.jade, types.jade, tools.jade, contact.jade. Each one of these files will hold the content for a white pane in your site. Each white pane will stretch to fit the whole viewport and there will be "Next" & "Prev" links to navigate between them.

Open up your skills.jade file and add this code:

h1
    | My Skills Are...
ul
	//- Start square
	li
		h3 Skill One
		ul
			li +
			li Extra Info
			li More info
	//- End square
	//- Start square
	li
		h3 Skill Two
		ul
			li +
			li Extra Info
			li More info
	//- End square

Replace the "Skill One" / "Skill Two" and "Extra info" / "More info" placeholders with info on your own skills. 

Each of these list items is going to be turned into a little square tile, so copy and paste the code between //- Start square and //- End square to create a square for each of your skills. The squares will be in rows of four so try to get a multiple of four if you can to make it look neat.

Update your index.jade to this:

extends templates/wrapper

block title
    | Static Site With Prepros

block content
	#section01.pane.hello
		.wrapper
			include content/hello
			a( class="next", href="#section02" ) NEXT
	#section02.pane.skills
		.wrapper
			a( class="prev", href="#section01" ) PREV
			include content/skills
			a( class="next", href="#section03") NEXT
	#section03.pane.systems
		.wrapper
			a( class="prev", href="#section02" ) PREV
			include content/systems
			a( class="next", href="#section04" ) NEXT
	#section04.pane.types
		.wrapper
			a( class="prev", href="#section03" ) PREV
			include content/types
			a( class="next", href="#section05" ) NEXT
	#section05.pane.tools
		.wrapper
			a( class="prev",href="#section04" ) PREV
			include content/tools
			a( class="next", href="#section06" ) NEXT
	#section06.pane.contact
		.wrapper
			a( class="prev",href="#section05" ) PREV
			include content/contact

In the above code we've created a new pane containing an include call for each of our new content files. Each one has a unique ID such as #section04 we can use to target our "Next" and / or "Prev" links between one section and the next.

Refresh your site and you should now see have a working "Next" link in your first white pane.

Click that link and you should be taken to the "Skills" pane you just created content for, which will currently look like this: 

8. Square Tiles and Pane Heading

Your "skills" pane currently looks a bit funny because we just have default styling applied to our unordered list. Let's insert some styling to create our little square tiles and change up the main pane heading.

In your style.styl file replace your entire .wrapper class with this:

.wrapper
    display table-cell
	vertical-align middle
	margin 0 auto
	padding 80 * $px 0
	background-color $color_wrapper_bg
	font-size $type_wrapper_font_size
	text-align center
	border 10 * $px solid $color_shadow
	box-shadow 4 * $px 4 * $px 5 * $px rgba(0,0,0,.5)
	h1
		margin-top 0
		font-family $type_regular_font_family
	> ul
		$skew = 1.5deg
		max-width $layout_site_width * $px
		list-style-type none
		margin 0 auto
		padding 0
		> li
			$spacing = 0.25%
			raised()
			border 8 * $px solid black
			background-color $color_link_default
			float left
			width 24.5%
			margin 0 $spacing
			height 230 * $px
			padding 40 * $px 30 * $px
			transform: skewY($skew * -1);
			&:nth-child(8n+1), &:nth-child(8n+3), &:nth-child(8n+6), &:nth-child(8n+8)
				background $color_highlight
			&:nth-child(4n+5)
				clear left
			&:nth-child(4n+1)
				margin-top 3 * $spacing
			&:nth-child(4n+2)
				margin-top 2 * $spacing
			&:nth-child(4n+3)
				margin-top 1 * $spacing
		li
			h3
				margin 0
				transform: skewY($skew);
			ul
				list-style-type none
				margin 0
				padding 0
				li
					transform: skewY($skew);

This code changes the font applied on the main heading and removes its top margin. It removes the bullet circles from the unordered list and sets its margin and padding to zero. 

The list items that hold each of our little squares are given a width of 24.5% each and floated to the left, which gives us our four items per row. They're also set to a height of 230 pixels each (converted to rem values) with padding and margin added.

The appearance of the squares is set by giving them each a thick black border and applying the raised() shadow mixin we added earlier. Each one is skewed by -1.5 degrees which will create diagonal top and bottom edges. Their squares' child h3 and li items are skewed by 1.5 degrees; skewing them by the same amount in the opposite direction will make them straighten out again rather than also appearing diagonally tilted.

The default background color of each little square is set via the variable $color_link_default, but we then use the following code to apply the color $color_highlight in a way that will create a checkerboard pattern:

&:nth-child(8n+1), &:nth-child(8n+3), &:nth-child(8n+6), &:nth-child(8n+8)

This line identifies every eighth square starting with the first, (8n+1), then every eighth square starting with the third, (8n+3), every eighth square starting with the sixth, (8n+6), and every eighth square starting with the eighth, (8n+8)

If you draw a grid and color in only the squares just described you'll see it will give you an ongoing checkerboard pattern no matter how many rows you create.

The remaining &:nth-child() lines are responsible for clearing at the end of each row and creating the right amount of top margin above each square.

All the above should give you the following effect after you save and refresh:

9. Styling the Pagination Links

Right now the "Next" and "Prev" links are just floating about and looking pretty plain. Let's change that. Add this code to the end of your style.styl file:

.prev, .next
    background-color $color_shadow
	raised()
	font-size $type_wrapper_font_size
	display inline-box
	position absolute
	left 50%
	width 80 * $px
	margin-left -40 * $px

.prev
	padding-bottom 8 * $px
	padding-top 25 * $px
	top 0
	&:before
		position absolute
		bottom 35 * $px
		content " "
		border-left: 20 * $px solid transparent
		border-right: 20 * $px solid transparent
		border-bottom: 20 * $px solid $color_link_default

.next
	padding-top 8 * $px
	padding-bottom 25 * $px
	bottom 0
	&:before
		position absolute
		top 35 * $px
		content " "
		border-left: 20 * $px solid transparent
		border-right: 20 * $px solid transparent
		border-top: 20 * $px solid $color_link_default

With this code we've put the links on a black background, applied our raised() shadow mixin and added little up and down CSS triangles via the three lines of border settings you see on the &:before selectors. We've also used absolute positioning and negative margins to place the links in the center of the screen, pinned to the top and the bottom of the pane area.

Here's what they should look like now:

10. Adding Smooth Scroll and Animation

Right now when a visitor clicks the "Next" or "Prev" buttons it will jump them straight to the next pane with no transition. Instead, we want to create a smooth scrolling effect from one pane to the next. We also want to add some animation effects to the elements on the screen to give them a bit more life.

Incorporate Smooth Scrolling JavaScript

To create the smooth scrolling from one pane to the next we'll be using a great little jQuery snippet from CSS Tricks. 

In your source > scripts > js folder create a file named smoothscroll.js and add this code to it:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Now open up the site.js file from your source > scripts folder and add this line to it:

//@prepros-append js/smoothscroll.js

The //@prepros-append code allows you to tell Prepros the files you want to combine and minify. Save your file and it will automatically pull in your smoothscroll.js file and feed it into the site.min.js file our site is already loading.

The smooth scrolling function runs automatically on load, so now when you click on a "Next" or "Prev" link you should see a smooth transition from one pane to the other.

Incorporate Animation

We're going to use a combination of the Animate.css library of pure CSS animations, and the Wow.js script to control the timing of these animations.

Right-click and save wow.js into your source > scripts > js folder as wow.js:

Then, just as you did with your smooth scroll script, add a line to your site.js script to tell Prepros you want to pull wow.js into your site.min.js script. 

Update source > scripts > site.js to show:

//@prepros-append js/smoothscroll.js
//@prepros-append js/wow.js

Save the file so it prompts Prepros to recompile.

Now it's time for animate.css. Right-click and save animate.css into your source > stylus folder, however don't save it with a .css extension. Instead save it as _animate.styl which will enable us to import it via our main Stylus file:

In you style.styl file, under the two existing @import lines, add the following:

@import _animate

Save and your stylesheet will recompile with Animate.css included in it.

Now the only thing remaining to enable animations is adding a small script that will activate wow.js. 

Open your wrapper.jade file and add the following three lines directly before your body line, ensuring the first line is indented to the same level as the preceding script lines:

    	:coffee
			w = Math.max document.documentElement.clientWidth, window.innerWidth or 0
			new WOW().init() if w > 1200

The filter code :coffee tells the Jade compiler that some CoffeeScript is coming, and it will hence be compiled into JavaScript.

The above code first checks if the viewport is at least 1200 pixels wide, as we don't want the animation effects on smaller screens, then if so the animation functions are initiated.

Your whole wrapper.jade file should now look like this:

doctype html
html( lang="en" )
    head
		title
			block title
		meta( charset='utf-8' )
		meta( http-equiv='X-UA-Compatible', content='IE=edge' )
		meta( name='viewport', content='width=device-width, initial-scale=1.0' )
		link( href='css/style.css', rel='stylesheet', type='text/css' )
		link( href='//fonts.googleapis.com/css?family=Bangers|Indie+Flower', rel='stylesheet', type='text/css' )
		script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' )
		script( src='js/site.min.js' )
		:coffee
			w = Math.max document.documentElement.clientWidth, window.innerWidth or 0
			new WOW().init() if w > 1200
	body
		block content

Now we're ready to add some animations.

Animate the "Hello" Pane

Adding animations is now super easy. All you need to do is add the class .wow to any element and then choose an Animate.css class add in order to determine the effect, such as .fadeIn. You can also add data-wow-duration and data-wow-delay attributes to determine animation duration and delay

We're going to have the "Hello" line on the first pane slide in from the top, then the second line slide in from the right, and the third line in from the left. Open up your hello.jade file and change the code to this:

h1.wow.slideInDown( data-wow-duration="1s" ) Hello
h3.wow.slideInRight( data-wow-duration="1s", data-wow-delay="1s" ) I'm Your Name
h4.wow.slideInLeft( data-wow-duration="1s", data-wow-delay="2s" ) This is What I Do

If saving your hello.jade file doesn't automatically trigger a recompile just go to your index.jade file and save it, which will prompt Prepros.

Go to your site and refresh then you should see each of the three lines animating themselves into place.

Animate the Other Panes

We're now going to animate the heading and little squares on your skills page. You're still yet to fill in the content for your other currently empty panes, and we don't want you to have to write out animation classes over and over when you do. To make things efficient we're going to create a couple of mixins containing our animation code.

In your source > content folder create a file named mixins.jade and add this code to it:

- var duration = "0.25s"
- var delay = 0.75
- var stagger = 0.25

mixin showSquare()
    li.wow.fadeIn( data-wow-duration=duration, data-wow-delay=( delay += stagger ) + "s" )
		block

mixin panelHead()
	h1.wow.fadeIn
		block

Wherever these mixins are placed, the code they contain will be inserted. 

The three variables and the showSquare() mixin will fade in each of our little squares, each one a quarter of a second after the last. The panelHead() mixin will fade the main heading in as soon as the visitor goes to it.

In your skills.jade file add this line to the top of your file to bring in your new mixins:

include mixins

Replace your existing h1 line with:

+panelHead()

And replace the first li of each of your square with:

    +showSquare()

You should end up with something like this:

include mixins

+panelHead()
    | My Skills Are...
ul
	+showSquare()
		h3 Skill One
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Two
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Three
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Four
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Five
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Six
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Seven
		ul
			li +
			li Extra Info
			li More info
	+showSquare()
		h3 Skill Eight
		ul
			li +
			li Extra Info
			li More info

Now when you refresh your site after a recompile and go to your second pane you should see the heading fade in followed by each little square in staggered succession.

11. Add the Rest of Your Content

Now that our mixins are ready let's go ahead and add content to the remaining panes. Add the following placeholder code to each of your empty content files and customize it to suit yourself.

systems.jade

include mixins

+panelHead()
    | I Work With These Systems
ul
	+showSquare()
		h3 This CMS
		ul
			li More info here
	+showSquare()
		h3 That Engine
		ul
			li More info here
	+showSquare()
		h3 This System
		ul
			li More info here
	+showSquare()
		h3 That System
		ul
			li More info here

types.jade

include mixins

+panelHead()
    | I create these types of projects
ul
	+showSquare()
		h3 Project Type
		ul
			li More info
	+showSquare()
		h3 Project Type
		ul
			li More info
	+showSquare()
		h3 Project Type
		ul
			li More info
	+showSquare()
		h3 Project Type
		ul
			li More info

tools.jade

include mixins

+panelHead()
    | I work with these tools
ul
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name
	+showSquare()
		h3 Tool Name

contact.jade

include mixins

+panelHead()
    | CONTACT ME
	br
	| Via These
ul
	+showSquare()
		h3 
			a( href="http://<sociallink>" ) Social
	+showSquare()
		h3
			a( href="http://<sociallink>" ) Social
	+showSquare()
		h3
			a( href="http://<sociallink>" ) Social
	+showSquare()
		h3
			a( href="http://<sociallink>" ) Social

Modify the "Tools" and "Contact" Pane Styling

After getting all the above content in place you'll notice the "tools" and "contact" panes are a little different to the others. The "Tools" pane has twelve squares with titles only so their current height is too great. The "Contact" pane has links on the squares and their colors currently don't work well.

To remedy both of these issues add this code to your style.styl file:

.tools
    .wrapper
		ul li
			height 140 * $px

.contact
	.wrapper
		ul li
			height 140 * $px
			a
				color black

You should then have black links on your "Contact" pane and a layout like this on your "Tools" pane:

12. Animate the "Next" Buttons

We're going to use animation on the next button, timed after the pane's elements have all appeared, to prompt the visitor that they can go to the next page and also to ensure they realize the link is there.

To do this all we have to do is add the classes .wow and .bounceInUp to each of the "Next" links and set a delay. The index.jade file will be able to access the delay and stagger variables included into each pane via our animation mixins, so we can use those variables in the delay settings to automatically show the "Next" animations at the correct time for each pane.

Update your index.jade to the following:

extends templates/wrapper

block title
    | Static Site With Prepros

block content
	#section01.pane.hello
		.wrapper
			include content/hello
			a( class="next wow bounceInUp", href="#section02", data-wow-delay="3s" ) NEXT
	#section02.pane.skills
		.wrapper
			a( class="prev", href="#section01" ) PREV
			include content/skills
			a( class="next wow bounceInUp", href="#section03", data-wow-delay=( delay -= stagger ) + "s" ) NEXT
	#section03.pane.systems
		.wrapper
			a( class="prev", href="#section02" ) PREV
			include content/systems
			a( class="next wow bounceInUp", href="#section04", data-wow-delay=( delay -= stagger ) + "s" ) NEXT
	#section04.pane.types
		.wrapper
			a( class="prev", href="#section03" ) PREV
			include content/types
			a( class="next wow bounceInUp", href="#section05", data-wow-delay=( delay -= stagger ) + "s" ) NEXT
	#section05.pane.tools
		.wrapper
			a( class="prev",href="#section04" ) PREV
			include content/tools
			a( class="next wow bounceInUp", href="#section06", data-wow-delay=( delay -= stagger ) + "s" ) NEXT
	#section06.pane.contact
		.wrapper
			a( class="prev",href="#section05" ) PREV
			include content/contact

Go back to your site now and you'll see the "Next" button pop up at the right time for each pane.

13. Make it Responsive

The final thing we need to do is add in some media queries to make the layout responsive. We're going to reduce the size of heading tags and default font as we scale down, reduce the number of little squares per row and update their colors and spacing accordingly.

Add this code to the end of your style.styl file:

// *************
// QUERIES
// *************

$query_01 = "(max-width: " + $layout_site_width * $px + ")"

@media $query_01
    h_tags(0.9)
	.wrapper > ul > li
		$spacing = 0.25%
		width 32.8%
		&:nth-child(2n+1)
			background $color_highlight
		&:nth-child(2n+2)
			background $color_link_default
		&:nth-child(4n+5)
			clear none
		&:nth-child(3n+4)
			clear left
		&:nth-child(3n+1)
			margin-top 3 * $spacing
		&:nth-child(3n+2)
			margin-top 2 * $spacing
		&:nth-child(3n+3)
			margin-top 1 * $spacing


$query_02 = "(max-width: " + 1000 * $px + ")"

@media $query_02
	h_tags(0.8)



$query_03 = "(max-width: " + 800 * $px + ")"

@media $query_03
	h_tags(0.7)
	.hello
		.wrapper
			font-size 36 * $px
	.wrapper > ul > li
		width 49.5%
		&:nth-child(4n+1), &:nth-child(4n+4)
			background $color_highlight
		&:nth-child(4n+2), &:nth-child(4n+3)
			background $color_link_default
		&:nth-child(3n+4)
			clear none
		&:nth-child(2n+3)
			clear left



$query_04 = "(max-width: " + 500 * $px + ")"

@media $query_04
	.hello
		.wrapper
			font-size 24 * $px
	h_tags(0.6)
	.wrapper > ul > li
		height auto
		width 99.5%
		margin 0.25% !important
		&:nth-child(2n+1)
			background $color_highlight
		&:nth-child(2n+2)
			background $color_link_default

Now when you shrink your site right down you'll have a layout like this:

Wrapping Up

You can check out my own completed version of this site with my personal skills, tools and so on.

As you can see, Prepros is a great little app and it makes dealing with preprocessors just about as easy as it gets. As well as Jade and Stylus it can also handle LESS, Sass, SCSS (with Compass built in), Slim, Coffeescript, LiveScript, Haml and Markdown. With the pro version you can also get FTP and extra testing and debugging tools.

I occasionally still setup a Grunt based workflow if I need to work with some type of additional process, such as generating documentation for example, but for the majority of projects Prepros has become my default go to.

With the free version having so much to offer, as well as both Windows and Mac versions, it's an app you just have to try out.

Advertisement