Show Grid
Classes

ALUX · The Fast HTML5 Framework for Awesome Light User Experience

ALUX is a Lightweight Framework (20K) for Creating Super-Fast and Beautifully Responsive Web Apps.

The Framework is built with HTML/CSS and pure Javascript.
Dependencies Free, no jQuery but with a wide range of features:
Grids, Sliders, Menus, Animations, Typography, Forms, Buttons & more.

Easy, Light, Fast, Flexible.
Examples: One Page Landing - Home with Slider

DOWNLOAD Git Hub

See This Example

Usage

Once you have downloaded ALUX, the first thing you need to do is include the CSS and the JavaScript.

CSS
<head>
    <link rel="stylesheet" href="path/to/alux.min.css">
</head>
Javascript
<script src="path/to/alux.min.js"></script>
Icon Svg

After this add arrow.svg in the project folder. (used in menu & slider)

01. Multiple Grids

The grid system use fractions to define column widths within the grid. For example: 1/2 of the width is .col-1-2. You can set 2/3/4/5/8 Columns Grid.

1/2 .col-1-2
1/2 .col-1-2
1/3 .col-1-3
2/3 .col-2-3
1/4 .col-1-4
3/4 .col-3-4
1/5 .col-1-5
4/5 .col-4-5
1/8 .col-1-8
7/8 .col-7-8
<div class="grid">
  <div class="col-1-2">
        1/2
  </div>
  <div class="col-1-2">
       1/2
  </div>
</div>

02. HTML5 Structure

Add classes to HTML5 Tag for light and (almost) semantic markup.

2/3 article .col-2-3
<div class="grid">
<article class="col-2-3">
2/3 article
</article>
<aside class="col-1-3">
1/3 sidebar
</aside>
</div>

03. Full Width Grid

For a grid using the full width of the screen, use:

1/2 .col-1-2
1/2 .col-1-2
<div class="grid full">
  <div class="col-1-2">
     1/2
  </div>
  <div class="col-1-2">
    1/2
  </div>
</div>

04. No paddding Full Width Grid

For a full width grid with no padding, use:

1/2 .col-1-2
1/2 .col-1-2
<div class="grid no-pad full">
  <div class="col-1-2">
    1/2
  </div>
  <div class="col-1-2">
     1/2
  </div>
</div>

05. Push Columns

ALUX allows you to push columns in every base grid. The push system works on both Tablet and Desktop.

3/4 .col-3-4 push-1-4
5/8 .col-5-8 push-3-8
<div class="grid">
  <div class="col-3-4 push-1-4">
    3/4
  </div>
</div>

06. Push & Pull Columns

You can push & pull columns in every base grid. The pull system works on both Tablet and Desktop.

Content .col-3-4 push-1-4
Sidebar .col-1-4 pull-3-4
<div class="grid">
  <div class="col-3-4 push-1-4">
    Content
  </div>
  <div class="col-1-4 pull-3-4">
    Sidebar
  </div>
</div>

07. Mobile Options (try resize the Screen)

The columns on Smartphone are 100% of the width. The columns on Tablet are the same of the desktop.
You can overwrite the default width of a columns on the Smartphone & Tablet view by using the following classes: .sma-% and .tab-% (% => 25, 33, 50, 66, 100).
For example: tab-33 sma-50

1/4 .col-1-4 tab-100
1/4 .col-1-4 tab-100
1/4 .col-1-4 tab-50 sma-50
1/4 .col-1-4 tab-50 sma-50
<div class="grid">
  <div class="col-1-4 tab-100">
    1/4
  </div>
  <div class="col-1-4 tab-100">
    1/4
  </div>
  <div class="col-1-4 tab-50 sma-50">
    1/4
  </div>
  <div class="col-1-4 tab-50 sma-50">
    1/4
  </div>
</div>

08. Push Mobile (try resizing the Screen)

You can overwrite the normal push on Tablet with the class .tab-push-%, on Smartphone with the class .sma-push-% . (% => 25, 33, 50, 66, 100).
For example: tab-push-33 sma-push-50

1/4 .col-1-4 tab-100
1/4 .col-1-4 tab-50 tab-push-50
1/4 .col-1-4 tab-100 sma-33 sma-push-66
1/4 .col-1-4 tab-50
<div class="grid">
  <div class="col-1-4 tab-100">
    1/4
  </div>
  <div class="col-1-4 tab-50 tab-push-50">
    1/4
  </div>
  <div class="col-1-4 tab-100 sma-33 sma-push-66">
    1/4
  </div>
  <div class="col-1-4 tab-50">
    1/4
  </div>
</div>

09. Grid No Col

You can set a grid with no columns to contain any content you like:

No Colums only the container .grid .no-col
<div class="grid no-col">
  No Colums only the container
</div>

<div class="grid no-pad-menu">
  <div class="nav-wrap">
    <div class="nav-header">
      <a href="#" class="logo">ALUX</a>
      <div class="tog" data-target="menu-sub">
        <span class="animate"></span>
        <span class="span-middle animate"></span>
        <span class="animate"></span>
      </div>
    </div>
    <nav>
      <ul id="menu-sub" class="primary">
        <li class="dropdown">
          <a href="#" data-toggle="dropdown">Products <div class="arrow animate"></div></a>
          <ul class="dropdown-menu">
            <li><a href="">Shoes</a></li>
            <li><a href="">Jacket</a></li>
            <li><a href="">Hat</a></li>
            <li><a href="">Coat</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown">Services <div class="arrow animate"></div></a>
          <ul class="dropdown-menu">
            <li><a href="">Delivery</a></li>
            <li><a href="">Support</a></li>
            <li><a href="">Customize</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

11. Full Width Menu in Grid

For a full width menu, ensure that the grid is full width (see point .03)

<div class="nav-wrap">
  <div class="grid no-pad-menu">
    <div class="nav-header">
     ...
    </div>
    <nav>
      <ul id="menu-sub-2" class="primary">
       ....
      </ul>
    </nav>
  </div>
</div>

12. Typography

The typography system is simple. You can use seven classes to change the format of your text.

Gigantic

Header one

Header two

Header three

Header four

Header five
Header six

  .gigantic   { font-size: 110px; line-height: 1.09; letter-spacing: -2px; }
  .huge, h1   { letter-spacing: -1px; font-size: 48px; line-height: 1.05; }
  .large, h2  { font-size: 32px; line-height: 1.14; }
  .bigger, h3 { font-size: 26px; line-height: 1.38; }
  .big, h4    { font-size: 22px; line-height: 1.38; }
  .normal, h5 { font-size: 18px; line-height: 1.38; }
  .small, h6, small { font-size: 14px; line-height: 1.2; }


Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997


Tables

Employee Salary
Mario Rossi $1M Nulla facilisi. ligula lacus.
Matteo Verdi $1000K Lorem nulla lacinia scelerisque lacus lacus.
Simone Bianchi $10M Ipsum dot sia facilisi. ligula lacinia scelerisque tempor, lacus lacus.
Francesco Brambilla $10000B Facilisi. ligula lacinia lacus lacus.

Unordered Lists Nested


Paragraph

Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam.

Link

This is an example of a link.


13. Slider

The Slider is based on the super lightweight Wallop Library. Which allows you to add various slide effects and options. For more information, see the Wallop Docs.


Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Previous
Next
Html
 <div class="Wallop basic-slider Wallop--slide">
  <div class="Wallop-item">
    <img src="img/image-1.jpg" class="img-res">
    <div class="Wallop-caption">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="Wallop-item">
    <img src="img/image-2.jpg" class="img-res">
    <div class="Wallop-caption">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <div class="Wallop-arrow Wallop-buttonPrevious"><div class="arrow">Previous</div></div>
  <div class="Wallop-arrow Wallop-buttonNext"><div class="arrow">Next</div></div>
</div>
Javascript
<script>
    var basicSliderEl = document.querySelector('.basic-slider');
    var basicSlider = new Wallop(basicSliderEl, {
      autoplay: 5500
    });
</script>

14. Form

All elements in the form are full width.


15. Buttons

The button have one size. To make a button use the class .button

Button

  <a href="#" class="button"> Button</a>
  

16. Animations

With the class .animate you can animate all css properties. For example background-color in the buttons.

Button

  <a href="#" class="button animate"> Button</a>
    

17. Responsive Images

To make images fully responsive use the class: .img-res

New York City

  <img class="img-res" src="image.jpg" alt="New York City">
    

18. Lines & Spacer

To spacer the content you can use hr tag or hr tag with class .spacer for transparent hr.




  <hr class="spacer">
  

19. Margin

To easily add margin to an element you can use the .margin-bottom or .margin-top classes.

Element with margin top.
Element with margin bottom.
Element with margin top.

  <div class="margin-top">Element with margin top.</div>
  <div class="margin-bottom">Element with margin bottom.</div>
  <div class="margin-top">Element with margin top.</div>
  

20. Text Align

You can use .text-left, .text-center or .text-right class to align text easily.

Element with text left.

Element with text center.

Element with text right.


  <p class="text-left">Element with text left.</p>
  <p class="text-center">Element with text center.</p>
  <p class="text-right">Element with text right.</p>