Using Lambda

How to create and modify the theme's content.

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Page Layout

Top bar

Optionally you can add a top bar on each page, if you add this markup after the <body>.

<div class="container">
    <div class="top top-left">
        add content for the left side of the topbar
    </div>
    <div class="top top-right">
        add content for the right side of the topbar
    </div>
</div>

Feel free to add what you want inside the right and left divs.


To create a page with a sidebar use the following markup

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        Main content
      </div>
      <div class="col-md-3 sidebar">
        <div class=”sidebar-widget”>
          <h3 class=”sibebar-header”>
            widget content
          </h3>
        </div>
        <div class=”sidebar-widget”>
          <h3 class=”sibebar-header”>
            widget content
          </h3>
        </div>
      </div>
    </div>
  </div>
</section>

Lambda supports search, categories, tag cloud, recent posts, archive, text and twitter widgets (by using the classes widget_search, widget_categories, widget_tag_cloud, widget_recent_entries, widget_archive, widget_text and widget_oxy_twitter classes), but you can use any type of content on your sidebar.

To change to left sidebar just reverse the order of the .col-md-9 div and the .col-md-3 div element in the above markup.

sidebar


Page Content

The content <div id="content" role="main"> ...</div> area hosts the main content of the theme. It is divided in sections to visually and semantically separate the content.


The footer area <footer id="footer"> ... of the page contains the page's footer and requires the following markup

<footer id="footer" role="contentinfo">
  <section class="section">
    <div class="container">
      footer content here
    </div>
  </section>
<footer>

footer

If you want to setup your footer's columns use the following markup

<div class="row">
    <div class="col-md-3">
        add content here
    </div>
    <div class="col-md-3">
        add content here
    </div>
    <div class="col-md-3">
        add content here
    </div>
    <div class="col-md-3">
        add content here
    </div>
</div>

This will create a 4-column footer. Use a 3 column footer by adding 3 divs with a col-md-4 class, or 2 divs with a col-md-6 for a 2 column layout.


Boxed Layout

Lambda HTML can be set with a boxed layout. In order to set a boxed layout, you need to add the layout-boxed class to the body. In addition, the background image is added as an inline style to the body as well.

<body class="layout-boxed" style="background-image: url(your_image_url.png);">

boxed layout

The header area <div id="masthead">...</div> of the page contains the page Logo and the navigation list. The navigation follows bootstrap's responsive rules so in smaller screens it will collapse to a dropdown menu. You can read more about the markup of the navigation in bootstrap’ s website.

A sticky menu is a menu that scrolls along with the page. Setting a sticky menu is easy, try following these steps:

  1. Add the navbar-sticky class to the <div> as in

     <div id="masthead" class="navbar navbar-sticky" role="banner">
  2. Open theme.js in assets/js folder and locate this code

       var oxyThemeData = oxyThemeData || {
           navbarHeight : 100,
           navbarScrolled : 70,
           navbarScrolledPoint : 200,
           menuClose : 'off',
           scrollFinishedMessage : 'No more items to load.',
           hoverMenu : {
               hoverActive : false,
               hoverDelay : 1,
               hoverFadeDelay : 200
           },
           siteLoader: 'on'
       };

    Note: You can set the options individually for each page by adding this script in the desired page

     <script type="text/javascript">
         var oxyThemeData = oxyThemeData || {
           navbarHeight : 100,
           navbarScrolled : 70,
           navbarScrolledPoint : 200,
           menuClose : 'off',
           scrollFinishedMessage : 'No more items to load.',
           hoverMenu : {
               hoverActive : false,
               hoverDelay : 1,
               hoverFadeDelay : 200
           },
           siteLoader: 'on'
         };
     </script>

    You can now have a different menu style for each page. sticky

Header Styles

Lambda HTML offers 6 different layouts for your header. Use the markup provided in the next section to fix your header style. The available options are:

Logo Left Menu Right

When using this style the Logo Image and Logo Text are positioned on the left side of the header, and the Navbar on the right. On the right side of the Navbar is the widget position.

  <div id="masthead" class="menu navbar navbar-static-top navbar-sticky header-logo-left-menu-right oxy-mega-menu" role="banner">
      <div class="container">
          <!-- setting a logo -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".main-navbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a href="../index.html" class="navbar-brand">
                  <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
              </a>
          </div>
          <div class="nav-container">
              <!-- setting a logo end-->
              <nav class="collapse navbar-collapse logo-navbar  main-navbar navbar-left" role="navigation">
                  <div class="menu-container">
                      <ul class="nav navbar-nav navbar-right">
                          <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                              <ul class="dropdown-menu">
                                  <li><a href="index.html">v1. Home-Classic</a></li>
                                  <li><a href="business.html">v2. Home-Business</a></li>
                                  ...
                              </ul>
                          </li>
                          ...
                      </ul>
                  </div>
              </nav>
          </div>
      </div>
  </div>

header

Logo Right Menu Left

When using this style the Logo Image and Logo Text are positioned on the right side of the header, and the Navbar on the left. On the right side of the Navbar there is the widget position.

  <div id="masthead" class="menu navbar navbar-static-top navbar-sticky header-logo-right-menu-left oxy-mega-menu" role="banner">
      <div class="container">
          <!-- setting a logo -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".main-navbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a href="../index.html" class="navbar-brand">
                  <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
              </a>
          </div>
          <div class="nav-container">
              <!-- setting a logo end-->
              <nav class="collapse navbar-collapse logo-navbar  main-navbar navbar-left" role="navigation">
                  <div class="menu-container">
                      <ul class="nav navbar-nav">
                          <li class="dropdown ">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                              <ul class="dropdown-menu dropdown-menu-left">
                                  <li><a href="index.html">v1. Home-Classic</a></li>
                                  <li><a href="business.html">v2. Home-Business</a></li>
                                  ...
                              </ul>
                          </li>
                          ...
                      </ul>
                  </div>
              </nav>
          </div>
      </div>
  </div>

header

Logo Right Menu Below

When using this style the Logo Image and Logo Text are positioned on the right side of the header, and the Navbar below. On the right side of the Navbar there is the widget position.

  <div id="masthead" class="menu navbar navbar-static-top navbar-sticky header-logo-right-menu-below oxy-mega-menu" role="banner">
      <div class="logo-navbar container-logo">
          <div class="container">
              <div class="logo-sidebar"></div>
              <div class="navbar-header">
                  <button class="navbar-toggle collapsed" data-target=".main-navbar" data-toggle="collapse" type="button">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="../index.html">
                      <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
                  </a>
              </div>
          </div>
      </div>
      <div class="container">
          <div class="nav-container clearfix">
              <nav class="collapse navbar-collapse logo-navbar  main-navbar navbar-right" role="navigation">
                  <div class="menu-container">
                      <ul class="nav navbar-nav">
                          <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                              <ul class="dropdown-menu">
                                  <li><a href="index.html">v1. Home-Classic</a></li>
                                  <li><a href="business.html">v2. Home-Business</a></li>
                                  ...
                              </ul>
                          </li>
                          ...
                      </ul>
                  </div>
                  <div class="menu-sidebar">
                  </div>
              </nav>
          </div>
      </div>
  </div>

header

Logo Left Menu Below

When using this style the Logo Image and Logo Text are positioned on the left side of the header, and the Navbar below. On the right side of the Navbar there is the widget position.

  <div id="masthead" class="menu navbar navbar-static-top navbar-sticky header-logo-left-menu-below oxy-mega-menu" role="banner">
      <div class="logo-navbar container-logo">
          <div class="container">
              <div class="navbar-header">
                  <button class="navbar-toggle collapsed" data-target=".main-navbar" data-toggle="collapse" type="button">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="../index.html">
                      <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
                  </a>
              <div class="logo-sidebar"></div>
              </div>
          </div>
      </div>
      <div class="container">
          <div class="nav-container clearfix">
              <nav class="collapse navbar-collapse logo-navbar  main-navbar navbar-left" role="navigation">
                  <div class="menu-container">
                      <ul class="nav navbar-nav">
                          <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                              <ul class="dropdown-menu dropdown-menu-left">
                                  <li><a href="index.html">v1. Home-Classic</a></li>
                                  <li><a href="business.html">v2. Home-Business</a></li>
                                  ...
                              </ul>
                          </li>
                          ...
                      </ul>
                  </div>
                  <div class="menu-sidebar">
                  </div>
              </nav>
          </div>
      </div>
  </div>

header

Logo Center Menu Below

When using this style the Logo Image and Logo Text are positioned on the center of the header, and the Navbar below. On the right side of the Navbar there is the widget position.

  <div id="masthead" class="menu navbar navbar-static-top navbar-sticky header-logo-center-menu-below oxy-mega-menu" role="banner">
      <div class="logo-navbar container-logo">
          <div class="container">
              <div class="navbar-header">
                  <button class="navbar-toggle collapsed" data-target=".main-navbar" data-toggle="collapse" type="button">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="../index.html">
                      <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
                  </a>
              <div class="logo-sidebar"></div>
              </div>
          </div>
      </div>
      <div class="container">
          <div class="nav-container clearfix">
              <nav class="collapse navbar-collapse main-navbar" role="navigation">
                  <div class="menu-container">
                      <ul class="nav navbar-nav">
                          <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                              <ul class="dropdown-menu dropdown-menu-left">
                                  <li><a href="index.html">v1. Home-Classic</a></li>
                                  <li><a href="business.html">v2. Home-Business</a></li>
                                  ...
                              </ul>
                          </li>
                          ...
                      </ul>
                  </div>
                  <div class="menu-sidebar">
                  </div>
              </nav>
          </div>
      </div>
  </div>

header

Logo Left Menu Sidebar

When using this style the Logo Image and Logo Text are positioned on the left side of the header. The Menu pops up inside a sidebar that expands when you click on the expand button on the right side of the navbar. Bellow the menu is the widget position.

  <div id="masthead" class="menu navbar navbar-static-top navbar-sticky header-logo-left-sidebar-right oxy-mega-menu text-caps" role="banner">
      <div class="logo-navbar container-logo">
          <div class="container">
              <div class="navbar-header">
                  <button class="navbar-toggle collapsed" data-target=".main-navbar" data-toggle="collapse" type="button">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="../index.html">
                      <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
                  </a>
              </div>
          </div>
      </div>
  </div>
  <nav id="navbar-slide" class="collapse navbar-collapse main-navbar menu" role="navigation">
      <a href="#" class="navbar-brand">
          <img src="assets/images/logo.png" alt="Lambda">
      </a>
      <div class="menu-container">
          <ul class="nav navbar-nav">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
                  <ul class="dropdown-menu dropdown-menu-left">
                      <li><a href="index.html">v1. Home-Classic</a></li>
                      <li><a href="business.html">v2. Home-Business</a></li>
                      ...
                  </ul>
              </li>
              ...
          </ul>
      </div>
      <div class="menu-sidebar">
      </div>
  </nav>

header header

Important! In order for the slide menu to work, you need to add the slide-menu class to the bodytag.

Header options

In the theme.js located in the assets/js folder you can locate this script at the top of the file

var oxyThemeData = oxyThemeData || {
    navbarHeight : 100,
    navbarScrolled : 70,
    navbarScrolledPoint : 200,
    menuClose : 'off',
    scrollFinishedMessage : 'No more items to load.',
    hoverMenu : {
        hoverActive : false,
        hoverDelay : 1,
        hoverFadeDelay : 200
    },
    siteLoader: 'on'
};
The change of the menu height cannot be altered from the navbarHeight or navbarScrolled options.
  • navbarScrolledPoint: Sets the pixels that need to be scrolled for the menu to change height.
  • menuClose: When using a side menu, when set to on, it closes when clicking on an item.
  • hoverActive: When true the menu opens on hover, when false the menu opens on click.
  • hoverDelay: Delay in seconds before the hover menu closes after moving mouse off the menu.
  • hoverFadeDelay: Delay of the Fade In/Fade Out animation.

Transparent header

Another amazing feature that you can enable in Lambda is the transparent header. In order to have a transparent header you need to add the transparent-header class to the <body> as in

<body class="transparent-header">  ...  </body>

header

In addition, the user can load a separate logo image that will load once he scrolls down and the menu becomes opaque. The initial image will load back when the user scrolls to the top of the page and the menu becomes transparent again.

headerIn order to do that, you need to add some Css rules to your skin file.

// Transparent logo switch
@media (min-width: 992px) {
    .transparent-header #masthead .navbar-brand {
        background-image: url('../../assets/images/restaurant/logo-transparent.png');
    }
    .transparent-header #masthead .navbar-brand img {
        visibility: hidden;
    }
    .transparent-header #masthead.navbar-scrolled .navbar-brand {
        background-image: none;
    }
    .transparent-header #masthead.navbar-scrolled .navbar-brand img {
        visibility: visible;
    }
}

Add the image that you want to be shown when the menu is transparent, in the first rule, replacing 'logo-transparent.png' The image that will be shown once the menu is opaque, is the one that the user has set inside the menu markup, i.e

<a href="../index.html" class="navbar-brand">
    <img src="assets/images/lambda.gif" alt="One of the best themes ever">Lambda
</a>

To take a look at the different header styles that Lambda HTML supports, click here.

Special menu items

  1. A menu item can have the look of a button if you add the nav-highlight class to the <li></li> that holds the item e.g.

     <li class="nav-highlight"><a href="your_link">back to normal Lambda</a></li>
  2. Use the same markup but add the nav-highlight-ghost class for a bordered menu button. special
  3. You can add a divider by using the following markup
     <li role="presentation" class="divider"></li>
    special
  4. A menu can have icons next to the each menu item. You can use the font-awesome icons and the following markup to achieve that e.g

     <i class="menu-icon fa fa-photo"></i>

    special

Search widget

The menu comes with a search widget, which has the following markup

<div id="search-4" class="sidebar-widget  widget_search">
    <div class="top-search">
        <form role="search" method="get" id="searchform" action="corporate-index.html">
            <div class="input-group">
                <input type="text" value="" name="s" id="s" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="submit" id="searchsubmit" value="Search">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>
You will have to implement the functionality of the search widget as this is not built in.

Mega Menu

Lambda offers a Mega Menu, if you use the following markup

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown menu-item-object-oxy_mega_menu ">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parent Menu Item Name</a>
        <ul class="dropdown-menu dropdown-menu-left row">
            <li class="dropdown col-md-4 menu-item-object-oxy_mega_columns">
                <strong>Column Title</strong>
                <ul role="menu">
                    <li>
                        <a href="menu_item_link">Name of the menu link</a>
                    </li>
                    ... repeat this for each menu item
                </ul>
            </li>
            ... repeat this for each column(3 columns for col-md-4)
        </ul>
    </li>
</ul>

mega-menu


Sections

Sections are defined using the following HTML5 markup

<section class="section">
    <div class="container">
        Content goes here…
    </div>
</section>

Additional classes can be applied to the section to style the content.

Fullheight sections

A section can be fullheight (have a height at minimum as the screen size) by assigning a class to the section: section-fullheight as in

<section class="section section-fullheight">
    <div class="container">
        Content goes here…
    </div>
</section>

Section options

The following options can be used to setup your section

  1. section-text-shadow adds a text shadow to all the text in this section.
  2. section-inner-shadow adds an inner shadow to the inside of this section.
  3. container-fullwidth added instead of container in the <div> inside the section will make it fullwidth.
  4. Using the following markup will add a background overlay (see image above)

     <div class="background-overlay grid-overlay-20" style="background-color: rgba(0,0,0,0.2);"></div>

    Changing the grid-overlay class from grid-overlay-0 to grid-overlay-90 will set the overlay pattern image. Setting the rgba(0,0,0,0.2) sets the color overlay, with the last attribute(0.2) representing the opacity ranging from 0(transparent) to 1.

  5. If a user wants to add a background image with background overlay, it is advised to use this markup

     <section class="section section-text-shadow section-inner-shadow">
         <div class="background-media" style="background-image:url('yourUrl');background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position:center 0%;"></div>
         <div class="background-overlay grid-overlay-20 " style="background-color: rgba(0,0,0,0.2);"></div>
         <div class="container-fullwidth">
             Content goes here…
         </div>
     </section>

    This will add a background image fixed, aligned in the center. sections

  6. If a user wants to create a section with a video as background, this markup should be used

     <div class="background-media">
         <video poster="your_poster" style="width: 100%; height: 100%;" loop autoplay class="section-background-video">
             <source type="video/mp4" src="your_audio.mp4">
             <source type="video/webm" src="your_audio.webm">
             <source type="video/ogg" src="your_audio.ogg">
         </video>
     </div>
  7. A section with a background image can utilize the parallax effect, which will add a great sense of interactivity between the user and the website. Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move slower than foreground images, creating an illusion of depth and adding to the immersion. For the parallax effect to take place, two data attributes must be added in the <div> of the background media, e.g

     <div class="background-media" style="background-image: url(background_img);" data-start="background-position: 50% 0px" data-70-top-bottom="background-position: 50% -90px">
     </div>

    The background-position element of the data-start attribute has two parameters. The first parameter defines the alignment of the image along the horizontal axis(50% = center). The second parameter defines the movement along the axis as the user scrolls down(0 = no movement). The data-top-bottom attribute works the same way for the vertical axis.

    Click here to visit the skrollr plugin's page on Github for a more detailed description.

Content Vertical Alignment

A new option of Lambda that makes content building easier is the Section Content Vertical Alignment option. You can enable that by adding to the <row>the class vertical-middle for the content to be aligned with the middle of the section, vertical-bottom for it to be aligned with the bottom or no class to be aligned with the top of the section. That way you no longer have to worry about realigning your content every time you add or remove an element, this will automatically be taken care of by this option. E.g.

<section class="section">
    <div class="container">
        <div class="row vertical-middle">
            <div class="col-md-6">
                <img alt="" src="some_img">
            </div>
            <div class="col-md-6">
                <p>I am text block.</p>
            </div>
        </div>
    </div>
</section>
Keep in mind that the alignment will be applied to all the elements of that section.

section


Headers

Headers are most commonly used in the beginning of a section to create an impressive title. Feel free though to use them wherever you like inside your sections. The following markup should be used as an example for a header with a divider and a subheader

<h1 class="text-center element-top-70 os-animation big hairline" data-os-animation="fadeIn" data-os-animation-delay="0s">Our latest work</h1>
<div class="divider-border divider-border-center element-top-10 element-bottom-10 os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.1s" style="height:3px;">
    <div class="divider-border-inner" style="width:60px;"></div>
</div>
<p class="lead text-center center element-bottom-40">We put all our 25 years of design experience into every project.<br>
Take a look at some of our latest work.</p>
    <h1 class="hyper hairline">
      we are a digital <strong>design</strong> agency with a twist
    </h1>
    <p class="lead">subtitle</p>

The following options can be used to setup the header:

  1. For the size of the header's font, we are assigning the big class (36px), the bigger class (48px), the super class (60px), or the hyper (96px) class.
  2. hairline sets the font weight of the section. Alternatively, you can set it to be regular, black, bold or light.
  3. <p></p> will be used as subtitle. Adding the lead class will increase the font size.
  4. See the fade out effect section to learn how to add the fade out effect on your headers. header

One Page website

Lambda is easy to build as an one-page website. In order to achieve that you need to make sure of two things. Firstly, you need to assign to the sections that you want to scroll to a specific unique id as in

<section class="section" id="home">
...
</section>

Secondly, you need to make sure that each menu item links to the desired section, by assigning to the href attribute the # symbol followed by the id of the section as in

<a class="dropdown-toggle" title="Home" href="#home" data-toggle="dropdown">Home</a>

As a result, when you click on the Home menu item, you will be scrolled to the home section of the page. For example, if we had a page with three sections, it would look like this

<body>
    <div id="content">
        <article>
            Add your menu here
            <section class="section" id="home">
            ...
            </section>
            <section class="section" id="services">
            ...
            </section>
            <section class="section" id="portfolio">
            ...
            </section>
        </article>
    </div>
</body>

Now you have to connect your menu item links to your sections, so you will make the href attribute of each <a> point to your sections. You should build your menu according to the Menu Header section. For the above example, replace this chunk of code

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home</a>
        <ul class="dropdown-menu">
            <li><a href="index.html">v1. Home-Classic</a></li>
            <li><a href="business.html">v2. Home-Business</a></li>
            ...
        </ul>
    </li>
    ...
</ul>

with this

<ul class="nav navbar-nav navbar-right">
    <li class="active current-menu-item"><a href="#home">Home</a></li>
    <li class=""><a href="#services">Services</a></li>
    <li class=""><a href="#portfolio">Portfolio</a></li>
</ul>

Now you have menu items that link to your sections and the user will scroll to each section when clicking on the respective link.

Any link can use the smooth scroll feature, as long as it references the id of the section that needs to be scrolled to. Also, the scroll-to and scroll-to-id classes need to be assigned to the element. e.g
<a href="#home" class="scroll-to scroll-to-id">
    Click me to scroll to home section
</a>

Common classes

If you want to set margins between elements, you can use the following classes wherever that you want: element-top-10, element-normal-10, which add 10pxs of padding to the top/bottom respectively. Moreover, replacing 10 with 20,30,40,50,60,70,80,90 or 100, with give you the corresponding margin.
Some more classes you can use are:

  • section-text-shadow: Adds a text shadow to all the text in this row.
  • section-inner-shadow: Adds an inner shadow to the inside of this row.
  • container-fullwidth: Makes the section fullwidth(used instead of the container class).
  • section-fullheight: Section will vertically cover the entire viewport.

Typography

Text Size

Lambda offers a variety of classes that will make your typography stand out. In order to set the font size, we can use the big class (36px), bigger class (48px), the super class (60px), or the hyper (96px) class. E.g

<h1 class="text-center normal">This is a normal sized title</h1>

Text Alignment

Lambda offers three classes to align your text left, right or in the center. They are text-left, text-right and text-center respectively.

Text Alignment for Mobiles

Lambda offers three classes to align your text left, right or in the center for mobile devices. They are small-screen-left, small-screen-right and small-screen-center respectively.

Text Weight

Make your text stand out by assigning different weights through these classes: black, bold, regular, light, hairline.

Text Transformations

Assigning the following classes to a text will make them uppercase, lowercase and italic respectively: text-caps, text-lowercase, and text-italic. In addition, assigning the text-none class removes all the transformations that might have been inherited from parent elements.e.g

<h1 class="text-center normal text-caps">This is a normal sized title
    <p class="text-none">this is a subtitle with no transformations</p>
</h1>

Slab Text

Slab Text allows you to create great, big, bold headlines that resize to the viewport width. Slab text gives you the ability to wrap certain combinations of words within your headline so regardless of the viewport size it will remain on the same line. In order to use the slab text effect, you need to wrap your headline inside a <span></span> tag and wrap it all inside an h1-h5 header, i.e

<h1 class="bigtext black element-bottom-10 os-animation" data-os-animation="fadeIn" data-os-animation-delay="0.2s">
  <span>with fat titles</span>
</h1>

slab text

Lambda HTML uses the BigText jQuery plugin. Check out the official website for more info.

Services

If you want to create services you need to use the following markup

<div class="row">
  <li class="col-md-3">
    <div class="box box-round box-small">
      <div class="box-dummy"></div>
      <a class="box-inner grid-overlay-10" href="some_link" target="_self" style="background-color:#e9e9e9;">
        <img src="image_source">
      </a>
    </div>
  </li>
  .
  .
  .
</div>

This will create a list of images. In order to read more on how to add a boxed image, go to shaped images.

Before closing the <li> you can set a header as in

<h3 class="text-center normal bold bordered bordered-small">
    <a href="some_link" target="_self">
    Some header</a>
</h3>

Add then any text that you want

<p class="text-center">
    We have designed this site mobile first so it looks great on mobile devices of all shapes and sizes.
</p>

An alternate design could be

<div class="row">
  <li class="col-md-3">
      <span class="service-simple-image">
          <img src="images/corporate/research.png" alt="Research"/>
      </span>
      <h2>
          Research
      </h2>
      <p>
          Lambda is ultra flexible and lets you create stunning pages easily for any kind of site out of the box. Get started now.
      </p>
  </li>
  .
  .
  .
</div>

Staff member

If you want to create a list of staff members you need to use the following markup

<div class="row staff-list-container list-container">
  add the single staff member markup
</div>

The markup for the staff member should be

<div class="figure fade-in">
  <div class="figure-image">
    <img src="image_url" alt="alt image">
    <div class="figure-overlay">
      <div class="figure-overlay-container">
        <div class="figure-caption text-center">
          <ul class="figure-overlay-icons social-icons social-simple">
              <li>
                  <a href="#" target="_self">
                      <i class="fa fa-facebook"></i>
                  </a>
              </li>
              ... adding more icons
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

stafflist


Portolio items

Lambda's portfolio items offer you a wide variety of options to create a unique style of your work presentation. Read below for a detailed description of what you can achieve. You can create three different Portfolio items. Standard, Gallery and Video.

Setting up the filters

Setting filters is optional, but if you want to use them you can use the following markup

<div class="col-md-12">
    <div class="portfolio-header clearfix">
        <h3 class="portfolio-title pull-left">
            <strong>View /</strong> <span>All</span>
        </h3>
        <div class="portfolio-filters pull-right">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle btn-icon-right btn-sm" data-toggle="dropdown"><b>Sort</b>
                    <span>
                        <i class="fa fa-angle-down"></i>
                    </span>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a class="portfolio-sort" data-sort="default">Default</a></li>
                    <li><a class="portfolio-sort" data-sort="title">Title</a></li>
                    <li><a class="portfolio-sort" data-sort="date">Date</a></li>
                    <li><a class="portfolio-sort" data-sort="comments">Comments</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle btn-icon-right btn-sm" data-toggle="dropdown"><b>Order</b>
                    <span>
                        <i class="fa fa-angle-down"></i>
                    </span>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a class="portfolio-order" data-value="true">Ascending</a></li>
                    <li><a class="portfolio-order" data-value="false">Descending</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle btn-icon-right btn-sm" data-toggle="dropdown"><b>Category</b>
                    <span>
                        <i class="fa fa-angle-down"></i>
                    </span>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a class="portfolio-filter" data-filter="*">All</a></li>
                    <li><a class="portfolio-filter" data-filter=".filter-nature">Nature
                    journal</a></li>
                    <li><a class="portfolio-filter" data-filter=".filter-people">People and
                    more</a></li>
                    <li><a class="portfolio-filter" data-filter=".filter-things">Things</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

portfolioIf you want to set up category filters, you need to set up the data-filter attribute as in

<li><a class="portfolio-filter" data-filter=".filter-nature">Nature
journal</a></li>

Later on, when creating the portfolio item, you will assign to it that filter as class and it will show up when choosing the Nature journal category.


Setting up the portfolio items

Firstly, we wrap all the portfolio items inside this div

<div class="portfolio-container">
    <div class="portfolio masonry no-transition" data-padding="15" data-col-xs="2" data-col-sm="2" data-col-md="3" data-col-lg="3" data-layout="fitRows">
    put the items here....
    </div>
</div>
  • data-padding adds the pixels that you set as padding between the portfolio items.
  • data-col-... sets the columns for each screen size, extra small, small, medium and large.
  • data-layout is either fitRows or masonry, defines the layout of the portfolio items.

The following markup is used to create a standard portfolio item, added inside the previous divs

<div class="masonry-item portfolio-item" data-menu-order="1" data-title="Coffee and Biscuits">
    Add a portfolio image
</div>

Portfolio Images-On hover options

The portfolio image that you can use for the portfolio items should follow this markup

   <div class="figure portfolio-os-animation text-center figcaption-middle normalwidth image-filter-sepia fade-in image-filter-onhover" data-os-animation="fadeIn" data-os-animation-delay="0s">
        <a href="assets/images/uploads/image-03-normal.jpg" class="figure-image magnific" data-links="" target="_self">
            <img src="image_src" alt="Coffee and Biscuits" class="normalwidth">
            <div class="figure-overlay grid-overlay-30">
                <div class="figure-overlay-container">
                    <div class="figure-caption">
                        <h3 class="figure-caption-title">Freshquote co</h3>
                        <p class="figure-caption-description"></p>
                    </div>
                </div>
            </div>
        </a>
    </div>

The options that you can set for a portfolio item are the following:

  1. data-menu-order defines the order that the item will appear on the page.
  2. Image hover effects filters which apply to the image on hover, which are Sepia, Grayscale and Blur. The corresponding classes are image-filter-sepia, image-filter-grayscale and image-filter-blur respectively.
  3. Hover effects filter behaviour defines when to apply the hover effects filter. If the image-filter-onhover class is used, the filter is applied on hover. If the image-filter-invert class is used, the filter is applied on hover out.
  4. Item overlay hover animation which is what animation will be used to reveal the image hover overlay. The effects with their related classes are:
    • Fade in: fade-in
    • Fade From Top: fade-in from-top
    • Fade From Bottom: fade-in from-bottom
    • Fade From Left: fade-in from-left
    • Fade From Right: fade-in from-right
  5. Hover overlay link type is defined by the magnific class(in the <a></a>) for a standard portfolio, the magnific-vimeo for video portfolio item or magnific-gallery for the gallery portfolio item.
  6. Item overlay grid is set with the grid-overlay-... class ranging from grid-overlay-0 to grid-overlay-100 with 10 steps in the middle. This class is put inside the div with the figure-overlay class.
  7. Item overlay icon is used to show on the hover overlay.

portfolio

Masonry

The masonry portfolio is a very cool option and is really easy to set up. All you need to do is add the use-masonry class and the data-layout="masonry" in the wrapping div to enable it, e.g.

 <div class="portfolio-container">
    <div class="portfolio masonry isotope use-masonry" data-padding="15" data-col-xs="2" data-col-sm="2" data-col-md="3" data-col-lg="3" data-layout="masonry">
    put the items here....
    </div>
</div>

When adding the portfolio items, you need to add an extra class to the <div class="masonry-item portfolio-item">...</div> called masonry-normal or masonry-wide as in <div class="masonry-item portfolio-item isotope-item masonry-wide">...</div>

portfolio

masonry-wide doubles the width of the image.
It is highly recommended to use the following image sizes, or keep the same aspect ratio: 1200x800, 600x800, 1200x400

Features

Buttons

Buttons in Lambda follow the bootstrap markup as described on Bootstrap website. What is new in Lambda is the extra icons that we can add on the left or right side of the buttons.

To add a simple icon you can use this markup

<a class="btn btn-primary" href="#">
    <i class="fa fa-comment"></i>
    &nbsp; Comment
</a>

To add a fancy button you can use this markup

<a class="btn btn-lg btn-primary btn-icon-left" href="#">
    Buy it
    <span>
      <i class="fa fa-shopping-cart"></i>
    </span>
</a>

The icon can be put to the right if you change the btn-icon-left to btn-icon-right.


Shaped Images

Lambda offers a great element that you can shape as you want and choose the exact size that fits to your needs. Boxes can be either round, square or rectangle. This is the markup to be used for a round box

<div class="box-round box-big">
  <div class="box-dummy"></div>
  <span class="box-inner">
    <img alt="" data-animation="swing" src="img_src">
  </span>
</div>

To achieve the shape that you wish, you need to replace box-round with box-square or box-rect. In order to change the size of the box, change box-big(200x200) to box-mini(48x48), box-small(78x78), box-medium(100x100) or box-huge(250x250). Also, you can set the background-color of each image by adding some inline styling in the .box-inner <div>.

Instead of an icon you can use an image

<div class="box-round box-big">
  <div class="box-dummy"></div>
  <span class="box-inner" style="background-color:#353b42;">
    <img alt="" data-animation="swing" src="img_src">
  </span>
</div>

boxes

To add an animation effect to the shaped images you can add a wrapping div to the icon/image with the box-animate class and a data attribute data-animation that sets the type of animation that you want e.g.

<div class="box-round box-big">
  <div class="box-dummy"></div>
  <span class="box-inner" style="background-color:#353b42;">
    <div class="box-animate" data-animation="swing">
      <img alt="" data-animation="swing" src="img_src">
    </div>
  </span>
</div>
For a quick look at the available animations you can go to Animations.

Social Icons

You can add social icons using the following markup

  <ul class="social-icons social-simple">
    <li>
      <a href="#">
        <i class="fa fa-twitter"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-facebook"></i>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-pinterest"></i>
      </a>
    </li>
  </ul>

This will add a list of three social icons of a small size. You can change the class social-simple to social-big if you want them to be bigger.


Features Lists

The best way to present a list of important features is with a features list. Use the following markup

<ul class="features-list features-white">
  <li>
    <div class="features-list-icon" style="background-color:#b4d138;">
        <i class="fa fa-gift" style="color:#ffffff;"></i>
    </div>
    <h3>Use lines</h3>
    <p>
        Lambda is designed with the latest technologies so that your website will look sharp and stunning even on high resolution retina displays.
    </p>
  </li>
  .
  .
  .
</ul>

Fancy Blockquotes

You can create a blockquote by using the markup provided by bootstrap's official website.

However, you can have a fancy-blockquote with a shaped image at the bottom if you use the following markup

<blockquote>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <div class="box box-round box-small">
      <div class="box-dummy"></div>
      <div class="box-inner">
          <img width="150" height="150" src="your_image">
      </div>
  </div>
  <footer>
      Jimmy Doe
  </footer>
</blockquote>

On Scroll Animations

All the elements in Lambda can be animated. You can do that by adding the data-os-animation attribute that defines the type of animation to execute and the data-os-animation attribute that defines when the animation effect should take place. Also, the os-animation class should be added.e.g

<div class="figure text-center os-animation" data-os-animation="fadeIn" data-os-animation-delay=".2s">
...
</div>

This element will now animate 0.2 seconds after the user scrolls to it with the fadeIn effect.

For a quick look at the available animations you can go to Animations.
Make sure that you are not using fade out effects along with the on scroll animations.

Fade out effects

When an element leaves a page while the user scrolls along the page, you can add a fade out effect, using the following data attributes:

  • data-start="opacity:1"
  • data-70-top-bottom="opacity:0"
  • data-center="opacity:1"

You can use it for a header as in the following example:

<header class="text-left not-condensed" data-start="opacity:1" data-center="opacity:1" data-70-top-bottom="opacity:0">
    <h1 class="big hairline bordered-normal">
         a multi purpose and powerful HTML theme
    </h1>
</header>
Make sure that you are not using on scroll animations along with the fade out effects.

Bullet Navigation

You can add bullet navigation to your page, making it easier for users to navigate to your sections by clicking to the respective bullet wherever they are on your page. bullet-nav

What you need to do to setup a bullet navigation is really simple. Add an id to any section that you want to have a bullet leading to it. Then you need to add this code to the bottom of the page

<div class="bullet-nav">
    <ul></ul>
</div>

Now there should be a bullet related to every section that has an id.


Scroll-to buttons

You can scroll to a section using a link, if you make the href attribute of the link point to the section. You also need to assign the scroll-to and scroll-to-id classes. For example, if the section's id is services, the link would be something like

<a href="#services" class="scroll-to scroll-to-id">
    <img src="your_image">
</a>

If you want to use a font-awesome below use the following markup

<a href="#services" class="scroll-to scroll-to-id place-bottom">
    <i class="fa fa-angle-down"></i>
</a>

Use the class place-bottom to place the icon to the bottom of the section.

scroll-to-button


Charts

The charts in Lambda are created with the Chartjs library. Please visit the official website for more info. Also, checkout the Corporate charts of Lambda.