Welcome to
Grilla

EXPLORE Let's make cool stuff.

WordPress Setup

Plugins to Install

Advanced Custom Fields (ACF): ACF Account
Contact Form 7
WPS Hide Login: Change the default WordPress login URL to Koala
Yoast SEO
WP-Optimize

Brand File

Understanding the brand file

$menu-scroll-bg: red; Sets the background colour of the header when the page is scrolled.
$menu-collapse-breakpoint: sm; Defines the breakpoint where the mobile menu collapses (options: sm, md, lg, xl).

Elements

Splide

You can use .splide on the parent element where only 1 slider is required on a page. Or to future-proof, add an ID on the .splide div to target, for when multiple sliders appear on a single page.

Many configuratipon options are available. Below you'll find the most common used at Twilo. You can find the full range here.

Basic Slider - most common integration

This slider has autoplay and loop enabled which will be the settings for most sliders.

It also has lazyload: nearby enabled which only loads the next slide when required.

It has arrows and pagination displayed as default, which can be removed using arrows: false and pagination: false.

Using the Intersection extension, we can enable autoplay only when the slider is in the viewport. This should be used in most cases where the slider is below the fold, so that it scroll triggers when the slider is in view.

<script>
document.addEventListener("DOMContentLoaded", function () {
	var splide = new Splide("#splide_basic", {
		type: "loop",
		autoplay: true,
		lazyLoad: "nearby"
	});
	splide.mount();
});
</script>

Multiple slides in view

<script>
document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide("#splide_multiple", {
        perPage: 2,
        rewind: true
    });
    splide.mount();
});
</script>

Show other slides encroaching

<script>
document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide("#splide_padding", {
        type: "loop",
        padding: "5rem"
    });
    splide.mount();
});
</script>

Draggable slides with optional snap feature

Click and drag on a desktop, or swipe on a touch screen.

<script>
document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide("#splide_draggable", {
        type: "loop",
        drag: "free",
        snap: true,
        perPage: 3
    });
    splide.mount();
});
</script>

Vertical slides with optional mouse scroll

<script>
document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide("#splide_vertical", {
        direction: "ttb",
        height: "28.5rem",
        wheel: true
    });
    splide.mount();
});
</script>

Mixed size content

Enables the use of slides of varying width and heights.

<script>
document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide("#splide_mixed", {
        type: "loop",
        height: "28.5rem",
        focus: "center",
        autoWidth: true
    });
    splide.mount();
});
</script>

Accordian

Accordian Heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Accordian Heading

Accordian Text

Accordian Heading

Accordian Text

Syntax

<div class="accordion">
    <h3 class="accordion-heading" data-accordion="accordion-1">
        Accordian Heading
    </h3>
    <div id="accordion-1" class="accordion-content">
        Accordian Text
    </div>
</div>

Animation

Animate Left to Right

<div class="animate-container">
	<div class="a-ltr">Content</div>
	</div>

This has a delay of 0.2s

Animate Right to Left

<div class="animate-container">
  <div class="a-rtl">Content</div>
</div>

Animate Fade

<div class="animate-container">
  <div class="a-fade">Content</div>
</div>

Animate Scale

<div class="animate-container">
  <div class="a-scale">Content</div>
</div>

Animate Bottom to Top

<div class="animate-container">
  <div class="a-btt">Content</div>
</div>

This has a delay of 0.2s

Delay the Animation

You can delay the animation by adding a class of:

delay-{X}

X = 0.1s

Up to delay-12

Buttons

All in page links have smooth scroll enabled

To use smooth scroll just create an anchor tag and set the href to the id of an element on page

Click Me

.btn-sm

.btn-lg

.btn-block

.btn-brand

.btn-contrast

.btn-outline

.btn-success

.btn-warning

.btn-danger

.btn-grey

.btn-disabled

.btn-blank

.btn-link

 <header class="site-header">
 <div class="container">
 <div class="row-gutter middle">
 <div class="col-4">
 <a href="/" title="<?php echo bloginfo('name'); ?>">
 <img src="<?php echo get_template_directory_uri() . '/img/placeholder.png'; ?>" alt="<?php echo bloginfo('name'); ?>" width="90" height="90" />
 </a>
 </div>
 <?php if ( has_nav_menu( 'primary' ) ) : ?>
 <div class="col-8">
 <nav id="site-navigation" class="primary-nav" aria-label="<?php esc_attr_e( 'Menu', 'twilo' ); ?>">
 <div class="menu-toggle-header">
 <button class="menu-toggle menu-toggle-close" data-id="site-navigation">Close</button>
 </div>
 <?php
 wp_nav_menu( array(
 'theme_location' => 'primary',
 'menu_class' => 'primary-menu',
 ) );
 ?>
 </nav>
 <button class="menu-toggle menu-toggle-open" data-id="site-navigation">Menu</button>
 </div>
 <?php endif; ?>
 </div>
 </div>
</header>

Modal

To use the Modal

1. The button MUST have a class of .modal-open --> this is used by the jQuery

2. The data-modal can be set to anything BUT it MUST match the ID of the modals most outer div

3. The object you want to use to close the modal must have the class .modal-close --> this is used by the jQuery

Syntax

<button class="btn-brand p-4 modal-open" data-modal="#twiloModal">Open Modal</button>
<div id="twiloModal" class="modal">
  <div class="modal-content">
    <button class="btn-blank modal-close">&times;</button>
    <p>Modal Content...</p>
  </div>
</div>

Tabs

Example Above

Notes:

1. data-tab(Link) and id(Content) must match

2. To make a Tab selected on launch add the class .active to both the Link and Content

Syntax


<h4>Links</h4>
<div class="tab-link-container">
  <button class="tab-link active" data-tab="tab-link-1">
    Accordion Link 1
  </button>
  <button class="tab-link" data-tab="tab-link-2">
    Accordion Link 2
  </button>
</div>

<h4>Content</h4>
<div class="tab-content-container">
  <div id="tab-link-1" class="tab-content active">
    Accordion Content 1 
  </div>
  <div id="tab-link-2" class="tab-content">
    Accordion Content 2
  </div>
</div>

Heading Classes

Each heading can also be passed as class so we could have a H2 on the page with class of H1 to take H1 styling

Example:

<h2 class="h1">Hello World</h2>

Text Decoration

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

Text Decoration

.nowrap { white-space: nowrap; }

.uppercase { text-transform: uppercase; }

.capitalize { text-transform: capitalize; }

.td-none { text-decoration: none; }

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Floating Forms

Click me to go to Regular Forms

Syntax

Note:

1. The ID and for must match

2. You must use a placeholder, this is not displayed but is needed for the CSS

3. The Label text acts as the placeholder

Inputs

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Text Area

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Select

<div class="form-floating">
  <select id="floatingSelect" class="form-select">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Select</label>
</div>

Regular Forms

No classes are required as all the styling has been applied to the label and input elements

Archive Pagination

Copy below into your archive.php

Make sure you remove the \ on the unicode

 <?php 
the_posts_pagination( array( 
 'prev_text' => '&\larr;',
 'next_text' => '&\rarr;',
 'screen_reader_text' => ' ', ) ); 
?>

Single Pagination

Copy below into your archive.php

 <div class="nav-links">
 <?php
 $prev_post = get_next_post();
 if ( ! empty( $prev_post ) ): ?>
 <a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="btn-outline text-center">Prev</a>
 <?php else: ?>
 <a href="javascript:;" class="btn-outline btn-disabled text-center">Prev</a>
 <?php endif; ?>
 <?php
 $next_post = get_previous_post();
 if ( ! empty( $next_post ) ): ?>
 <a href="<?php echo get_permalink( $next_post->ID ); ?>" class="btn-outline">Next</a>
 <?php else: ?>
 <a href="javascript:;" class="btn-outline btn-disabled">Next</a>
 <?php endif; ?>
</div>

Prev Next

Tables

Standard table

	EOT	OTF / TTF	WOFF	WOFF2	SVG
IE 8-11	Yes
IE 9-11	Yes	Yes	Yes
Edge 12-45		Yes	Yes
Firefox 40-45		Yes	Yes	Yes
Chrome 43-49		Yes	Yes	Yes
Safari 8-9		Yes	Yes		Yes
Opera 32-35		Yes	Yes	Yes
iOS Safari 8.4-9.1		Yes	Yes		Yes
Android 4.4-44		Yes	Yes
Chrome for Android 46		Yes	Yes	Yes

Table with the following classes:

table-striped
table-highlight-head
table-highlight-left

	EOT	OTF / TTF	WOFF	WOFF2	SVG
IE 8-11	Yes
IE 9-11	Yes	Yes	Yes
Edge 12-45		Yes	Yes
Firefox 40-45		Yes	Yes	Yes
Chrome 43-49		Yes	Yes	Yes
Safari 8-9		Yes	Yes		Yes
Opera 32-35		Yes	Yes	Yes
iOS Safari 8.4-9.1		Yes	Yes		Yes
Android 4.4-44		Yes	Yes
Chrome for Android 46		Yes	Yes	Yes

Syntax for Standard Table

Assign the classes .table .text-left

Syntax for Stripe Table

Assign the classes .table .table-striped .table-highlight-head .table-highlight-left .text-left

Element Scrolled

We have a pre built function you can use to fire events once x amount of a element is in View

This is useful for After Effect Animation and carousels, so if the element is half way down the page, it will not start until the element is visible to the end user

Syntax

Call the function using elementScrolled()

The function requires 2 arguments

1. The ID of the element

2. The percentage of the container that needs to be in view

 jQuery(document).ready(function($) {
 $(window).scroll(function(){
 if(elementScrolled("#example", 0.75)) {
 $('#example').XXXXX('XXXXXPlay')
 }
 });
 });

Example use of elementScrolled()

When the element reaches % of the screen height we use a jQuery method to change the containers color

Scroll ↓

75%

50%

25%

This example is for getting XXXXX to play:

jQuery(document).ready(function($) {
 if(elementScrolled('#example', 0.75)) {
 $('#example').XXXXX('XXXXXPlay')
 }
});

This example is for an after effects animation:

jQuery(document).ready(function($) {
 if( effectAnimation.autoplay == false && elementScrolled( "#example", 0.5 )) {
 effectAnimation.play();
 }
});

Flex

display: flex --> .d-flex

Breakpoints

We can change the display property using: .d-{x}-flex

x = breakpoint

Example: .d-lg-flex

Flex Direction

flex-direction: row --> .flex-row

flex-direction: column --> .flex-col

flex-direction: row-reverse --> .row-reverse

flex-direction: column-reverse --> .col-reverse

Justify Content

justify-content: flex-start --> .start

justify-content: flex-center --> .center

justify-content: flex-end --> .end

justify-content: space-around --> .end

justify-content: space-between --> .between

Align Items

align-items: flex-start --> .top

align-items: center --> .middle

align-items: flex-end --> .bottom

Grid

Container with Row Gutter

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

Container with Row

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

Syntax Basics

Classes

Container

.container

.container-full

Rows

.row

.row-gutter

Columns

.col-{breakpoint}-{numberOfColumns}

.col-{breakpoint}-offset-{numberOfColums}

Syntax Layout

<div class="container">
  <div class="row">
    <div class="col-12">Content</div>
  </div>
</div>

Padding / Margin

We have similar classes to Tailwind for adding padding and margin to our elements

Our range is from 0-10, 12, 14, 16

p-{x}	Rem
0	0
1	0.25
2	0.5
3	0.75
4	1
5	1.25
6	1.5
7	1.75
8	2
9	2.25
10	2.5
12	3
16	4
20	5

Responsive Padding and Margin

We can add our breakpoints our margin and padding

Syntax

.{margin/padding}-{breakpoint}-{size}

Example

.ml-sm-only-6

Above will apply margin-left: 1.5rem; to small screens only

`.gap-4` (1rem gap on flex)

Box 1

Box 2

Box 3

Welcome toGrilla

WordPress Setup

Plugins to Install

Cookie Consent

Brand File

Understanding the brand file

Elements

Splide

Basic Slider - most common integration

Multiple slides in view

Show other slides encroaching

Draggable slides with optional snap feature

Vertical slides with optional mouse scroll

Mixed size content

Accordian

Accordian Heading

Accordian Heading

Accordian Heading

Syntax

Animation

Animate Left to Right

Animate Right to Left

Animate Fade

Animate Scale

Animate Bottom to Top

Delay the Animation

Buttons

Menu

Copy and paste below into your header.php

Modal

Syntax

Tabs

Example Above

Notes:

Syntax

Heading Classes

Text Size

Text Decoration

Text Decoration

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Floating Forms

Syntax

Inputs

Text Area

Select

Regular Forms

Archive Pagination

Single Pagination

Tables

Standard table

Table with the following classes:

Syntax for Standard Table

Syntax for Stripe Table

Element Scrolled

Syntax

Example use of elementScrolled()

Scroll ↓

Flex

Breakpoints

Flex Direction

Justify Content

Align Items

Grid

Container with Row Gutter

Container with Row

Syntax Basics

Classes

Container

Rows

Columns

Syntax Layout

Padding / Margin

Responsive Padding and Margin

Syntax

Example

Welcome to
Grilla

`.gap-4` (1rem gap on flex)