We all know that designing a website can be time consuming and labor intensive and developing a responsive website can be even more challenging. There are so many different variables to a responsive website, requiring a skilled hand to code, test and ensure it is all functioning properly. Responsive Layout Maker saves you weeks of hand coding the CSS and HTML layout of your responsive website, giving you a lead on your competition.

Here we have put together a sample project so that you can follow along with as we create a complete, fully responsive, theme named Nova using the exported code from Responsive Layout Maker.

Before:
 
After:
 
What you will need
Responsive Layout Maker The Project Files

Download the project files and follow the instructions below.

Creating the Project Files

Before exporting there are a few things that need to be explained. When exporting the project you will receive a few different files and folders.

  • CSS- Inside the CSS folder you will find the CSS files that make up the layout of the website. Notice that there are a few extra CSS files included in this export. These are compressed and uncompressed versions of the CSS. The CSS files that contain "min" in the title are the compressed version of the CSS file.
  • Fonts- All the fonts used in the layout can be found in this folder.
  • img- This is the folder where the project images will be stored.
  • js- The JS needed to power the layout are located in this folder.
  • HTML Files- The files crafted by a masters hand (well mouse) and beautifully coded by RLM.
 

Before exporting the new layout make sure that the class and ID names are what you want them to be. Changing them down the line can cause extra work by having to edit the custom.css file to update any changes to those class' and ID's.

With Layout Maker there are two export options found under Settings:

Modular Export:

Most web developers use this option as it provides a more extensive file tree.

Flat Export:

This is the option that provides a compact file version that most web designers are used to.

All the files are located in the following format:

Modular Export Flat Export
Framework CSS
  coffeegrinder   coffeegrinder.css
      coffeegrinder.css   coffeegrinder.min.css
      coffeegrinder.min.css   main.css
      wireframe-base.css   wireframe-theme.css
img   wireframe-theme.min.css
styles fonts
  customizations img
      main.css js
  fonts index.html
  layout  
      grid.css  
  wireframe-theme  
      default.css  
      default.min.css  
index.html  

The difference between the two is merely a preference, choose whichever one you prefer. Now that the explanation is out of the way lets get to the good stuff!

Step 1:

We want to link in our custom.css file into the <head> section of our website, before we export our project. This will allow us to work with these custom styles later on. Which we can do by clicking Layouts > Manage Project. Here you add the custom.css markup into the <head> section of all our pages making it easy for us to export and begin working on your project right away!


<link rel="stylesheet" href="css/custom.css" type="text/css">
Manage Project Window

Step 2:

Open Responsive Layout Maker (RLM) and export the project, File Menu > Export. Save the project to a location that is easily accessible.

Exporting the project files:

Step 3:

Open the project in your favorite editor software. We are using our Web Editor in this instance. In Web Editor: Navigate to File Menu > New Project > Project From Files and Folders and then search for the exported folder and select all the files and folders inside it.

Step 4:

Create a custom.css file inside the css folder located in the _exported project files. This is the file we linked in the beginning of the article.

Step 5:

Add the images that will be used in the website to the img folder to the _exported project folder. All the images are linked in RLM using the export path feature found under properties of the images. Once you add the images to your project file they should appear in your layout!

Editing the HTML

Now that our project is setup and ready to go we are going to edit the index.html page. Follow the steps below and learn how to add custom content.

Step 1:

Open the index.html for editing and replace the Lorum Ipsum text with the text that will be on your website.

Step 2:

Now add an active class to the Home link This class will be created in the “Adding the Additional CSS” section below. 


<a class="link-text nav-link active" href="index.html">Home</a>

Step 3:

Bold the word FREE in the Start your "<strong>FREE</strong>, no-risk, 7 day trial!" sentence which can be found in 


<span class="free-trial-text">

Step 4:

We have to assign a new class to the middle pricing table. This class name is bg-color add it to the following code: 


 <div class="span4 custom-767-span12 pricing-table-first bg-color">
      <h3 class="price-header">Total Pro</h3>

Adding the CSS

Now that we have completed the Index page we can start editing the CSS! We are going to break the CSS up in two different sections. The first section contains the styles that apply to elements that are the same on the various pages. The second section contains the styles that are specific to the index page.

  • Sitewide CSS- These are global styles used for your entire website. This would include settings for backgrounds, menu styles, etc.

  • Index CSS- Specific styles that only apply to the elements on the index page of the website.

We are going to start off by editing the sitewide CSS.

Step 1:

Open the custom.css file that you created earlier along with the index.html file for reference.

Step 2:

The menu needs an active and hover color applied. 


/*SiteWide CSS */
.link-text.nav-link.active {
	color: #fff;
}
.link-text.nav-link:hover {
	color: #fff;
	text-decoration: none;
}

Step 3:

The social icons located at the bottom of each page need to be centered, colored and have a border-top applied to the text element. 


/*SiteWide CSS */
.social-media.social-icons {
	text-align: center;
	border-top: solid 1px #777;
	padding-top: 10px;
}
.social-icons i.icon-facebook, .social-icons i.icon-twitter, .social-icons i.icon-linkedin, .social-icons i.icon-google-plus  {
	margin-right: 20px;
	background: #777;
	border-radius:40px;
	padding:2px;
}
.social-icons i.icon-facebook:hover, .social-icons i.icon-twitter:hover, .social-icons i.icon-linkedin:hover, .social-icons i.icon-google-plus:hover {
	background-color: #428bca;
}

Now that the sitewide CSS customization is complete, we need to add the page specific CSS (this is your index).

Step 4:

The header image for the index.html needs to be added to the .header-bg-row class. This will add the image of a lake to the background of the header area. For this, enter: 


/*Index CSS */
.header-bg-row {
	background: url('../img/landscape.png') no-repeat;
	background-size:cover;
}

Step 5:

The pricing-table can be found on the index.html and you need to apply corners, box-shadow, and a border to spruce all three of them up a bit. 

/*Index CSS */
.pricing-table-first {
	border-radius:6px;
	box-shadow:0px 0px 7px 0 #d6d6d6;
	border: solid 1px #d9d9d9;
}

Step 6:

The blog entry images located at the bottom of the index.html should be circles. Apply a border-radius to give the images this effect. 


/*Index CSS */
.footer-post-image {
	border-radius:50px
}
 

Preserve your changes when re-exporting your project

When exporting your project, we recommend exporting to the same folder location each time. Exporting your layout to the same location will overwrite the existing files but it will NOT overwrite anything that was added to the project after the last export. For example, if you add the some images to the img folder and re-exported to the same location, the image files you added will not be overwritten and they will remain in the current location untouched. The same goes for custom CSS files.

When re-exporting your project do not select the _exported folder as this will place the new export in the _exported folder. You must select the parent folder that the current project is located in.

The best way to be successful is by managing your folder structure to be consistent in your architecture. If you setup the structure correctly now, your project’s folder will grow along with your project. Following these tips will put you on the correct path to creating logical and manageable folder structures.

You're all done!

You have not completed the Sitewide CSS and Index.html if you need more practice, please visit our article on how to complete the remaining pages.

 

Missing some settings?

This is because Responsive Layout Maker Pro was used for the creation of this article. One or more of the settings used here might not be available in Responsive Layout Maker. For the most part however, you can continue through the article adjusting the settings that are available to you.