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; content, scripts, stylus 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.
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.
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.
Or, you can put the text on its own line and place a pipe symbol in front of it e.g.
CSS Classes and IDs
In most cases, CSS classes and IDs can be appended directly to a HTML element e.g.
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.
Attributes
Wherever a tag needs attributes, just place them between brackets with comma separation, for example:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Now open up the site.js file from your source > scripts folder and add this line to it:
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:
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:
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:
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:
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:
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:
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:
Replace your existing h1 line with:
And replace the first li of each of your square with:
You should end up with something like this:
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
types.jade
tools.jade
contact.jade
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:
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:
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:
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.