Medicus is a "Health & Beauty" oriented HTML5 Template, built to serve as a foundation for your web projects. The Design is based on fine typography and large photography. It is build with Twitter Bootstrap, the front-end development framework with a steep learning curve that changes the way you develop sites. Medicus lets you build your pages with a great collection of section layouts and helper classes that offer extreme flexibility and pixel-perfect design.
To use the template you have to be familiar with HTML & CSS. The demo is self-explanatory and you can easily study the HTML files to discover how to customise the templates to your needs. This documentation covers some basics to help you get started... If you are a web developer you are about to boost your development workflow!
Designed by Plethora Themes
Responsive Grid, Layout & Styling
The Grid (it is Bootstrap as you know it!)
Medicus uses Twitter Bootstrap to build the responsive grid. You should study it if you aren't familiar already. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
LESS & CSS
Medicus makes heavy use of LESS to style its content but you may as well work with CSS. The LESS files responsible for the styling are in the
the assets/less
folder while their CSS compiled counterparts reside at assets/css
.
less |- theme_variables.less |- theme_custom_bootstrap.less |- style.less |- ... other files
css |- theme_custom_bootstrap.css |- style.css |- ... other files
First, we load assets/css/theme_custom_bootstrap.css
which is a light version of Bootstrap Framework, made especially for Medicus.
Its LESS counterpart assets/less/theme_custom_bootstrap.less
is an exact copy of assets/twitter-bootstrap/less/bootstrap.less
with certain sections commented out. To exclude styles that you don't need, or to enable some that we left out, edit assets/less/theme_custom_bootstrap.less
and recompile to its CSS counterpart in the assets/css
folder.
Finaly, we load assets/css/style.css
which is the main stylesheet for the theme. Its LESS couterpart assets/less/style.less
is the powerfull
constructor of this template which imports the very important assets/less/theme_variables.less
file where all the colors, typography and other various settings reside.
So, for example, if you need to change the colors of your template, you can just edit assets/less/theme_variables.less
file, replace just one variable and recompile
style.less
We compile LESS locally and not on the server. That means we use tools like Prepros or CodeKit. Check out this article. If you need to learn more about LESS, visit LESSCSS.org
Apart from the css files we talk about in this section, we also use some other css files that belong to external libraries and reside in the css folder.
JADE & HTML Templating engine
In order to produce the final HTML Template files, we use JADE and although you don't have to use it yourself, we incude it in our package for all of those who are familiar
or wish to start playing around! The JADE files reside in the assets/jade
folder while their HTML compiled counterparts reside at the root folder of the package.
medicus-html |- assets |- jade |- templates |- 404.jade |- about-us.jade |- blog.jade |- ... other JADE files
medicus-html |- 404.html |- about-us.html |- blog.html |- ... other HTML files
We included a special config.jade
file from where you can globaly enable or disable css and script loading. You can also choose between development or production mode.
In production mode, scripts are loaded minified. To enable specific scripts per page, you can override the configuration variables to true in the specific JADE template file.
We compile JADE locally and not on the server. That means we use tools like Prepros or CodeKit. If you need to learn more about JADE, visit jade-lang.com
Javascript & the way we use it
Javascript is used extensively in Medicus in order for some of its features to work. These features include the Sliders, the menu, the newsletter and the forms, parallax effects,
the lightbox, google maps etc. All the files needed, reside in the assets/js
folder in both normal and minified versions. The corresponding scripts are called from the various HTML pages
depenting on the features that are used in each page.
A specific pair of files has a special importance for Medicus. In theme.js
you can find some custom scripts that we use for layout purposes and in config.js
you can
configure the most common settings for all js scripts, without you needing to dig up in the code to change them.
The General Layout Concept
The pages have 4 basic areas: The Header, The Head Panel, The Main Area and the Footer.
We found this setup to be simple and semantic. The header and the footer are meant to be common on every page while the main area is where you put sections with different layouts. The head panel is optional and is meant to host sliders, maps, big background photos and page titles & subtitles. We are examining these 4 basic areas in detail below.
The General Styling Concept
The styling of any element of the page is based on the concept of Helper Classes. These cover a wide range of styling issues such as the colors of an element and its sub-elements, the dimensions, the paddings, the alignments (on both axis) etc. Let's examine them bellow...
Color Scheme helper styling classes (6)
These classes set the background, the text, the link and the link:hover colors of any element they are applied on, and its children also. They take their name from the background-color they use.
skincolored_section
@brand-primary colorsecondary_section
@brand-secondarydark_section
light_section
black_section
white_section
assets/less/theme_variables.less
if you work with LESS.
If you set a background image in a section that is mainly dark-colored, then by setting the section to .dark_section you acknowledge that you want the text of this section to take the color that you have set for a dark_section and is obviously in contrast with a dark background. That is the concept...
You can visualize all these by visiting our Design Elements Playground and clicking on the icon on your right,
or by appending the ?enableStyleSwitcher
query string in any of our demo pages' URL. For example:
http://plethorathemes.com/html/medicus/about-us.html?enableStyleSwitcher
Have Fun!
Gradient Angled Backgrounds (14)
These classes set the background of a section as a Flat Primary to Secondary color gradient (or vice-versa) with an angle. It is the effect you see on the header and the footer. Some of them are inter-depentent.
gradient
Primary to Secondary color, no angle, split 50-50gradient diagonal-30
With an angle of 45, split 30-70gradient diagonal-50
With an angle of 45, split 50-50gradient diagonal-70
With an angle of 45, split 70-30gradient diagonal-30-minusangle
With an angle of -45, split 30-70gradient diagonal-50-minusangle
With an angle of -45, split 50-50gradient diagonal-70-minusangle
With an angle of -45, split 70-30gradient-invert
Secondary to Primary color, no angle, split 50-50gradient-invert diagonal-30-invert
With an angle of 45, split 30-70gradient-invert diagonal-50-invert
With an angle of 45, split 50-50gradient-invert diagonal-70-invert
With an angle of 45, split 70-30gradient-invert diagonal-30-minusangle-invert
With an angle of -45, split 30-70gradient-invert diagonal-50-minusangle-invert
With an angle of -45, split 50-50gradient-invert diagonal-70-minusangle-invert
With an angle of -45, split 70-30
assets/less/theme_variables.less
if you work with LESS.
Transparent overlays
These classes overlay a transparent film in front of the background of any element. Its basic color is set by the color-scheme class of the element.
transparent-film
gradient-film-to-top
aka dégradé...gradient-film-to-bottom
For example, if you set a section with a background-photo as .skincolored.transparent-film, the transparent film will be the skincolor faded by the percentage of the transparency you have set on theme_variables.less.
Full Height, Full Width and Vertical Alignment of a Section
You can set a section to have a minimum height same to the screen height and vertically align the content. (Interdepentant classes)
full_height
Vertical topfull_height vertical_center
full_height vertical_bottom
full_width
Allow the section content to capture the entire screen width.
Paddings and Margins (relative to @section-vertical-padding: 55px;)
no_padding
No Top or Bottom Paddingno_padding_top
no_padding_bottom
padding_top
padding_bottom
padding_top_half
padding_bottom_half
no_margin
No Top or Bottom Marginno_margin_top
no_margin_bottom
margin_top
margin_bottom
margin_top_half
margin_bottom_half
margin_top_grid
Equal to the double col paddingmargin_bottom_grid
no_cols_padding
No horizontal Padding for the columns of a section
Vertical Align and heights of a Section's Columns
vcenter
Alignes columns of a section that have different heights to their vertical centersvbottom
same_height_col
When applied to 2 or more different-height-columns of a section, it makes them of equal height
You can visualize all these by visiting our Design Elements Playground and clicking on the icon on your right,
or by appending the ?enableStyleSwitcher
query string in any of our demo pages' URL. For example:
http://plethorathemes.com/html/medicus/about-us.html?enableStyleSwitcher
Have Fun!
Responsive Stretchy Wrappers that keep a dimesions ratio
Inter-Dependent ...
stretchy-wrapper
Ratio 16:9stretchy-wrapper ratio_15-9
stretchy-wrapper ratio_12-5
stretchy-wrapper ratio_4-3
stretchy-wrapper ratio_2-1
stretchy-wrapper ratio_1-1
stretchy-wrapper ratio_5-1
Other Misc. Helper Classes
Can be set on any element.
transparent
centered
elevate
boxed
boxed_plus
boxed-special
neutralize_links
If used on a color-schemed item, the links get the color of the textlinkify
Applied on a link, it will open the .main section of the URL in an AJAX Modalscrollify
Applied on a link with a hashtag, it will scroll to the target id smoothlyclick-disable
Applied on an img it will make it unselectable (Thanks to Andrew Chs)
Header Section
The header section is where the logo, the menu and the optional top-bar reside . Its height is not set explicitly but it depents on the vertical
margin of the logo. It can be set to move along with the page when you scroll (relative position), or it can be always on top (sticky).
In order to make it sticky, you just have to add the class sticky_header
to the body element.
The background color of the header's mainbar (logo and menu) can be solid or gradient (brand-primary to brand-secondary).
The gradient may be horizontal or diagonal. All these are set by adding or excluding the appropriate classes to the .mainbar element.
You may also make the whole header transparent (opaque) by adding the class .transparent
to the .header
.
The angle of the diagonal gradient can be set from the assets/less/theme_variables.less
if you use LESS. Also from there you can set the colors of the two areas and the percentage of the containers length, that the angle will be placed.
The Logo Area
In the Logo Area you may put a title text or an image and you can optionally use a sub-title text.
The logo image maximum height can be set from assets/less/theme_variables.less
if you use LESS. If you use CSS, go to your assets/css/style.css
file and locate the following code and change the max-height to the pixels you wish. The width will adapt proportionally.
Title Text Logo
Just Image Logo
Image Logo and Sub-Title
The Menu
You can study its structure by simply looking at the code of any template HTML file of Medicus that has a menu.
The dropdown menus open on click by default or on hover if you add class .hover_menu
to the ul.main_menu
.
If you want your dropdown menu to split into 2 columns, just add class="two-column dropleft"
to the appropriate li
tag. "dropleft" can also be "dropright"
if you wish.
The menu is transformed on mobile devices. To set the width below which the menu will be transformed (aka "The BreakPoint"), you have to go to assets/css/style.css
and change the corresponding media query number to fit your needs.
Head Media Panel Section
In the Head Panel Section you may put a Slider, a Background Photo or Color with optional title & subtitle, a Google Map or you may just decide not to include it at all. It has a variable height that you can set with LESS or CSS.
Heading Group (.hgroup)
The Heading Group Items (Title and Subtitle) can be styled with helper color-scheme classes such as ".dark_section" or ".transparent-film" as well as with the special
class diagonal-bgcolor-trans
that is responsible for the angled effect.
Slider and its Captions
The Slider that you can find on the Head Panel area of the Home page, is powered by OWL Carousel 2. You can setup various settings
that control its looks by going to assets/js/config.js
The slider on the home page has it own responsive, specific ratio dimensions that are set by the special .ratio_slider
class.
This can be changed to our other ratios like .ratio_16-9
, .ratio_2-1
etc.
If you want a Full-Window-Height slider, check out the markup on the Onepager.
The captions of each slide can be styled in 2 basic ways, by adding the caption-fancy
or caption-flat
classes.
You can also put them on the left, right or center of the background bya adding the apprortiate class, e.g. caption-right
. Captions
can be animated too, by adding the class you like.
Google Maps
Medicus uses the Google Maps Api v3 to show a google map on the head panel. You can find the markup and example on the contact page. In order to configure Google Maps, open the file /assets/js/config.js and search for the themeConfig["GOOGLE_MAPS"] section. All of the configuration settings, such as Latitude, Longitude, Map Type, etc. can be found there. You can set multiple settings for multiple maps, either across different pages or on the same one.
Getting the coordinates of a place
- Open Google Maps.
- Right-click the place or area on the map.
- Select What's here?
- Under the search box, an info card with coordinates will appear.
See Google Maps Help
Main Area & Design elements
The "Powerful" Section Element
The section
element is very powerful, flexible and plays a very important role in building the layout of your pages. By assigning the apropriate classes to it you can style its contents
in many ways.
Section Headings Group Element .section_header
The section_header
element consists of a title h2 to h4 and a subtitle p. There are 3 styles for this element that can be
assigned alongside the main class. The available classes are: 1) .fancy 2) .elegant and 3) .thin
Particles Effect
You can enable a cool Particles background effect on each section, by adding the .particles-js class. Checkout the demo page to see how each colored section looks with the Particles Effect turned on.
3D Links Hover Effect
If you want to enable a cool 3D effect on your links, all you need to do is add a .roll class
to your anchor
tag elements:
The Portfolio Grid
The Portfolio Grid element currently supports the following types of grid elements: Images, Youtube videos, Vimeo videos, DailyMotion videos, and External links.
You'll need to include two sources for each grid element, in order for it to display a thumbnail and a lightbox image/video or an external link. Here is how you setup each grid element type:
- Images: place the image to be displayed inside the <a> tag and the thumbnail image inside the figure tag as a background image URL: