# data[].attributes.attachment_link.description
A modern CSS Gradients Generator to be used for your projects. Choose among all the possible color combinations.

# data[].attributes.attachment_link.description
TheaterJS - Typing animation mimicking human behavior.

# data[].attributes.attachment_link.description
iconate - Transform your icons with trendy animations.

# data[].attributes.attachment_link.description
HoverEffectIdeas - Some inspiration and modern ideas for subtle hover effects.

# data[].attributes.attachment_link.readable_text
It's pretty easy and doesn't take too long

This tutorial has been created to guide you through the process of converting one of our most popular PSD homepage templates on Medialoot into fully coded HTML and CSS.

What We're Coding

Let's take a look at our design, we will be working with a Medialoot PSD template called Simply. Simply is a minimal homepage design with subtle colours and strong headline typography. If you aren't a Medialoot member it is still possible to follow along with the tutorial, click the preview below for a full resolution image to work from:

Understanding the Design

As you can probably see, Simply is a full width homepage design and has 7 distinct sections. We can use these sections to visually break the whole page down into a series of more manageable chunks to work with.

Setting up the Folder Structure

The first thing we need to do is create the folder structure for the project. It is fairly straightforward, all we need is an HTML file, a folder for images and a CSS file. So create a containing folder called 'simply' and two sub-folders called 'images' and 'css'. Then using a code editor create a new blank html file and save it as index.html.

Exporting the Assets

Almost all of this particular design can be easily recreated using just HTML and CSS, however we will need to extract a handful of image assets from the .psd file. To export the individual assets, open the Simply design file in Photoshop and locate the layer for the asset that you want to export. Then hold down the Alt key and click the layer visibility icon.

This will show only the selected layer, you can now go to the Image menu and select Trim... to trim the transparent pixels.

Select the Save for Web... option under the File menu and save the photographs as JPG files and any icons or images with transparency as PNG files.

Rinse. Repeat.
Here is a list of all the assets required, their filenames, extensions and image resolutions required:

hero.jpg - 2000 x 697 px

features-icon-1.png - 100 x 100 px

features-icon-2.png - 100 x 100 px

features-icon-3.png - 100 x 100 px

video-placeholder.jpg - 940 x 527 px

article-image-1.jpg - 460 x 270 px

article-image-2.jpg - 460 x 270 px

Click here to download all of the image assets pre-exported
Setting up the HTML File

Open up the index.html file in your text editor and add the following code:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>

</body>
</html>

This is the most basic skeleton that all html files need. It defines the document type (HTML5), the character set (UTF-8) and the title of the page.

In addition to the basic skeleton, I have also included a script called HTML5Shiv using a conditional comment 'if lt IE 9'. This will enable the use of semantic HTML5 tags such as <header>, <article> and <footer> in older versions of Internet Explorer that don't natively support HTML5.

Dissecting Our Design

As we have already split the design up into 7 distinct sections, we can now take this a step further and visually break it down into the basic structure that we will use for the HTML. Here is an image demonstrating how to do this:

You will notice that not every single element has been labelled, just the most important structural elements. The rest can be added later along with the content.

So let's put that structure into our HTML file, in-between the <body> tags:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <header>
        <h1></h1>
        <nav></nav>
    </header>

    <div id="hero-image">
        <h2></h2>
        <a></a>
    </div>

    <div id="features">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div id="primary-content">
        <article></article>
    </div>

    <div id="secondary-content">
        <article></article>
        <article></article>
    </div>

    <div id="cta">
    </div>

    <footer>
        <div id="footer-info"></div>
        <div id="footer-links">
            <ul></ul>
            <ul></ul>
            <ul></ul>
        </div>
    </footer>

</body>
</html>

Because the design has a width of 960px, we will also need to insert a wrapper into each section. This is done using a container div with a class of 'wrapper':

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simply</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <header>
        <div class="wrapper">
            <h1></h1>
            <nav></nav>
        </div>
    </header>

    <div id="hero-image">
        <div class="wrapper">
            <h2></h2>
            <a></a>
        </div>
    </div>

    <div id="features">
        <div class="wrapper">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <div id="primary-content">
        <div class="wrapper">
            <article></article>
        </div>
    </div>

    <div id="secondary-content">
        <div class="wrapper">
            <article></article>
            <article></article>
        </div>
    </div>

    <div id="cta">
        <div class="wrapper">
        </div>
    </div>

    <footer>
        <div class="wrapper">
            <div id="footer-info"></div>
            <div id="footer-links">
                <ul></ul>
                <ul></ul>
                <ul></ul>
            </div>
        </div>
    </footer>

</body>
</html>

Adding The Content

We can now add the content from the design into the HTML. We will also be adding more tags for minor elements such as paragraphs, headers, links, list items and anything that hasn't already been added:

Section 1: Header

The header consists of a logo and navigation menu. A <h1> tag is used for the logo and a span with a class of 'color' will allow us to set a different color for the full stop using CSS later. The navigation menu is a simple unordered list <UL> with 4 list items <li>, wrapped in the semantic HTML5 <nav> tags.

<header>
    <div class="wrapper">
        <h1>Simply<span class="color">.</span></h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
    </div>
</header>

Section 2: Hero Image

The hero banner image is a simple div with the headline text in a <h2> and button link

<div id="hero-image">
    <div class="wrapper">
        <h2><strong>A Minimal, clean</strong><br/>
        layout for web design.</h2>
        <a href="#" class="button-1">Get Started</a>
    </div>
</div>

Section 3: Features

The 3 feature sections are each a list item in an unordered list, using CSS we will float the list items left to display them horizontally. To prevent other elements being affected by the floating we will also need a div with the class 'clear' and in the CSS later the class '.clear' will have the attribute 'clear:both'.

<div id="features">
    <div class="wrapper">
        <ul>
            <li class="feature-1">
                <h4>Easy to Edit</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
            </li>
            <li class="feature-2">
                <h4>Layered PSD</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
            </li>
            <li class="feature-3">
                <h4>Ready to Go</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</div>

Section 4: Primary Content

The primary content section is very simple and uses an <img> tag for the video placeholder image.

<div id="primary-content">
    <div class="wrapper">
        <article>
            <h3>Featured Content</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt. Nam ultricies odio ac neque suscipit volutpat. Ut dictum adipiscing felis sed malesuada. Integer porta sem nec nibh hendrerit imperdiet. </p>
            <a href="#"><img src="images/video-placeholder.jpg" alt="video placeholder" /></a>
        </article>
    </div>
</div>

Section 5: Secondary Content

Similarly to the features section, we are floating each <article> left to display them horizontally. You will probably notice in this section that we have used some inline styles. I would not normally recommend this, but in this instance the background image for the articles would be classed as content rather than styling so it belongs in the HTML not CSS.

<div id="secondary-content">
    <div class="wrapper">
        <article style="background-image: url('images/article-image-1.jpg');">
            <div class="overlay">
                <h4>Secondary Content</h4>
                <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
                <a href="#" class="more-link">View more</a>
            </div>
        </article>
        <article style="background-image: url('images/article-image-2.jpg');">
            <div class="overlay">
                <h4>Secondary Content</h4>
                <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
                <a href="#" class="more-link">View more</a>
            </div>
        </article><div class="clear"></div>
    </div>
</div>

Section 6: Call to Action

Another straightforward section featuring just a heading 3, paragraph and button link.

<div id="cta">
    <div class="wrapper">
        <h3>Heard Enough?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt. Nam ultricies odio ac neque suscipit volutpat. Ut dictum adipiscing felis sed malesuada. Integer porta sem nec nibh hendrerit imperdiet. </p>
        <a href="#" class="button-2">Get Started</a>
    </div>
</div>

Section 7: Footer

The footer is divided into two columns, the 'footer-info' column and the 'footer-links' column. The 'footer-links' column is then sub-divided into 3 columns using unordered lists.

<footer>
    <div class="wrapper">
        <div id="footer-info">
            <p>Copyright 2014 CompanyName. All rights reserved.</p>
            <p><a href="#">Terms of Service</a> I <a href="#">Privacy</a></p>
        </div>
        <div id="footer-links">
            <ul>
                <li><h5>Company</h5></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Meet The Team</a></li>
                <li><a href="#">What We Do</a></li>
                <li><a href="#">Careers</a></li>
            </ul>
            <ul>
                <li><h5>Company</h5></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Meet The Team</a></li>
                <li><a href="#">What We Do</a></li>
                <li><a href="#">Careers</a></li>
            </ul>
            <ul>
                <li><h5>Company</h5></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Meet The Team</a></li>
                <li><a href="#">What We Do</a></li>
                <li><a href="#">Careers</a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</footer>

The next step is to link to some css files that we will be using. The first one is a css reset from Meyerweb that can be downloaded here: CSS Reset. Once it has been downloaded place it into the css folder and include this line of code in the <head> section of our HTML:

<link rel="stylesheet" type="text/css" href="css/reset.css">

Then we want to include a separate css file for our own custom styles. Create a new blank document with your text editor and save it as style.css, place it in the css folder and then include this line of code in the <head> section of the HTML (directly below the css reset line):

<link rel="stylesheet" type="text/css" href="css/style.css">

We will also be using a custom font from the Google Fonts library for the logo text. Including this line of code will allow us to use the 'Crete' font:

<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>

Adding the Styles

Global Styles

Some styles such as the body, headings, paragraphs and links are global attributes that apply to the whole document, so we will define these first. Most of these attributes, such as colours and fonts are simply extracted from the PSD file. The width of the wrapper is 960 pixels minus 10 pixels padding on either size. And due to using a CSS reset, attributes such as strong and small will need to defined.

body {
    background-color: #fff;
    color: #777;
    font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
p {
    line-height: 20px;
    margin-bottom: 20px;
}
h1 {
    font-family: 'Crete Round', serif;
    font-weight: bold;
    color: #444;
    font-size: 45px;
    margin-bottom: 20px;
}
h2 {
    font-weight: 300;
    color: #444;
    font-size: 55px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}
h3 {
    font-size: 30px;
    color: #444;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}
h4 {
    font-size: 24px;
    color: #444;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
}
h5 {
    font-size: 15px;
    color: #444;
    font-weight: bold;
    text-transform: uppercase;
}
a {
    text-decoration: none;
    color: #444;
}
a:hover {
    color: #02b8dd;
}
strong {
    font-weight: bold;
}
small {
    font-size: 13px;
    color: #777;
    font-style: italic;
}
.clear {
    clear: both;
}
.wrapper {
    margin: 0 auto;
    padding: 0 10px;
    width: 940px;
}

Section 1: Header

The <h1> styles position the logo text and the .color attribute defines the colour of the full stop in the logo. The navigation <ul> displays all of list items floating to the left.

header {
    height: 120px;
}
header h1 {
    float: left;
    margin-top: 32px;
}
header h1 .color {
    color: #02b8dd;
}
header nav {
    float: right;
}
header nav ul li {
    float: left;
    display: inline-block;
    margin-top: 50px;
}
header nav ul li a {
    color: #444;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    margin-right: 20px;
}

Section 2: Hero Image

The #hero-image class has a height which is actually less than the dimensions of the background image, this gives you a few pixels top and bottom to play with if minor changes are needed in the future, or if you are making your design responsive.

#hero-image {
    height: 580px;
    padding-top: 1px;
    background: #e8eced url('../images/hero.jpg') no-repeat center;
}
#hero-image h2 {
    margin: 180px 0 40px 0;
}
.button-1 {
    display: block;
    text-align: center;
    background: #444;
    border-radius: 3px;
    color: #fff;
    width: 180px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    margin: 0 auto;
}
.button-1:hover {
    background-color: #02b8dd;
    color: #fff;
}

Section 3: Features

Each of the feature elements share the #features ul li attribute but the individual .feature-1, .feature-2 and .feature-3 attributes are unique to their respective elements and define different icons for each feature.

#features ul {
    margin: 80px 0;
}
#features ul li {
    width: 300px;
    padding-top: 140px;
    float: left;
    margin-right: 10px;
    text-align: center;
}
#features ul li.feature-1 {
    background: url('../images/features-icon-1.png') no-repeat top center;
}
#features ul li.feature-2 {
    background: url('../images/features-icon-2.png') no-repeat top center;
}
#features ul li.feature-3 {
    background: url('../images/features-icon-3.png') no-repeat top center;
}

Section 4: Primary Content

The heading 3 in this section is underlined and aligned to the center, which is customisation of the standard h3 defined in the global styles part of the CSS.

#primary-content {
    background-color: #f8fafa;
    padding: 60px 0;
    text-align: center;
}
#primary-content h3 {
    display: block;
    margin: 0 auto 20px auto;
    width: 400px;
    border-bottom: 1px solid #02b8dd;
    padding: 0 0 20px 0;
}
#primary-content a img {
    margin: 20px 0;
}

Section 5: Secondary Content

A first-child selector is used to place 20 pixels of margin on the first article only, and the .overlay class features a slightly transparent white background using rgba.

#secondary-content {
    padding: 60px 0;
    text-align: center;
}
#secondary-content article {
    width: 460px;
    height: 270px;
    float: left;
    background-color: #f5f5f5;
}
#secondary-content article:first-child {
    margin-right: 20px;
}
#secondary-content article .overlay {
    background: rgba(255, 255, 255, .95);
    height: 230px;
    width: 190px;
    padding: 20px;
}
article h4 {
    border-bottom: 1px solid #02b8dd;
    padding-bottom: 20px;
}
.more-link {
    border: 1px solid #02b8dd;
    color: #02b8dd;
    padding: 6px 20px;
    border-radius: 3px;
}
.more-link:hover {
    background-color: #02b8dd;
    color: #fff;
}

Section 6: Call to Action

We use the same custom styling for <h3> here and also define the styles for the outlined button and its hover state

#cta {
    padding: 60px 0;
    text-align: center;
}
#cta h3 {
    display: block;
    margin: 0 auto 20px auto;
    width: 400px;
    border-bottom: 1px solid #02b8dd;
    padding: 0 0 20px 0;
}
.button-2 {
    display: block;
    margin: 0 auto;
    border: 2px solid #02b8dd;
    color: #02b8dd;
    border-radius: 3px;
    width: 180px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
}
.button-2:hover {
    background-color: #02b8dd;
    color: #fff;
}

Section 7: Footer

We split the footer into two main columns with a float: left attribute on both #footer-info and #footer-links. And use the same method to split the #footer-links section into 3 horizontal unordered lists.

footer {
    padding: 60px 0;
    background-color: #f8fafa;
}
#footer-info {
    width: 380px;
    float: left;
    margin-top: 10px;
}
#footer-links {
    width: 520px;
    float: right;
}
#footer-links ul {
    width: 150px;
    float: left;
    margin-left: 20px;
}
#footer-links ul li {
    margin: 10px 0;
}

Conclusion

And there we have it! By breaking the design down into sections and visualising the structure before we start coding, it is surprisingly straightforward to code a template using HTML5 and CSS3.
Don't forget that you can download the Simply template here:
Simply - Minimal Website Template

Simply is a minimal, flat single page PSD template with subtle colors and strong headline typography. This layout is designed with agencies in mind, and features a large clean header with navigation, top banner, list of features, content sections and footer.

# data[].attributes.attachment_link.title
How to Code a Homepage Template with HTML5 and CSS3

# data[].attributes.attachment_link.description
It's pretty easy and doesn't take too long This tutorial has been created to guide you through the process of converting one of our most popular PSD homepage templates on Medialoot into fully coded HTML and CSS. Let's take a look at our design, we will be working with a Medialoot PSD template called Simply.

# data[].attributes.attachment_link.readable_text
A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

View demo Download source

Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. For websites, where it's crucial to load all or part of the assets, these kind of preloader screens can be a creative way to make waiting a bit less boring for the visitor. The idea for this tutorial is based on the beautiful preloading effect seen on the website of Fontface Ninja. Initially, the logo and a circular progress element slide up and when the loader finishes its progress animation, i.e. the page assets are loaded, the whole "header" moves up while the page elements are revealed with yet another animation. The sliding logo with its color change makes the icing on the cake.

In this tutorial we will re-create the effect seen on Fontface Ninja with some adjustments and a second demo with slightly different effects. For the logo and the circular progress element we will use inline SVGs, so that we can style their paths in our CSS. We'll create a little script for the stroke animation of the SVG loading element and then we'll control the page animations with classes that we add to the main container.
Please note that we'll be using CSS animations and CSS 3D transforms, so this will only work as intended in browsers that support them. So, let's get started!
The Markup

Let's wrap a header and the main content division into a container. We have to keep in mind that we want to control anything that happens to the initial view and the content with classes. So we will use the main container as our control element. We give it the class and ID ip-container.

The initial view consists of a header that contains the logo and the loading element. They are both SVGs and our logo is a bit more complex than the loader, so we'll leave out the path coordinates in the snippet below because its really long. As you can see, we are defining some SVG attributes like the width and height, the viewBox and the preserveAspectRatio. The value for the preserveAspectRatio is xMidYMin meet which means that we force uniform scaling where the graphic fits completely into its container while its centered on the X axis and aligned at the top. In order to make the logo accessible, we add a title, description and the necessary ARIA attribute, aria-labelledby.

The main content has the class ip-main and later on we'll apply animations to its children, the headline, the division and the inner boxes:

<div id="ip-container" class="ip-container">

	<!-- initial header -->
	<header class="ip-header">

		<h1 class="ip-logo">
			<svg class="ip-inner" width="100%" height="100%" viewBox="0 0 300 160" preserveAspectRatio="xMidYMin meet" aria-labelledby="logo_title">
				<title id="logo_title">Delightful Demonstrations by Codrops</title>
				<path d="...our super-long path..." />
			</svg>
		</h1>

		<div class="ip-loader">
			<svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
				<path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
				<path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
			</svg>
		</div>

	</header>

	<!-- main content -->
	<div class="ip-main">

		<h2>Make yourself at home.</h2>

		<div class="browser clearfix">
			<div class="box">
				<span class="icon-bell"></span>
				<p>...</p>
			</div>
			<div class="box">
				<span class="icon-heart"></span>
				<p>...</p>
			</div>
			<div class="box">
				<span class="icon-cog"></span>
				<p>...</p>
			</div>
		</div>

	</div>
</div><!-- /container -->

Let's go on and style this.

The CSS
Note that the CSS will not contain any vendor prefixes, but you will find them in the files.
Initially, we'll include some fonts that we'll need for the dummy text and the icons in the boxes. The icons used in the demos are from the Feather icon set and we've created the icon font with the Icomoon App. The dummy font is Blokk, a really great fonts when creating wireframes and mockups.

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'Blokk';
	src: url('../fonts/blokk/BLOKKRegular.eot');
	src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
		 url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
}

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'feather';
	src:url('../fonts/feather/feather.eot?-9jv4cc');
	src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
		url('../fonts/feather/feather.woff?-9jv4cc') format('woff'),
		url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'),
		url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg');
}

We want the header to fill all the viewport initially, so let's give it a 100% in width and height and set its position to fixed:

.ip-header {
	position: fixed;
	top: 0;
	z-index: 100;
	min-height: 480px;
	width: 100%;
	height: 100%;
	background: #f1f1f1;
}

Let's remove any margins from the logo headline:

.ip-header h1 {
	margin: 0;
}

Both, the logo and the loader will be positioned absolutely and we'll stretch them over the viewport:

.ip-logo,
.ip-loader {
	position: absolute;
	left: 0;
	width: 100%;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

Instead of simply taking the logo element and positioning it in the center of the header, we need to keep the following in mind: we want the logo SVG itself to be responsive, meaning that we might not have knowledge about its dimension, and we want to move it to the top of the main content using 3D transforms, once the loading is done. Mainly, because we don't know the size of our logo, we don't know how much we have to actually translate it in order to be at the top of the content (percentage translations take the element as reference and not the parent). But we do know and can work with one particular value: the viewport height. So let's just set the logo to 100% height and translate it 25% so that the logo SVG stays in the middle of the page:

.ip-logo {
	top: 0;
	height: 100%;
	transform: translate3d(0,25%,0);
}

We position the logo element at the bottom of the viewport:

.ip-loader {
	bottom: 20%;
}

The SVGs, which we gave the class ip-inner, will be displayed as block element and we center it horizontally with the auto margin:

.ip-header .ip-inner {
	display: block;
	margin: 0 auto;
}

The logo SVG should be responsive but not become too big or too small. So, beside a percentage value as the width, we also set a max and min width:

.ip-header .ip-logo svg {
	min-width: 320px;
	max-width: 480px;
	width: 25%;
}

Since we've added the logo SVG inline, we can directly style the color of the path:

.ip-header .ip-logo svg path {
	fill: #ef6e7e;
}

And the same holds for the loader:

.ip-header .ip-loader svg path {
	fill: none;
	stroke-width: 6;
}

The first path has a gray fill:

.ip-header .ip-loader svg path.ip-loader-circlebg {
	stroke: #ddd;
}

And the second path will have the progress transition that we will control in our JS. But here, we'll define the transition of the stroke-dashoffset:

.ip-header .ip-loader svg path.ip-loader-circle {
	transition: stroke-dashoffset 0.2s;
	stroke: #ef6e7e;
}

And now, we'l style the content of the page, which is all wrapped in the ip-main division:

.ip-main {
	overflow: hidden;
	margin: 0 auto;
	padding: 160px 0 10em 0;
	max-width: 1100px;
	width: 90%;
}

The headline will be sized with vw which will make it responsive:

.ip-main h2 {
	margin: 0;
	padding: 0.5em 0 1em;
	color: #be4856;
	text-align: center;
	font-size: 4.25em;
	font-size: 4vw;
	line-height: 1;
}

Let's add a browser image:

.browser {
	margin: 0 auto;
	padding-top: 8%;
	min-height: 400px;
	max-width: 1000px;
	width: 100%;
	border-radius: 8px;
	background: #fff url(../img/browser.png) no-repeat 50% 0;
	background-size: 100%;
	color: #d3d3d3;
}

And some dummy boxes:

.box {
	float: left;
	padding: 3.5em;
	width: 33.3%;
	font-size: 0.7em;
	line-height: 1.5;
}

.box p {
	font-family: 'Blokk', Arial, sans-serif;
}

The boxes will each have an icon:

[class^="icon-"]::before,
[class*=" icon-"]::before {
	display: block;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border-radius: 5px;
	background: #dfdfdf;
	color: #fff;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 5em;
	font-family: 'feather';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-bell:before {
	content: "\e006";
}

.icon-cog:before {
	content: "\e023";
}

.icon-heart:before {
	content: "\e024";
}

Now we have to define the animations that should take place. As we mentioned earlier, we will control the firing of animations by adding classes to the main container.
The initial animation of the header elements will make them move in from the bottom:

.loading .ip-logo,
.loading .ip-loader {
	opacity: 1;
	animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .ip-loader {
	animation-delay: 0.2s;
}

@keyframes animInitialHeader {
	from {
		opacity: 0;
		transform: translate3d(0,800px,0);
	}
}

We only need to define the from keyframe since we want to move the elements to their original position.
The custom cubic-bezier timing function, will add a nice smoothness to the effect. The loading element needs to have a slight delay before it slides in.

At this point, let's keep in mind, that we will animate the circular progress with JS. So we need another "state" which will be switched to, once that progress animation is done. We will give the class loaded to the container and apply the following animations:

.loaded .ip-logo,
.loaded .ip-loader {
	opacity: 1;
}

.loaded .ip-logo {
	transform-origin: 50% 0;
	animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedLogo {
	to {
		transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
	}
}

.loaded .ip-logo svg path {
	transition: all 0.5s ease 0.3s;
	fill: #fff;
}

.loaded .ip-loader {
	animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedLoader {
	to {
		opacity: 0;
		transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
	}
}

The logo moves down 100% (remember, our logo is 100% of the viewport height, so this will make it move the entire screen height) plus a bit more for some spacing, and then we also scale it down a bit. The color of the SVG path will change with a transition.
The loader element moves up, scales down and fades out.

The fixed header itself needs to move up as well:

.loaded .ip-header {
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedHeader {
	to { transform: translate3d(0,-100%,0); }
}

Let's take care of the content elements. Here, you can do a lot of creative effects. This of course, all depends on what content you have on the page. In our case, we want to fade the elements in while moving them up from below:

/* Content animations */
.loaded .ip-main h2,
.loaded .ip-main .browser,
.loaded .ip-main .browser .box,
.loaded .codrops-demos {
	animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loaded .ip-main .browser,
.loaded .ip-main .browser .box:first-child {
	animation-delay: 0.1s;
}

.loaded .ip-main .browser .box:nth-child(2) {
	animation-delay: 0.15s;
}

.loaded .ip-main .browser .box:nth-child(3) {
	animation-delay: 0.2s;
}

@keyframes animLoadedContent {
	from {
		opacity: 0;
		transform: translate3d(0,200px,0);
	}
}

The slight delay for the boxes in the browser division, will create a nifty extra effect.

In order to avoid problems with scrolling and gaps at the bottom of the page, we need to switch the positioning of the header from fixed to absolute. This, we can control by adding a class to the body (or any parent) once all the animations are done. With the help of that class, we switch the positioning:

.layout-switch .ip-header {
	position: absolute;
}

If we don't have JavaScript, we show the state after all animations. This we can do by setting the header to relative positioning and sizing the logo accordingly:

.no-js .ip-header {
	position: relative;
	min-height: 0px;
}

.no-js .ip-header .ip-logo {
	margin-top: 20px;
	height: 180px;
	opacity: 1;
	transform: none;
}

.no-js .ip-header .ip-logo svg path {
	fill: #fff;
}

Last, but not least, we have to take care of the large headline and the boxes for smaller screens:

@media screen and (max-width: 45em) {

	.ip-main h2 {
		font-size: 2.25em;
		font-size: 10vw;
	}

	.box {
		width: 100%%;
	}

}

And that's all the style.

The JavaScript

The JavaScript consists of two parts. We will separate the general progress element's loading functionality from the rest. Let's call that script pathLoader.js since it is the path element that animates.
We want to be able to set the stroke-dashoffset in order to animate the filling the path. Initially, this and the stroke-dasharray are set to the length of the path (getTotalLength()). We draw the path by setting the dash offset to a lower value up until zero where the path is totally drawn. This is done by calling the setProgress function with a parameter for the value. The optional callback parameter might be useful if we want to execute some code once the value is set and the transition is finished.

function PathLoader( el ) {
	this.el = el;
	// clear stroke
	this.el.style.strokeDasharray = this.el.style.strokeDashoffset = this.el.getTotalLength();
}

PathLoader.prototype._draw = function( val ) {
	this.el.style.strokeDashoffset = this.el.getTotalLength() * ( 1 - val );
}

PathLoader.prototype.setProgress = function( val, callback ) {
	this._draw(val);
	if( callback && typeof callback === 'function' ) {
		// give it a time (ideally the same like the transition time) so that the last progress increment animation is still visible.
		setTimeout( callback, 200 );
	}
}

PathLoader.prototype.setProgressFn = function( fn ) {
	if( typeof fn === 'function' ) { fn( this ); }
}

The setProgressFn method is used here to define a possible way to interact with the loader. For instance, for our demo we are not preloading anything but instead we simulate a loading animation by setting a random value between 0 and 1 throughout a set of time intervals:

var simulationFn = function(instance) {
	var progress = 0,
		interval = setInterval( function() {
			progress = Math.min( progress + Math.random() * 0.1, 1 );
			instance.setProgress( progress );
			// reached the end
			if( progress === 1 ) {
				clearInterval( interval );
			}
		}, 100 );
};

var loader = new PathLoader([pathselector]);
loader.setProgressFn(simulationFn);

Next, let's create our resting script in main.js. First we initialize and cache some variables:

var support = { animations : Modernizr.cssanimations },
	container = document.getElementById( 'ip-container' ),
	header = container.querySelector( 'header.ip-header' ),
	loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
	animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
	// animation end event name
	animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

We start the initial animation (both logo and loader slide up) by adding the loading class to the main container. After the animation ends we start the "fake" loading animation on the SVG loader element like explained before. Note that while these animations are taking place we don't allow the page to be scrolled.

function init() {
	var onEndInitialAnimation = function() {
		if( support.animations ) {
			this.removeEventListener( animEndEventName, onEndInitialAnimation );
		}

		startLoading();
	};

	// disable scrolling
	window.addEventListener( 'scroll', noscroll );

	// initial animation
	classie.add( container, 'loading' );

	if( support.animations ) {
		container.addEventListener( animEndEventName, onEndInitialAnimation );
	}
	else {
		onEndInitialAnimation();
	}
}

// no scroll
function noscroll() {
	window.scrollTo( 0, 0 );
}

Again, we will simulate that something is being loaded by passing a custom function to the setProgressFn. Once the animation is finished we replace the loading class with the loaded class which will initiate the main animations for the header and the content. After that's done, we add the layout-switch class to the body and allow scrolling:

function startLoading() {
	// simulate loading something..
	var simulationFn = function(instance) {
		var progress = 0,
			interval = setInterval( function() {
				progress = Math.min( progress + Math.random() * 0.1, 1 );

				instance.setProgress( progress );

				// reached the end
				if( progress === 1 ) {
					classie.remove( container, 'loading' );
					classie.add( container, 'loaded' );
					clearInterval( interval );

					var onEndHeaderAnimation = function(ev) {
						if( support.animations ) {
							if( ev.target !== header ) return;
							this.removeEventListener( animEndEventName, onEndHeaderAnimation );
						}

						classie.add( document.body, 'layout-switch' );
						window.removeEventListener( 'scroll', noscroll );
					};

					if( support.animations ) {
						header.addEventListener( animEndEventName, onEndHeaderAnimation );
					}
					else {
						onEndHeaderAnimation();
					}
				}
			}, 80 );
	};

	loader.setProgressFn( simulationFn );
}

And that's it, all done!

We hope you enjoyed this tutorial and find it useful and inspiring!
Resource credits: Browser by Keyners, logo made from GraphicBurger template: 5 Vintage Labels / Insignias Vol.1
View demo Download source

# data[].attributes.attachment_link.description
A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.

# data[].attributes.attachment_link.readable_text
Typography is one of the most important things in a website. It delivers the feel and emotion of your brand, working with other elements of you web page. It's critical to treat it as an essential part of the user experience, so in this post i`ve gathered some helpful web type tools for dealing with font sizes, line height, padding and hierarchy.

Typographic is responsive typography made easy. Pick a few font stacks, set a few settings, and you've got beautiful responsive typography - it's that easy.

Flexible and simple-to-use web typography starter kit for web designers and developers. It's a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).

A sass mixin to make responsive typography easy.

Typebase.css is a minimal, customizable typography stylesheet. It has both less and sass versions so it can easily be modified and merged into modern web projects. It provides all the necessary scaffolding for good typography without adding any aesthetics. It is built to be modified as projects evolve and grow, and plays nice with normalize.css.

Typeplate is a "typographic starter kit". It doesn't make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns-not how they look.

Typesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals-the boring stuff that you learn in Typography 101.

You can produce the "automagical" fluid typography thanks to a new, responsive property on the font size. You can get a start is as easy to specify responsive as a font size.

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width.

An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.

Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control.

CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.

Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size - the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Reading is one of the most basic things we do on the web. CSS gives us control over font-size and line-height but we don't have a good way to control the measure.

It separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Up-to-date data on support for type and typographic features on the web.

OpenType features make it possible for type designers to include language requirements, and typographic niceties-ligatures, alternate figures, small caps-within a font. These design decisions are one reason certain type families are much more useful and versatile than others, yet the features they include are usually ignored on the web.

This is a great, simple tool to find the perfect font combo for your next project.

There are over 650 Google Fonts available for free. But, pairing typefaces isn't easy and many of those fonts don't work for typical websites. Part of the 25×52 initiative, this collaborative, ongoing project offers inspiration for using Google's font library.

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

This is a bold claim, but I stand behind it: if you learn and follow these five typography rules, you will be a better typographer than 95% of professional writers and 70% of professional designers.

# data[].attributes.attachment_link.title
21 Web Type Tools For Beautiful Reading Experience | Web & Graphic Design | Bashooka

# data[].attributes.attachment_link.description
Typography is one of the most important things in a website. It delivers the feel and emotion of your brand, working with other elements of you web page. It's critical to treat it as an essential part of the user experience, so in this post i`ve gathered some helpful web type tools for dealing with font sizes, line height, padding and hierarchy.

# data[].attributes.attachment_link.title
Bootstrap Playground - Bootstrap Collapsable open/close icon snippet - 37hAzulbvs

# data[].attributes.attachment_link.description
Bootstrap snippet Collapsable open/close icon 37hAzulbvs. This Bootstrap example code will get you started faster and easier. Example snippets with Bootstrap HTML, JavaScript and CSS.

# data[].attributes.attachment_link.readable_text
All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

A bunch of more techniques here, including multi-line ellipsis.

# data[].attributes.attachment_link.title
Truncate String with Ellipsis | CSS-Tricks

# data[].attributes.attachment_link.description
All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } A bunch of more techniques here, including multi-line

# data[].attributes.attachment_link.readable_text
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don't know its height.

The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc.

So, to vertically align anything we write:

.element { position: relative; top: 50%; transform: translateY(-50%); }

That's all you need. It is a similar technique to the absolute-position method, but with the upside that we don't have to set any height on the element or position-property on the parent. It works straight out of the box, even in Internet Explorer 9. To ensure browser compability, remember to add the proper vendor prefixes. At the time of writing, you need -ms-transform and -webkit-transform to make sure it works everywhere.

To make it even more simple, we can write it as a mixin:

/* Mixin */ @mixin vertical-align($position: relative) { position: $position; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .element p { @include vertical-align(); }

You can find a demo of it here:

See the Pen Vertical center with only 3 lines of CSS by sebastianekstrom (@sebastianekstrom) on CodePen.

As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a "half pixel". A solution for this is to either set its parent element to preserve-3d. Like following:

.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; transform: translateY(-50%); }

Or, you can set the perspective of the element (thanks to roydukkey):

.element { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); }

# data[].attributes.attachment_link.title
Vertical align anything with just 3 lines of CSS | zerosixthree

# data[].attributes.attachment_link.description
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don't know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements.