Panel

panel-width - default adaptive (100%)
panel-height - default adaptive (100%)
panel-color - default #000 (black)

<div class="ascii-panel" panel-width="300" panel-height="100" panel-color="#000">
    <p>Content here</p>
</div>                

Panel result:

Divider

divider-width - default adaptive (100%)
divider-color - default #000 (black)

<div class="ascii-divider" divider-width="300" divider-color="#000"></div>

Divider result:

Button

btn-label - button label

<button class="ascii-btn" btn-label="Button"></button>

Button result:

Input

<div class="ascii-panel" panel-height="34"><input class="ascii-input" placeholder="Input text..." type="text"></div>

Input result:

Hello World / Ascii Content

<div class="ascii-content" id="hello-world">
    <script>
        var ascii = new Ascii();
        $("#hello-world").html(ascii.getHelloWorld());
    </script>
</div>                

Hello World result:

Adaptive Blocks

.row - container cols
.col s12 - full width in mobile (Small)
.col m12 - full width in tablet (Medium)
.col l12 - full width in PC (Large)

<div class="row">
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s1 m1 l1">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
</div>
<div class="row">
    <div class="col s4 m4 l4">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s4 m4 l4">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
    <div class="col s4 m4 l4">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
</div>
<div class="row">
    <div class="col s12">
        <div class="grey lighten-2" style="height: 10px"></div>
    </div>
</div>                

Adaptive Blocks result: