UIkit Accordion– Accordion is basically list of items which is displayed when we click on the header. Add attribute uk-accordion to ul to create Accordion container and then add accordion title and content. Here in this article we are going to explain how to create Accordion in UIkit framework.

UIkit Accordion | Component | Collapse | Open Example

Add attribute uk-accordion to parent container and add title and content for each item. Here is simple example of Accordion-

	

	  
Item 1
	  
Content 1 description.. 
	
	

	   
Item 2
	   
Content 2 description.. 
	
	

	   
Item 3
	   
Content 3 description.. 
	
	

	   
Item 4
	   
Content 4 description.. 
	

• .uk-accordion-title– This is used to add the title of Accordion item.
• .uk-accordion-content– This is used to add the content of Accordion item.

If you run the above example it will produce output something like this-

No Collapse

By default Accordion items are collapsible. If you want to prevent the item collapse you can assign uk-accordion value – collapsible: false.

...

Here is complete example-

  
Item 1
  

	
 Description Content 1.
   


  
Item 2
   

	
 Description Content 2.
	
   


  
Item 3
   

	
 Description Content 3.
	
   

Open Multiple Items

You can open multiple items at a time by assigning uk-accordion attribute value multiple: true.

  
Item 1
  

	
 Description Content 1.
   



  
Item 2
   

	
 Description Content 2.
	
   


  
Item 3
   

	
 Description Content 3.
	
   

Set Open Items

We can use class=”open” to keep the specified item open. You can also keep multiple options open at same time. Just make sure to add multiple: true to accordion.

	
Item 1
	

		
 Description Content 1.
	


	
Item 2
	

		
 Description Content 2.
	
	


	
Item 3
	

		
 Description Content 3.
	
	

Options

JavaScript

You can use the following JavaScript component.

Initialize

UIkit.accordion(element, options);

Events

Toggle

UIkit.accordion(element).toggle(index, animate);

UIkit Grid UIkit provides classes to create responsive, fluid and nested grid container. Here in this tutorial, we are going to explain how to create grid containers in UIkit. You can also use our online editor to edit and run the code online.

UIkit Grid Example

To create grid container, add attribute .uk-grid to div and add child div. You don’t need to add class to create class. Let us create a simple grid.

    
Column 1
    
Column 2
    
Column 3

If you run the above example it will produce the following output-

Gutter Modifiers

• .uk-grid-small – Add this class to apply a small gutter.
• .uk-grid-medium– Add this class to apply a medium gutter like the default one, but without a breakpoint.
• .uk-grid-large– Add this class to apply a large gutter with breakpoints.
• .uk-grid-collapse– Add this class to remove the grid gutter entirely.

Example

    

        
Item
    
    

        
Item
    
    

        
Item
    

Divider Modifier

Add .uk-grid-divider class to separate the grid cells.

Dummy Text., Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text
Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text.
Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text.

Match Height

Add class .uk-grid-match to make each cell height same.

	
Item
 

	
Item



	
Item Line 1
Line 2
Line 3

If you run the above example it will produce the output something like this-

Match Only One Cell

Add class .uk-grid-item-match to the grid whose child you want to make same.

Grid And Width

You can use width component to add the width of UIkit grid. Here is an example-

UIkit Section– UIkit provides css classes to create horizontal layout sections with different styles. It is very simple to create sections in UIkit.

UIkit Section Example

Sections are basically used to separate the page in different-different blocks. To create a section you just need to add class .uk-section. Here is simple example of section.

By default sections are blank so we need to add class .uk-section-muted. Let us create a simple container.

    

    
My section
    

Style Modifiers

You can add following modifiers to change the style of modifiers.

• .uk-section-default– This class will add the background color to the section.
• .uk-section-muted– This adds the muted background color.
• .uk-section-primary– This adds primary background color.
• .uk-section-secondary– This adds secondary background color.

Example

   
Primary Section..

Size Modifier

Following size modifiers are available in UIkit css framework.

• .uk-section-xsmall– This class adds the minimum padding.
• .uk-section-small– This decreases the default padding og section.
• .uk-section-large– This class increases the padding.
• .uk-section-xlarge– This increases the default padding.
• .uk-padding-remove-vertical– This removes the vertical padding.

Overlap Modifier

Add class .uk-section-overlap to add border image and negative offset overlap.

UIkit Container– This component allows you to create container which is center aligned. Class .uk-container is used to create simple container. Here in this tutorial, we are going to explain how to use container component. You can also use our online editor to edit and run the code online.

UIkit Container Example

To create container add class uk-container, It will contain the max-width of the website with padding on both sides.

Learn UIkit on Tutorialsplane.com!

Output of above example is-

Size Modifiers

Following modifier classes are available which we can use to have different-different max-width.

Now let us create a simple example to understand the above containers.

Small Container



  
Large Container



 
Expand Container

If you run the above example it will produce output something like this-

UIkit Installation– You can easily install UIkit either locally or you can use hosted CDN Url to use UIKit framework. Here in this tutorial, we are going to explain how to install UIkit.

UIkit Installation Steps | CDN URL | Download Locally

There are following ways to install UIkit Installation-

Using NPM

Run the following NPM command to install UIkit-

npm install uikit

Using Hosted CDN

You can use hosted CDN to install the UIkit css. You can include the UIkit JS and CSS from CDN url simply as below-

Install Locally

You can download the CSS and JS from Download UIkit and include the CSS and JS files.

Clone From Git Repo

You can clone the files from Git repository.

git clone git://github.com/uikit/uikit.git

UIkit Tutorial – UIkit is modern CSS framework. It is lightweight and modular framework for developing fast and powerful web applications. It is very simple to use the UIkit, You can easily customize and extend the features.

Uikit Tutorial Step By Step

UIkit provides rich layouts components, responsive design, animations and transitions. UIkit gives you nice collection of HTML, CSS and JS components which you can easily use and customize.

• Responsive– It is developed with the mobile-first approach. It is fully responsive across all devices.
• Customization– UIkit can be easily customized as per the your theme.
• Components– It provides ready made beautiful components with clear naming convention.
• LESS– It uses SASS and LESS to write the well-structured which can be easily extended.
• Open Source– It is open source which you can use free of cost.

---

Audience

---

This tutorial is designed for the professionals to help them in learning the basic concept of UIkit CSS.

What You Should Know?

Before starting to Learn UIkit you should be aware of basic concept of HTML, CSS and JavaScript.