Components

Since this theme is based on Bootstrap, it includes all Bootstrap itself does, but with new aesthetics and some extra classes.

Avatars

... ... ...
                                
                                    <img class="avatar avatar-sm" src="..." alt="...">
                                    <img class="avatar avatar-md" src="..." alt="...">
                                    <img class="avatar avatar-lg" src="..." alt="...">
                                
                            

Buttons

                                
                                    <button class="btn btn-primary">Primary</button>
                                    <button class="btn btn-outline-dark">Outline</button>
                                
                            

Forms

                                
                                    <form>
                                        <div class="form-row align-items-center">
                                            <div class="col-md-4">
                                                <label class="sr-only" for="inputName">First name</label>
                                                <input type="text" class="form-control border-secondary font-italic mb-3" id="inputName" placeholder="First Name">
                                            </div>
                                            <div class="col-md-4">
                                                <label class="sr-only" for="inputEmail">Email address</label>
                                                <input type="email" class="form-control border-secondary font-italic mb-3" id="inputEmail" placeholder="Email Address">
                                            </div>
                                            <div class="col-md-auto">
                                                <button type="submit" class="btn btn-dark mb-3">Sign Up</button>
                                            </div>
                                        </div>
                                    </form>
                                
                            

Icons

Focus includes Material icons. You can change the icon size using .icon-{size}.

photo_camera photo_camera photo_camera photo_camera photo_camera
                                
                                    <i class="material-icons">photo_camera</i>
                                    <i class="material-icons icon-lg">photo_camera</i>
                                    <i class="material-icons icon-2x">photo_camera</i>
                                    <i class="material-icons icon-3x">photo_camera</i>
                                    <i class="material-icons icon-5x">photo_camera</i>
                                
                            

Images

Styles for image thumbnails and hover effects.

Thumbnail

...
                                
                                    <img src="..." alt="..." class="border-secondary img-thumbnail">
                                
                            

Rising

...
                                
                                    <figure class="img-rising d-inline-block">
                                        <img src="..." alt="..." class="img-fluid">
                                    </figure>
                                
                            

Scale

...
                                
                                    <figure class="img-scale d-inline-block">
                                        <div class="img-wrap">
                                            <img src="..." alt="..." class="img-fluid">
                                        </div>
                                    </figure>
                                
                            

Color

...
                                
                                    <figure class="img-color d-inline-block">
                                        <img src="..." alt="..." class="img-fluid">
                                    </figure>
                                
                            

Overlay

...
View Project
                                
                                    <figure class="img-overlay d-inline-block">
                                        <img src="..." alt="..." class="img-fluid">
                                        <div class="img-hover">
                                            <span class="img-text">View Project</span>
                                        </div>
                                    </figure>
                                
                            

Borders

Border width

Change the border width easily using .border-{size}.

                                
                                    <span class="border border-dark border-1"></span>
                                    <span class="border border-dark border-2"></span>
                                    <span class="border border-dark border-3"></span>
                                
                            

Responsive borders

Add or remove left and right borders based on Bootstrap breakpoints.

Excepteur sint occaecat aute

Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat.

                                
                                    <div class="row">
                                        <div class="col-lg border-lg-right border-dark pr-lg-5">
                                            <h3 class="h2 mb-4 text-lg-right">Excepteur sint occaecat aute</h3>
                                        </div>
                                        <div class="col-lg pl-lg-5">
                                            <p class="lead">Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat.</p>
                                        </div>
                                    </div>
                                
                            

Text

Font family

Quickly change the font family (serif/sans-serif) of text.

Serif font

Sans serif font

                                
                                    <p class="font-serif">Serif font</p>
                                    <p class="font-sans-serif">Sans serif font</p>
                                
                            

Colcade

Colcade is a lightweight masonry layout. Add a grid class to the container grid and set selectors for column and item elements using data-colcade.

                                
                                    <div class="row grid" data-colcade="columns: .col-md-6, items:
                                    .grid-item">
                                        <div class="col-md-6"></div>
                                        <div class="col-md-6"></div>

                                        <a href="#" class="grid-item">
                                            <figure class="img-rising mb-4">
                                                <img src="..." alt="..." class="img-fluid mb-2">
                                                <figcaption class="h5 font-weight-normal">Club Workspace<br><span class="small text-muted">Scandinavian</span></figcaption>
                                            </figure>
                                        </a>

                                        <a href="#" class="grid-item">
                                            <figure class="img-rising mb-4">
                                                <img src="..." alt="..." class="img-fluid mb-2">
                                                <figcaption class="h5 font-weight-normal">White Corner<br><span class="small text-muted">Minimalist</span></figcaption>
                                            </figure>
                                        </a>

                                        <a href="#" class="grid-item">
                                            <figure class="img-rising mb-4">
                                                <img src="..." alt="..." class="img-fluid mb-2">
                                                <figcaption class="h5 font-weight-normal">Living Room<br><span class="small text-muted">Modern</span></figcaption>
                                            </figure>
                                        </a>
                                    </div>
                                
                            

Zoom

The zoom plugin provides simple image zoom functionality. Add a data-action="zoom" attribute to any image you want to make zoomable. Zoomed images can be closed by scroll, esc, or click.

Maple leaf
                                
                                    <div style="max-width: 300px">
                                        <img src="..." data-action="zoom" class="img-fluid" alt="...">
                                    </div>