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.
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.
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.
<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.
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
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.
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>
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.
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.