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.
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.
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.
<div class="bg-charcoal"> ... </div>
A list of available background colors:
A list of available background patterns:
You can also apply any of these colors and patterns to the tag.
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
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>
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
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.
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.
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.
Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and
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:
We included two files that contain demo of Bootstraps functions.
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.