Welcome To The Digital Impact UI Kit!

Hello there, This is the new Digital Impact UI Kit. Feel free to use this to speed up the building of your website.

NPM or Yarn

You can install this using NPM or Yarn:

						
npm i digital-impact-ui-kit
						
					

						
yarn add digital-impact-ui-kit
						
					

You can then reference the SCSS in your main.scss file using the following:

						
@import    "~digital-impact-ui-kit/variables";
@import    "~digital-impact-ui-kit/global";
@import    "~digital-impact-ui-kit/accordians";
@import    "~digital-impact-ui-kit/buttons";
@import    "~digital-impact-ui-kit/forms";
@import    "~digital-impact-ui-kit/lists";
@import    "~digital-impact-ui-kit/pagination";
@import    "~digital-impact-ui-kit/sidebar";
@import    "~digital-impact-ui-kit/slider";
@import    "~digital-impact-ui-kit/tabs";
@import    "~digital-impact-ui-kit/navs";
@import    "~digital-impact-ui-kit/header";
						
					

You can remove any items you don't wish to include.

Please also include Font Awesome in your project in anyway you wish.

Variables

Here are a list of variables you can define to allow you to change certain styles of the UI kit like font sizes and colours. You can copy all these variables into your variables file and change them as you wish.

You can also change the import URL for the google font you want to use and change the font-family variable to the new font name.

						
@import  url('https://fonts.googleapis.com/css?family=Roboto');
$font-family: 'Roboto'; 

//Colors $primary: #515A67; 

$secondary: #4A90E2; 
$accent: #4A90E2; 
$accent-dark: darken($accent,10%); 
$accent-darkest: darken($accent,20%); 
$heading-color: #515A67; 
$body-copy-color: #515A67; 

// Font Sizes 

$h1-font-size: 67px; 
$h2-font-size: 45px; 
$h3-font-size: 36px; 
$h4-font-size: 30px; 
$h5-font-size: 24px; 
$h6-font-size: 21px; 

$body-font-size: 17px; 
$sub-copy-font-size: 17px;

						
					

Text Styles

To use the heading styles you can use the usual HTML heading tags.

						
<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5> 
<h6>Heading 6</h6>
						
					

and these will give you heading styles like so:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

You can also change the colour of these titles by adding the class white to the heading tag (you can add the class white to any text element and it'll change the colour to white or you can simply add your own css).

						
<h1 class="white">Heading 1</h1>
						
					

Paragraph tags are already pre styled so all you have to do is add <p> tags around your text like this:

						
<p>Some text in here</p>
						
					

To add some subcopy to your body copy you can add a <small> tag around the text inside a <p> tag, like this:

						
<p>Some text in here and some <small>wee text!</small></p>
						
					

Which will output like this:

Some text in here and some wee text!

You can also add the class sub-copy to any element to make the text smaller

						
<p>Some text in here and some <span class="sub-copy">wee text!</span></p>
						
					

Margins

To add margins to your elements you can simply specify the margin using classes. Here are some examples:

						
<p class="mt-50">Margin Top 50px</p> 
<p class="ml-100">Margin Left 100px</p> 
<p class="mb-20">Margin Bottom 20px</p> 
<p class="mr-80">Margin Right 80px</p>
						
					

The m states the margin and the t,l,b,r suggests the top, left, bottom, right and the number states the pixel size of the margin.

The numbers go up in increments of 10 so for example: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 and 100.

Paddings

To add padding to your elements you can simply specify the padding using classes. Here are some examples:

						
<p class="pt-50">padding Top 50px</p> 
<p class="pl-100">padding Left 100px</p> 
<p class="pb-20">padding Bottom 20px</p> 
<p class="pr-80">padding Right 80px</p>
						
					

The p states the padding and the t,l,b,r suggests the top, left, bottom, right and the number states the pixel size of the padding.

The numbers go up in increments of 10 so for example: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 and 100.

Header

If you are using this header on a custom wordpress theme I'd recommend using this navwalker.

To make the mobile menu work please include this jQuery in your project

						
$(function() {
	$(".site-header--main-nav__inner .mobile-buttons .open-menu").click(function() {
		$(".mobile-menu").toggleClass("mobile-menu--open");
	});

	$( ".menu-item-has-children .dropdown-menu" ).prepend( "<button class='menu-back-button'>Back</button>" );
});
						
					

and use this HTML code for your header (You'll need to change how the navigation pulls in if you aren't using wordpress).

Buttons

All buttons are controlled using classes which you can read about below:

Adding a class of button will give you a basic button with padding and font-size with no colour styles applied.

						
<a href="#" class="button">Button Wording</a>
						
					

Standard Button

This will give you a basic button but with some colour styles applied.

						
<a href="#" class="button button__basic">Button Wording</a>
						
					

Rounded Corners

This will give you a basic button but with some rounded corners

						
<a href="#" class="button button__basic button__rounded">Button Wording</a>
						
					

Full Rounded Corners

This will give you a basic button but with some full rounded corners

						
<a href="#" class="button button__basic button__full-rounded">Button Wording</a>
						
					

Button with an icon

To add a button with an icon simply put the SVG code/image or font awesome code in a span tag

						
<a href="#" class="button button__basic button__rounded"> Button Wording 
	<span> 
		<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs></defs> <g id="Elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Buttons" transform="translate(-248.000000, -235.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g id="ic_play_circle_filled_24px" transform="translate(248.000000, 235.000000)"> <path d="M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z M8,14.5 L8,5.5 L14,10 L8,14.5 Z" id="Shape"></path> </g> </g> </g> </svg>	
	</span> 
</a>

						
					

Ghost Button

To change the style of a button to a ghost button with a transparent background.

						
<a href="#" class="button button__basic button__full-rounded button__ghost">Button Wording</a>
						
					

Text Link

Too add a text link style to a link use the class 'text-link'.

This is a text link

						
<a href="#" class="text--link">text link</a>
						
					

Text Link - Background

Too add a text link style to a link use the class 'text-link__background'.

This is a text link

						
<a href="#" class="text--link text--link__background">text link</a>
						
					

Text Link - Underline

Too add a text link style to a link use the class 'text-link__underline'.

This is a text link

						
<a href="#" class="text--link text--link__underline">text link</a>
						
					

Forms

All form fields should be pre built and you shouldn't need to do much to them (unless you are battling gravity forms then you find yourself in a bit of a tricky situation!).

Labels will inherit the p tag classes and the sub__label class will inherit the sub-copy class. Feel free to overwrite these in your own CSS files.

Normal Text Field

Normal Text Field - With Sub Label

Required Text Field

Select Box

Checkbox

Radio Buttons

Date Picker

Please note for icons and dropdown arrows in the select box you'll need to declare these in your own CSS

Accordians

Below is the HTML code for an accordian. You will need to change the data-target and id attributes for each element in the accordian. You will also need to edit this for other purposes like a wordpress loop for example.

						
<div class="accordian-section" id="accordian-section"> 
	<div class="accordian-section__item"> 
			<div class="accordian-section__item--header"> 
				<h6 data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="no-margin"> 
					Panel 1 
				</h6> 
			</div> 
		<div id="collapseOne" class="collapse" data-parent="#accordian-section"> 
			<div class="accordian-section__item--body"> 
				<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt</p> 
			</div> 
		</div> 
	</div> 

	<div class="accordian-section__item"> 
		<div class="accordian-section__item--header"> 
			<h6 data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="no-margin collapsed"> 
				Panel 2 
			</h6> 
		</div> 
		<div id="collapseTwo" class="collapse" data-parent="#accordian-section"> 
			<div class="accordian-section__item--body"> 
				<p>Body copy for the second accordian item</p> 
			</div> 
		</div> 
	</div> 
</div>
						
					

Pagination

If you are using the WP Navwalker the buttons will be styled by default like the below.

You can also use the HTML structure below:

						
<div class="pagination-wrapper"> 
	<ul class="pagination">	
		<li class="page-item"> 
			<a class="prev page-numbers page-link">Previous</a> 
		</li>	
		<li class="page-item"> 
			<a class="page-numbers page-link">1</a> 
		</li>	
		<li class="page-item"> 
			<span aria-current="page" class="page-numbers page-link current">2</span> 
		</li>	
		<li class="page-item"> 
			<a class="page-numbers page-link">3</a> 
		</li>	
		<li class="page-item"> <a class="page-numbers page-link">4</a> 
			</li>	
		<li class="page-item"> <a class="next page-numbers page-link">Next</a> 
		</li> 
	</ul> 
</div>
						
					

Slider

For all sliders you should use slick slider - http://kenwheeler.github.io/slick/

To install slick slider using NPM you can use the following command in terminal while in your project folder:

						
npm i slick-carousel
						
					

In your main CSS file you can include the slick-slider styles:

						
@import  "~slick-carousel/slick/slick";
						
					

and in your main js file you can include the slick-slider js:

						
import 'slick-carousel';
						
					

You can include this piece of jQuery in your project to initialize all sliders:

						
$('[data-slick]').each(function() {
    var $config = $(this).data('slick') || {};
    $(this).slick($config);
});
						
					

You will also need to include the data-slick attribute on all your sliders for the above jQuery to work. Alternatively you can follow the slick slider instructions to see how to do it with their method.

You can then use this HTML for your sliders:

						
<div data-slick='<?php echo json_encode(['slidesToShow' => 1]); ?>'></div>
						
					

All buttons and arrows will be styled as below:

To change all your elements to white you can add the class slider-section__white to your outer container.

These elements will be styled by default when using slick slider. If you aren't using slick slider you will need to style these elements separately so I would recommend using slick slider.

Logo Slider

The mark up for a logo slider for example would be:

						
<div class="logo-slider" data-slick='<?php echo json_encode([
	'slidesToShow' => 5, 
	'autoplay' => true, 
	'autoplaySpeed' => 2000, 
	'dots' => true, 
	'arrows' => true, 
		'responsive' => [ 
			'breakpoint' => 991, 
			'settings' => [ 
				'slidesToShow' => 3, 
			] 
		] 
	]); ?>'>
</div>
						
					

Feature List

To use a feature list which automatically scrolls you can use this piece of HTML:

						
							
<ul class="feature-list" data-feature-list> 
	<li class="open"> 
		<h4>Feature Name</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
	</li>
	<li> 
		<h4>Feature Name</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
	</li>
	<li> 
		<h4>Feature Name</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> 
	</li>
</ul>

						
					

And include this piece of jQuery in your JS file:

						
jQuery(document).ready(function($) {
  
  var listItems = $( "[data-feature-list] li" ).length;
  
  var index = 1;
  
  setInterval(function() {
    $('[data-feature-list] li').removeClass('open').eq(index).addClass( "open");
    index = index == listItems - 1 ? 0 : index + 1;
  }, 5000);

});
						
					

• Feature Name

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

• Feature Name

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

• Feature Name

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Lists

You can use several different classes to change the style of the lists: normal-list, inline-list, no-dots. You can see examples of these below:

						
<ul class="normal-list"> 
	<li>List Item Number One</li> 
	<li>List Item Number Two</li> 
	<li>List Item Number Three</li> 
</ul>

						
					

• List Item Number One
• List Item Number Two
• List Item Number Three

						
<ul class="inline-list"> 
	<li>List Item Number One</li> 
	<li>List Item Number Two</li> 
	<li>List Item Number Three</li> 
</ul>

						
					

• List Item Number One
• List Item Number Two
• List Item Number Three

						
<ul class="no-dots"> 
	<li>List Item Number One</li> 
	<li>List Item Number Two</li> 
	<li>List Item Number Three</li> 
</ul>

						
					

• List Item Number One
• List Item Number Two
• List Item Number Three

Tabs

Tabs will use bootstrap 4 to include the functionality and the basic styles so please make sure you have bootstrap 4 installed. All bootstrap 4 tabs will be styled by default the same as below.

• Name of the tab

• Name of the tab

• Name of the tab

The HTML for the tabs will be as follows:

						
<ul class="nav nav-tabs" role="tablist"> 
	<li class="nav-item"> 
		<a class="nav-link active" href="#1" role="tab" data-toggle="tab"> 
			<i class="fas fa-futbol"></i> 
			<p>Name of the tab</p> 
		</a>
		<a class="nav-link" href="#1" role="tab" data-toggle="tab"> 
			<i class="fas fa-heart"></i> 
			<p>Name of the tab</p> 
		</a> 
		<a class="nav-link" href="#1" role="tab" data-toggle="tab"> 
			<i class="fas fa-smile"></i> 
			<p>Name of the tab</p> 
		</a> 
	</li> 
</ul>


						
					

You can get the full HTML for tabs on CodePen.

Social Icons

To add a list of social media icons you can use the class of social-links and this will pre style the list for you.

						
<ul class="social-links"> 
	<li> 
		<a href="#"> 
			<i class="fab fa-linkedin"></i> 
		</a> 
	</li> 
	<li> 
		<a href="#"> 
			<i class="fab fa-instagram"></i> 
		</a> 
	</li> 
	<li> 
		<a href="#"> 
			<i class="fab fa-facebook"></i> 
		</a> 
	</li> 
</ul>

						
					

You can restyle these as you wish using different icons/colours as this will probably change from project to project.

Sidebars

To use a sidebar you can use the below HTML for the structure of your sidebar - you can then edit this as you wish.

						
<aside class="sidebar"> 
	<ul> 
		<li> 
			<a href="#" class="active">Home</a> 
		</li> 
		<li> 
			<a href="#">About</a> 
		</li> 
	</ul> 
</aside>
						
					

Blog

The DI UI Kit comes with a pre built blog template that you can use on any project

It uses the below blog card and you can get the HTML for the blog here and you can see how the blog looks here. There is also a single blog template page which you can view here and you can view the HTML for the single blog page here.

News, Feature, Latest

Blog Post Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet lorem vel efficitur blandit.

Henrik Larsson

August 2000

This the standard HTML for the blog card:

						

<div class="blog--card">

	<a href="#" class="image" style="background-image: url('IMAGE_HERE');"></a>

	<p class="categories">News, Feature, Latest</p>

	<h4>
		<a href="#">Blog Post Title Here</a>
	</h4>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet lorem vel efficitur blandit.</p>

	<div class="authour">
					
		<img src="IMAGE_HERE" alt="Authour Alt Tag">

		<div class="details">
			<h6>Henrik Larsson</h6>
			<p>August 2000</p>
		</div>

	</div>

</div>