Elements

ELEMENTS

A non exhaustive list of UI elements that you can use when building your project with Friendkit. More will be added as new theme updates are released. Friendkit being a Bulma.io based theme, you can use components directly from Bulma. You can read the documentation if you're not familiar with it.

Simple Buttons

The default Friendkit buttons.

<!--Simple--> <a class="button is-solid primary-button raised">Primary</a> <!--Rounded--> <a class="button is-rounded">Rounded</a> <!--Loading--> <a class="button is-loading">Simple</a> <!--Loading--> <a class="button is-rounded is-loading">Rounded</a>

Solid Buttons

You can have buttons with solid color.

<!-- Solid Primary--> <a class="button is-solid primary-button">Solid</a> <!--Solid Accent--> <a class="button is-rounded is-solid accent-button">Solid</a>

Raised Buttons

Buttons can have a colored drop shadow when hovered.

<!-- Solid Primary Raised--> <a class="button is-solid primary-button raised">Raised</a> <!--Solid Accent Raised--> <a class="button is-rounded is-solid accent-button raised">Raised</a>

Phantom Buttons

Phantom buttons show an outline on hover.

<!-- Phantom Primary--> <a class="button is-phantom primary-button">Raised</a> <!--Phantom Accent--> <a class="button is-rounded is-phantom accent-button">Raised</a>

Reversed Phantom

Reversed phantom buttons have a colored background on hover.

<!-- Reversed Phantom Primary--> <a class="button is-phantom primary-button">Simple</a> <!-- Reversed Phantom Accent--> <a class="button is-rounded is-phantom accent-button">Rounded</a>

Button Colors

Buttons can have different colors. Available classes are primary-button, accent-button, green-button, blue-button, red-button, grey-button, dark-grey-button.

Switches

Switches can have different colors. Available classes are is-primary, is-accent, is-blue, is-red.

<!--Default--> <label class="f-switch"> <input type="checkbox" class="is-switch" checked> <i></i> </label> <!--Primary--> <label class="f-switch is-primary"> <input type="checkbox" class="is-switch" checked> <i></i> </label> <!--Accent--> <label class="f-switch is-accent"> <input type="checkbox" class="is-switch" checked> <i></i> </label> <!--Red--> <label class="f-switch is-red"> <input type="checkbox" class="is-switch" checked> <i></i> </label> <!--Blue--> <label class="f-switch is-blue"> <input type="checkbox" class="is-switch" checked> <i></i> </label>

Animated Switch

A playful looking animated switch

<!--Animated Switch--> <label class="animated-toggle"> <input type="checkbox"> <span class="toggler"> <span class="dark"> <i data-feather="moon"></i> </span> <span class="light"> <i data-feather="sun"></i> </span> </span> </label>

Radio Buttons

Material style radio buttons with colored drop shadows. Available classes are is-primary, is-accent, is-blue, is-green, is-red, is-orange.

<!--Material Radio--> <label class="material-radio"> <input type="radio" name="group-demo1" checked> <span class="dot"></span> <span class="radio-label">Choice 1</span> </label> <!--Material Radio--> <label class="material-radio is-accent"> <input type="radio" name="group-demo1"> <span class="dot"></span> <span class="radio-label">Choice 2</span> </label> <!--Material Radio--> <label class="material-radio is-green"> <input type="radio" name="group-demo1"> <span class="dot"></span> <span class="radio-label">Choice 3</span> </label>

Round Checkboxes

Round checkboxes can have different colors and are available in 2 sizes. Available classes are is-primary, is-green, is-blue, is-green, is-red, is-orange.

<!--Round Checkbox small--> <div class="round-checkbox is-small is-red"> <div> <input type="checkbox" id="checkbox-group-7" checked> <label for="checkbox-group-7"></label> </div> </div> <!--Round Checkbox--> <div class="round-checkbox is-red"> <div> <input type="checkbox" id="checkbox-group-8" checked> <label for="checkbox-group-8"></label> </div> </div>

Basic Checkboxes

Basic checkboxes can have different colors and are available in 2 sizes. Available classes are is-accent, is-green, is-blue, is-green, is-red, is-orange.

<!--Basic Checkbox--> <div class="basic-checkbox"> <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" checked> <label for="styled-checkbox-2"></label> </div> <!--Basic Checkbox--> <div class="basic-checkbox is-accent"> <input class="styled-checkbox" id="styled-checkbox-3" type="checkbox" checked> <label for="styled-checkbox-3"></label> </div>

Default Inputs

Friendkit comes with default input to answer most use cases.

<!--Simple Input--> <div class="field"> <label>Simple Input</label> <div class="control"> <input type="text" class="input"> </div> </div> <!--Loading Input--> <div class="field"> <label>Loading Input</label> <div class="control"> <input type="text" class="input"> </div> </div> <!--Rounded Input--> <div class="field"> <label>Rounded Input</label> <div class="control"> <input type="text" class="input is-rounded"> </div> </div> <!--Disabled Input--> <div class="field"> <label>Disabled Input</label> <div class="control"> <input type="text" class="input is-rounded" disabled> </div> </div>

Icon Inputs

You can add icons to input groups.

<!--Simple Input--> <div class="field"> <label>Icon Input</label> <div class="control has-icon"> <input type="text" class="input"> <div class="form-icon"> <i data-feather="search"></i> </div> </div> </div> <!--Loading Input--> <div class="field"> <label>Icon Input</label> <div class="control has-icon"> <input type="text" class="input is-rounded"> <div class="form-icon"> <i data-feather="search"></i> </div> </div> </div> <!--Disabled Input--> <div class="field"> <label>Icon Input</label> <div class="control has-icon"> <input type="text" class="input" disabled> <div class="form-icon"> <i data-feather="search"></i> </div> </div> </div>

Validation Inputs

Input wrappers have modifiers that you can use for frontend validation.

<!--Success Validation Input--> <div class="field"> <label>Email</label> <div class="control has-validation has-success"> <input type="text" class="input" /> <div class="error-icon"> <i data-feather="x"></i> </div> <div class="success-icon"> <i data-feather="check"></i> </div> </div> </div> <!--Error Validation Input--> <div class="field"> <label>Email</label> <div class="control has-validation has-error"> <input type="text" class="input" /> <div class="error-icon"> <i data-feather="x"></i> </div> <div class="success-icon"> <i data-feather="check"></i> </div> </div> </div>
<!--Basic Dropdown--> <div class="dropdown is-spaced is-accent dropdown-trigger"> <div> <div class="button"> <i data-feather="more-vertical"></i> </div> </div> <div class="dropdown-menu" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> <div class="media"> <i data-feather="life-buoy"></i> <div class="media-content"> <h3>Help Center</h3> <small>Access user guides and FAQs.</small> </div> </div> </a> <a class="dropdown-item"> <div class="media"> <i data-feather="headphones"></i> <div class="media-content"> <h3>Talk</h3> <small>Call the support team.</small> </div> </div> </a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item"> <div class="media"> <i data-feather="x"></i> <div class="media-content"> <h3>Hide</h3> <small>I don't want to see this stuff anymore.</small> </div> </div> </a> </div> </div> </div>

Share Modal

A modal that can be used to share posts and content on someone's feed. Html code for that modal can be found in: html/includes/pages/feed/modals/share-modal.html.

User Photos Modal

A modal that can be used to view user photos and albums: html/includes/pages/profile/timeline/modals/user-photos-modal.html.

Photo Uploader Modal

A modal that can be used to upload photos and photo albums: html/includes/pages/feed/modals/albums-modal.html.

Webcam Modal

A modal that can be used to go live: html/includes/pages/feed/modals/videos-modal.html.

Onboarding Modals

A modal that can be used to explain a feature to a user: html/includes/pages/feed/modals/albums-help-modal.html and html/includes/pages/feed/modals/videos-help-modal.html.

Custom Lightbox UI

A modal that can be used to explain a feature to a user: html/includes/pages/profile/timeline/modals/custom-profile-lightbox.html.

Fancybox Example 1

Use the the Fancybox 3 plugin to create a beautiful lightbox with a customized layout. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.

Fancybox Example 2

Use the the Fancybox 3 plugin to create a nice confirm / alert box. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.

Fancybox Example 3

Use the the Fancybox 3 plugin to create a reusable morphing modal button. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.

Fancybox Example 4

Use the the Fancybox 3 plugin to create a product quickview. Read the plugin documentation for more examples and more info about usage. The license provided with Friendkit allows you to use it in one of your projects.

Vivid Icons

A Ready to use Free and Open Source SVG Icons Pack JavaScript Library.Read the plugin documentation for more examples and more info about usage.