Simply.Me is a single-page style personal template designed to provide the user with a simple, elegant and up-to modern standard personal website. Built on Twitter Bootstrap, Simply.Me comes with all the framework’s features customized for this specific template. Please read the Bootstrap documentation to find out how to use majority of the themes features. You can find a link to the Bootstrap documentation at the end of this document.

Layout Options

Simply.Me comes loaded with all of Bootstraps features and its own. Here are a few to help you get started with the customization process.

Theme Color

One wonderful feature of Simply.Me is the ability to modify the templates color option. We purposely built this template to make sure when you want to change the color of the template, all you need to do is edit the CSS and not the images.

Background Colors and Patterns

Simply.Me comes with a selection of colors and patterns that takes its customizability even further. Using a simple class, you can apply any pre-defined classes you like. To make it non- intrusive, we defined all classes to start with the abbreviation “bg.” To use a color as a background, you may simply call for the bg-[color] class (where [color] is replaced by a color of your choice). Similarly, the patterns option is also available using the same method bg-[pattern]. Below you will find a list of colors and patterns we have available.

Example code:

<div class="bg-charcoal"> ... </div>

A list of available background colors:

bg-white
bg-black
bg-charcoal
bg-grey
bg-light
bg-orange
bg-blue
bg-green
bg-pink

A list of available background patterns:

bg-noise
bg-grunge
bg-color
bg-plad
bg-cork
bg-diamond
bg-dots
bg-fabric
bg-grass
bg-metal
bg-weave
bg-aluminum
bg-blackdiamond
bg-carbonfiber
bg-linen
bg-squares
bg-rug
bg-news
bg-fractal
bg-hearts
bg-easter
bg-fizz
bg-halloween
bg-christmas
bg-clouds
bg-flower
bg-gray_jean

You can also apply any of these colors and patterns to the tag.

Navigation

Simply.Me is a responsive template. By making this theme responsive, you no longer have to have multiple versions of your site for each screen resolution. Rather, this template will adapt to fit the screen or device. Having an effective navigation in a responsive design is very important. On a monitor, the navigation will show as inline-block text that has a simple color change and border on hover. When the device resolution is 979px or lower, the navigation will turn into a select box automatically. You do not have to code or add any select box code. Instead, the theme will generate it for you based on the content in your navigation.

The navigation is based on unordered list placed between a
<div>

callout. This will allow you to organize the navigation without having to worry about floating or adding any unnecessary tags or CSS. A standard navigation code looks like this:

<ul id="top-menu">
      <li><a href=”#”>Home</a></li>
      <li><a href=”#”>About</a></li>
      <li><a href=”#”>Work</a></li>
      <li><a href=”#”>Contact</a></li>
</ul>

Just like any items on this template, you have the option to add additional features to the navigation. One feature is to automatically center the navigation when it goes into mobile mode. You can do this by adding the class “mobile-center” in the <nav>tag. Another is the ability to add selected state to the navigation item. You can add the selected class in the <a> tag like so:

<li><a href="#" class="selected">Work</a></li>

Sliders

One of the customization advantages of Simply.Me is that it comes with FlexSlider and a customized Bootstrap sliders. The FlexSlider, designed by WooThemes, is an awesome, fully responsive jQuery slider toolkit. It is/uses:

  • Simple, semantic markup
  • Supported in all major browsers
  • Horizontal/vertical slide and fade animations
  • Multiple slider support, Callback API, and more
  • Hardware accelerated touch swipe support
  • Custom navigation options
  • Compatible with the latest version of jQuery

The Bootstrap sliders uses the built-in carousel javascript while taking advantage of CSS to beautify it. This Bootstrap sliders uses a smooth fading transition to display your products. You, as the author, have the choice of only displaying images or adding a caption. The background color of the caption is dependent on the overall theme color. You can see a demo of this slider in the single portfolio page.
Any slider you use must go inside of the “slider” class callout. In example, if you use a div tag, your slider would be positioned as so:

<div class="slider">... Slider code ...</div>

Please check out the demo to see how each slider is created and functions.

Portfolio

Simply.Me comes with a simple, THUMBNAIL GRID WITH EXPANDING PREVIEW created by the brilliant minds at Codrops. If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link. Visit the Codrops website to learn more about this gallery.

Resume Page

In a personal website, we all want to show off our resume. Part of getting hired requires the hiring team to look at your work experience which is highlighted in your resume. To help you out, we created a matching resume template to make highlighting your work experience a snitch. The beautiful, yet simple, design is easy to read and will attract any company.


Bootstrap

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and
javascript tools, freely available to use on any web design project. Instead of re-inventing the
wheel and to provide you with amazing features, we used Twitter’s Bootstrap as the framework
for this theme. So that we don’t miss any information, it is better suited that we link you to the
official Bootstrap documentation instead of re-writing their information. You can find the
Bootstrap documentation and demo at:
http://twitter.github.com/bootstrap
We included two files that contain demo of Bootstraps functions.

Font-Awesome

This theme takes Bootstrap to the next level by minimizing the number of images used. To achieve this, we removed the traditional bootstrap icons and replaced it with a light-weight font called Font-Awesome. This highly praised font will provide you with the same icons using the same class at a smaller file size. We included a list of all available icons in the “Features” page of the demo. You can find out more about Font-Awesome at: http://fortawesome.github.com/Font-Awesome/

The Demo Images

When viewing the theme demo you will see several photographic images used. These photos serve as example images only and are not included with your purchase. The photos used in the demos are purely for demonstration purposes, and are used to give you a functional preview of what the theme will look like once content has been added. You are responsible for adding your own thumbnail images. The photos used in our demos are licensed from multiple sources and are copyrighted by those respective parties. These photos should not be saved, copied or redistributed in any way.