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 is loaded with all the framework’s features customized for this specific template. This new version of the theme, Simply.Me Version 2.0, comes loaded with new features and variations. Furthermore, it has been re-coded with the latest Bootstrap (version 3.x) to provide more features and support.

Live Preview Buy at the CreativeMarket

Layout Options

Simply.Me comes loaded with all of Bootstraps features and many of 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. As an upgrade from the previous version, Version 2 makes it even easier for you to change the overall color pattern of the site. To change the overall branding color of the site, all you have to do is edit the default.css file and/or replace it with one of the pre-made color schemes included in the file. The pre-made css files can be found in the css/branding directory.

<link rel="stylesheet" href="css/branding/default.css">

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.

Full Height Vs. Fixed Height

For version 2, we listened to what our customers wanted. That’s why we went back to the drawing boards and came back with a number of new features. On this version you have the ability to have a full height (full-screen) or a fixed height header. To use either one, you don’t need to hire a third party designer, just add a simple class to your code. By default, the headers are fixed height. You can easily adjust the height value by editing the header value in style.css. To use a full height header, you will need to add full class to the <header> tag. Similarly, this class also needs to be added to the <nav> tag. Example:

<header class="full slider">... Slider code ...</header>
<nav class="full">... Navigation code ...</header>

Slider Vs. Static

Another wonderful feature of Simply.Me Version 2 is that now you have the ability to use a slider or a static image in the header. Unlike the first version, on Simply.Me Version 2 we have decided to go completely Bootstrap for the slider. 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.
For the slider to work must go inside of the “slider” class callout. In example, if you use a div tag, your slider would be positioned as so:

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

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

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>

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.

Font Library

We took version 2 to the next level by giving you the option to use between 2 different font-icon libraries. We kept the brilliant FontAwesome and introduced Picons.