You have 0 articles to compare. Do you want to see compare view now?


Compare

Grid System

Grid

Create a fully responsive, fluid and nestable grid layout.

The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width. It is also possible to combine the grid with classes from the Flex component, although it works only in modern browsers.


Usage

To create the grid container, add the .uk-grid class to a parent element. Add one of the .uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. This table gives you an overview of the uk-width-* classes that can be applied to units.

ClassDescription
.uk-width-1-1 Fills 100% of the available width.
.uk-width-1-2 Divides the grid into halves.
.uk-width-1-3 to .uk-width-2-3 Divides the grid into thirds.
.uk-width-1-4 to .uk-width-3-4 Divides the grid into fourths.
.uk-width-1-5 to .uk-width-4-5 Divides the grid into fifths.
.uk-width-1-6 to .uk-width-5-6 Divides the grid into sixths.
.uk-width-1-10 to .uk-width-9-10 Divides the grid into tenths.
0

Typography

Provides the default style for all HTML elements.

This component defines the base look of your page. It offers great typography by setting the default colors, margins, font-sizes and more for each HTML element. This page is a short guide on how to use basic HTML elements and how UIkit styles them.

Note Basically UIkit utilizes the famous Normalize.css, but distributed it among all components. Only the necessary parts are adopted into the Base component to keep the unprefixed CSS as small as possible. Most of the normalization related CSS is moved into the Form, Button and Table components. This makes UIkit and its components very robust against conflicts with other CSS frameworks so that you don't have to worry about browser inconsistencies in your projects.


Headings

Use the <h1> to <h6> elements to define your headings.

Example

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

You can add the .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 or .uk-h6 class to alter the size of your headings, for example have a h1 look like a h3.


0

Utility

A collection of useful utility classes to style your content.

Container

Add the .uk-container class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.


Centering

To center the container, use the .uk-container-center class. For any other block element, you additionally need to apply a width.

Example

Centered block element

Markup

<div class="uk-width-medium-1-2 uk-container-center">...</div>

Clearing and floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

ClassDescription
.uk-float-left Float the element to the left.
.uk-float-right Float the element to the right.
.uk-clearfix Add this class to a parent container to clear floats.
0

Scrollspy Configuration

Trigger events and animations while scrolling your page.

Usage

The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element. Just add the data-uk-scrollspy attribute and the following options.

Data attributeDescription
cls:'MY-CLASS' Applies the class only the first time the element appears in the viewport.
repeat: true Applies the class everytime the element appears in the viewport.
delay:600 Adds a delay in milliseconds to the animation.

Typically, classes from the Animation component are used together with the scrollspy.

0

Сonnect your Ecwid store

MaxFitness theme includes the ability to create and manage your Ecwid store. Ecwid is a revolutionary shopping cart that seamlessly integrates with your existing website. It can also be added to your page on social media networks, such as Facebook or Tumblr.

Although it’s packed with high-value features, Ecwid is absolutely FREE! You’ll pay no setup charges and no transaction fees, making it a no-cost, high-return solution for today’s e-commerce businesses.

0

Add store to any page

If you want show some categories from your eqwid store on different Wordpress pages, you can do this with an additional function in posts Add Store.

Here is how you can do that:

  • Create a separate Wordpress page for each category (WP admin backend -> Pages).
  • Click "Add store" button.
  • In the popup specify the widgets you want to show on the page
0

Sidebar widgets

On Appearance -> Widgets page you can activate the built-in sidebar widgets provided by the plugin:

  • Minicart widget allows you to place a shopping bag icon into your sidebar
  • Search widget allows you to create a search box in the sidebar and let your customers look for the products they want on every page of the site

search store

0

Social links

MaxxFitness theme provides easy management of social icons.

The list of icons is located at the bottom of the page

Social icons

 

0

WP Post Template Plugin

This theme has several templates of posts. With the plugin “WP Post Template” installed additional field on the post creation page, where you can select one of the created templates for the your post.

wp post template field

0

Installation

Gem is a clear, easy to customize template on Warp 7 Framework with many features. This template suitable for selling all things such as: fashion, furniture, mobiles and tablets, cosmetic, accessories.

The modern design is perfect to create a website for your business. It has a very flexible configuration and allows to implement any ideas. Many display options of the post and products, animated blocks.

Setting up a Warp theme follows the standard WordPress installation procedure and works like with any other theme.

  1. Download WordPress from the WordPress website.
  2. Setup a new WordPress install.
  3. Install and activate your theme.

For more information, take a look at the official WordPress documentation.

0

Installation

Setting up a Warp theme follows the standard WordPress installation procedure and works like with any other theme.

  1. Download WordPress from the WordPress website.
  2. Setup a new WordPress install.
  3. Install and activate your theme.

Setup a demo package

If you are new to wordpress or have problems creating posts or pages that look like the Theme Demo you can import dummy posts and pages here that will definitely help to understand how those tasks are done.

Importing demo data (post, pages, images, theme settings, ...) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch. When you import the data following things will happen:

  • All existing posts, pages, categories, images, custom post types or any other data may be deleted or modified.
  • Some WordPress settings will be modified.
  • Posts, pages, some images, some widgets and menus will get imported.
  • Images will be downloaded from our server, these images are copyrighted and are for demo use only .
  • Please click import only once and wait, it can take a couple of minutes

Before you begin, make sure all the required plugins are activated.

 

0

Theme+Demo Installation

Setting up a Warp theme follows the standard WordPress installation procedure and works like with any other theme. In order to download the current version, please visit  wordpress.org. Please check WordPress Codex for information on how to install WordPress on your server.

Once WordPress is successfully installed, you will have to upload the theme to your WordPress directory. Download and un-zip the Maxx-Fitness-package folder. You will find 4 folders and one of them 01_Theme. There are two zipped theme folders 01_maxx-fitness_v1.0.0.zip and 02_maxx-fitness-Child-Theme.zip. If you want to use a child theme, will have to install two themes.

Open your WordPress dashboard. Go to Appearance > Themes. Click the Add New Theme button, then Upload Theme and select the 01_maxx-fitness_v1.0.0.zip file. Click Install Now.

Installing recommended plugins

Once activated Maxx-Fitness will be display a notification to install and activation the required plugins.

Install plugin

After the installation and activation the required plugins, you can install the Demo

Setup a demo package

If you are new to wordpress or have problems creating posts or pages that look like the Theme Demo you can import dummy posts and pages here that will definitely help to understand how those tasks are done.

Before you begin, make sure all the required plugins are activated.

 

0
Page 9 of 27 Results 97 - 108 of 321