Overview

This style guide is based largely on the principles of atomic design. The key idea of this methodology is that small, independent - atomic - parts, can be combined into larger molecular structures. Molecular structures can be combined into larger organisms, which can then serve as the foundation for templates and full pages.

Our guidelines have space for flexibility, and are continuously revised and expanded to suit changing product needs.

Usefull Resources Style Guide Driven Development
React Style Guide
Atomic Design
Design Systems

About BindTuning

At BindtTuning, our passion for technology is rooted in our desire to explore, to navigate a better way to get work done. What first started as a themes gallery has evolved into a “self-serve” subscription model for creating beautiful and useful sites for SharePoint and Office 365.

Visit the website

Corporate Logo

Our logo is the key building block of our indentity. The primary visual element that indentifies us.

The logo

The signature is a combination of the symbol itself nad our company name - they have a fixed relationship that should never be changed in any way. The corporate logo is presented through the use of color as well as shape and form. The two corporate colors are Cerulean Blue and Dark Gunmetal. It is a fresh and appealing blend of colors chosen for their strong combination - modern - classic - timeless.

The Logo Symbol

Consists of a powerful element evoking the culture of design services and a blue square backround. The main logo is the blue logo used on white background. For darker backrounds you will find alternatives following the manual.

Blue square background
Blue logo on white background

Colors

Color plays an important role in the BindTuning corporate identity program. The colors below are recommendations for various media.

Primary Colors

A palette of primary colors has been developed, which comprise the “One Voice” color scheme. Consistent use of these colors will contribute to the cohesive and harmonious look of the BindTuning brand identity across all relevant media.

Cerulean hex: #23598e rgb: 43 170 225
Dark Gun Metal hex: #232528 rgb: 35 37 40

Secondary Colors

The Secondary colors are complementary to our official colors, but are not recognizable identifiers for BindTuning company. Secondary colors should be used sparingly, that is, in less than 10 percent of the palette in one piece.

Ocean hex: #23598e rgb: 35 89 142
Teal hex: #0082a6 rgb: 0 130 166
Moonstone hex: #69b8b8 rgb: 105 184 184

Carrot hex: #eb622b rgb: 235 98 43
Saffronhex: #f8c341 rgb: 248 195 65
Butter hex: #f7e09b rgb: 247 224 155

Raspberry hex: #9b3979 rgb: 35 37 40
Fuchsia hex: #d5289a rgb: 35 37 40
Violet hex: #8d78db rgb: 35 37 40

Complementary Colors

The color palette can be increased by using screens and shades that originate from the primary and secondary colors.

Esmerald hex: #15caa2 rgb: 21 202 162
Red hex: #e73737 rgb: 231 55 55
Sky hex: #91b3d5 rgb: 145 179 213

NEUTRALS

Neutral tones are approved for use in both typography as well as visual elements for type to live on. A selection of grayscale colors for background or text color use.

Granite hex: #5f6060 rgb: 95 96 96
Quicksilver hex: #9fa0a4 rgb: 159 160 164
Gainsboro hex: #dddddd rgb: 221 221 221
Smoke hex: #eeeeee rgb: 246 246 244

Extended Palete

The extended palette consists of all the useable tints and shades of each color in the palette. Usage of these colors varies depending on the touch point, but they come in handy for illustrations and components in product.

Cerulean

Fuchsia

Carrot

Typography

Typography plays an important role in communicating an overall tone and quality. Careful use of typography reinforces our personality and ensures clarity and harmony in all BindTuning communications.

This is Roboto

Roboto is great for headlines as in-product use and long form typography. We chose to keep content simple and consistent across systems.

Medium	ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Regular	ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Light	ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

font-family: 'Roboto', sans-serif;

Usage

Keeping consist and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.

	font-size	font-weight	line-height	margins
main title	40px	400	1.3	15px 0	<h1>main title<h1>
Subtitle	32px	400	1.3	15px 0	<h2>subtitle</h2>
subsubtitle	26px	400	1.3	15px 0	<h4>subsubtitle</h4>
Content titles	22px	400	1.3	15px 0	<h4>content titles</h4>
Tags and labels	14px	400	1.3	15px 0	<h5>tags and labels</h5>
paragraph and body content	18px	300	1.7	1.2em 0	<p>paragraph and body content</p>

Examples

Normal text on paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod, lectus tincidunt volutpat fermentum, orci erat mattis ipsum, ut blandit sapien nunc sed eros. Curabitur convallis faucibus turpis.

Smaller text on paragraph

Line Height

In the context of the corporation branding as in products display the text is spaced intentionally to maintain distinction between different types and blocks of content. As a result, we take a pragmatic approach to spacing and line height by resetting all paddings to 0 and having a fixed standart , and allowing the line-height property for all text to inherit a globally defined ratio of 1.7 of the text size. This allows designers and developers to easily opt-in to specific text spacing by leveraging our CSS Text and Spacing Utilities. We do provide a longform text CSS utility, which will result in our recommended vertical text rhythm for optimizing a balance between readability and space efficiency.

Text Formatting

Text Decoration

bold	lorem-ipsum	text-bold
italic	lorem-ipsum	text-italic
uppercase	lorem-ipsum	text-uppercase
lead	lorem-ipsum *forces font-size to 22px	text-lead
small	lorem-ipsum *forces font-size to 16px	small
smaller	lorem-ipsum *forces font-size to 12px	smaller
underline	lorem-ipsum	underline

Text Color

text-blue	text-blue
text-teal	text-teal
text-ocean	text-ocean
text-moonstone	text-moonstone
text-carrot	text-carrot
text-saffron	text-saffron
text-butter	text-butter
text-raspberry	text-raspberry
text-fuchsia	text-fuchsia
text-violet	text-violet
text-esmerald	text-esmerald
text-red	text-red
text-sky	text-sky
text-smoke	text-smoke
text-quicksilver	text-quicksilver
text-granite	text-granite
text-dark	text-dark

Icon Family

Icons

Text with Icons

Title here

Amazing description of a feature or something

Title here

Amazing description of a feature or something

Title here

Amazing description of a feature or something

Title here

Amazing description of a feature or something

Products

At BindTuning, we have guidelines for the products we follow when we create content. We apply the guidelines to text that appears in our products, the website, internal software and non-screen content (branding materials, etc).

Presenting products in order

The BindTuning products, although indivual, are forjed for the intranet as a whole, providing this way a fully user centric and visually apealing experience. As individual, each product is fully customizable to match any brand. As a whole they tell a story and should be presented in order as coming first the themes, second the web parts and as third the clutch.

1. Theme as a product it provides the flexibily for content to respond to any screensize.

2. Web Parts can turn SharePoint data into beautiful experiences.

3. Clutch brings these two together (themes and web parts), inside well designed templates to match any industry and provides automatic installation - without writing a single line of code.

Visual Differentiation

BindTuning use colors in conjunction with iconography to visually differentiate between products. Consistent use of these colors will contribute to the cohesive and harmonious look of the identity across all relevant media. To each product was attributed a corporate color providing way for an easy identifiable communication.

Themes

Easy indentifiable as Cerulean the themes as a product assumes the primary BindTuning color as it was the corporate first idea and concept in wich the brand was born - a theme to fit all CMS platforms.

Icon		bt bt-tesktop text-blue
Color	Cerulean	bg-blue / text-blue / btn-blue

Web Parts

This product assumes the Carrot as it symbolizes a user centric approach to visualize SharePoint data in a usable, beautiful way. As SharePoint branding relies on blue we assume this vibrante orange variation in communication as a way to conceptualize how the complete set of web parts breathes life into the old boring intranet.

Icon		bt bt-aws text-carrot
Color	Carrot	bg-carrot / text-carrot / btn-carrot

Clutch

Consistent use of these colors will contribute to the cohesive and harmonious look of the BindTuning product identity across all relevant media. To each product was attributed a corporate color providing way for an easy identifiable communication.

Icon		bt bt-drag-right text-fuchsia
Color	Fuchsia	bg-fuchsia / text-fuchsia / btn-fuchsia

Images

Basic Images

BindTuning test image for the styleguide

<figure>
    <img class="img-responsive shadow" src="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" alt="BindTuning test image for the styleguide">
</figure>

Persona / User Images

Persona Big

<figure class="persona big">
              <img class=" shadow" src="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" alt="BindTuning test image for the styleguide">
            </figure>

Persona Default

<figure class="persona">
              <img class=" shadow" src="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" alt="BindTuning test image for the styleguide">
            </figure>

Persona Small

<figure class="persona small">
              <img class=" shadow" src="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" alt="BindTuning test image for the styleguide">
            </figure>

Shadows

Offset your shadows: It looks more natural because it simulates a light source shining down from above like we’re used to seeing in the real world.

Base Shadow	shadow
Bold Shadow	bold-shadow

Backgrounds

Following the color guide, classes were created to use as background-colors for sections and other elements

	bg-blue
	bg-ocean
	bg-teal
	bg-moonstone
	bg-carrot
	bg-saffron
	bg-butter
	bg-raspberry
	bg-fuchsia
	bg-violet
	bg-esmerald
	bg-red
	bg-sky
	bg-granite
	bg-quicksilver
	bg-gainsboro
	bg-smoke
	bg-light

Labels

Use the background classes available to color the labels. See background classes

Label Default Label Success Label Danger Label Warning Label Light Label Gray Label Dark

Example

<label class="label bg-blue"></label>

<span class="label bg-blue"></spanl>

Buttons

Most pages only have one true primary action, a couple of less important secondary actions, and a few seldom used tertiary actions. As same as backgrounds there's a class to every color.

Primary Buttons

Primary actions should be obvious. Solid, high contrast background colors work great here. Write the class "btn-" and follow with the color name

Button Blue Button Moonstone Button Red Button Carrot Button Smoke Button Dark

Example

<a class="btn btn-blue">Button Blue</a>
<a class="btn btn-moonstone">Button Moonstone</a>
<a class="btn btn-red">Button Red</a>
<a class="btn btn-carrot">Button Carrot</a>
<a class="btn btn-smoke">Button Smoke</a>
<a class="btn btn-dark">Button Dark</a>

Secondary Buttons

Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options

Button Blue Line Success Danger Warning Light Dark

Example

<a class="btn btn-blue-line btn-lg">Button Default</a>
<a class="btn btn-moonstone-line btn-lg">Success</a>
<a class="btn btn-red-line btn-lg">Danger</a>
<a class="btn btn-carrot-line btn-lg">Warning</a>
<a class="btn btn-quicksilver-line btn-lg">Light</a>
<a class="btn btn-dark-line btn-lg">Dark</a>

Dropdown Buttons

Use drop-down menus to let users select an action or options from a set of choices. Typically, drop-down menus are used when you have 5-15 options. If the options exceed the limit of 5 elements a verticall scroll will be added to prevent overflow of content and other related issues.

Example

<div class="dropdown">
<a class="btn btn-lg btn-blue dropdown-toggle arrow-down" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdownm menu example</a>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item">
<span>This is a dropdown</span>
</a>
<a class="dropdown-item">
<span>This is a dropdown</span>
</a>
<a class="dropdown-item">
<span>This is a dropdown</span>
</a>
</div>
</div>

Example

<div class="dropdown">
<a class="btn btn-lg btn-blue dropdown-toggle arrow-down" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdownm menu example</a>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item">
<span>This is a dropdown</span>
</a>
<a class="dropdown-item">
<span>This is a dropdown</span>
</a>
<a class="dropdown-item">
<span>This is a dropdown</span>
</a>
</div>
</div>

Links

Links are tertiary actions, they should be discoverable but unobtrusive. These have all the flexibility of using text formattion classes to gain color or other type of decoration. See text formattion options
*you can also combine some to bring more enfase into it

Link example

Classes Used

Code

Click here to know more

underline, text-blue

<a class="text-blue underline">Click here to know more <i class="fa fa-angle-right" aria-hidden="true"></i></a>

Click here to know more but smaller

underline, text-blue, small

<a class="text-blue underline small">Click here to know more but smaller <i class="fa fa-angle-right" aria-hidden="true"></i></a>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Full width alert

Alert banners communicate a state that affects the entire software or website, not just a feature or page. It persists over a session and appears without the user initiating the action. Use background classes to change the background color of the alert. See background classes

Our Website is under maintenance, please hold on to your feet.Know More

Example

<div class="alert bg-red full-width">
              <span class="alert-description text-white small nomargin">Our Website is under maintenance, please hold on to your feet.</span>
<a href="#" class="btn-link-white">Know More</a>
</div>

Full width alert with background

Use Suble Patterns

We just launched Provisioning Desktop app!Know More

Example

<div class="alert full-width bg-image" style="background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/stardust.png);">

              <span class="alert-description text-white small nomargin">We just launched Provisioning Desktop app!</span><a href="#" class="btn-link-white">Know More</a></div>

Basic Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use background classes to change the alert color and/or change the icon class. See background classes

Our Website is under maintenance, please hold on to your feet.Know More

Example

<div class="alert bg-red basic-alert">
              <span class="alert-icon text-white"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></span>
              <div class="alert-content"><span class="alert-description text-white small nomargin">Our Website is under maintenance, please hold on to your feet.</span><a href="#" class="btn-link-white">Know More</a></div>
              <a class="btn-close small"></a></div>

Components

Social

   <a href="https://www.twitter.com/bindskins" class="social-circle social-twitter" title="BindTuning Twitter Profile" target="_blank">
                <i class="fa fa-twitter"></i>
              </a><a href="https://www.linkedin.com/company/bindtuning" class="social-circle social-linkedin" title="BindTuning LinkedIn Profile" target="_blank">
                <i class="fa fa-linkedin"></i>
              </a><a href="https://plus.google.com/+Bindtuning/posts " class="social-circle social-googleplus " title="BindTuning Google+ Profile " target="_blank "><i class="fa fa-google-plus "></i></a><a href="https://www.facebook.com/bindskins" title="BindTuning Facebook Profile" target="_blank " class="social-circle social-facebook "><i class="fa fa-facebook "></i></a>

Lists

Basic Table for Product Info, icons should be rethink in order to serve the themes CMS specs

Basic List

List Item 1
List Item 2
List Item 3

<ul class="simple">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Bullet List

List Item 1
List Item 2
List Item 3

<ul class="bullet">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Arrow List

List Item 1
List Item 2
List Item 3

<ul class="arrows">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Cheklist

List Item 1
List Item 2
List Item 3

<ul class="check">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Variations

Use text formattion classes and colors to change the aspect of the lists.


Normal Size List Item	List Item	<ul class="bullet"><li>List Item</li></ul>
Small Size List Item	List Item	<ul class="bullet small"><li>List Item</li></ul>
Colored Bullet List Item	List Item	<ul class="bullet"><li class="blue">List Item</li></ul>
Colored Text List Item	List Item	<ul class="bullet"><li class="text-blue">List Item</li></ul>

Tables

Basic Table for Product Info, icons should be rethink in order to serve the themes CMS specs

	SharePoint OnPrem	Office 365	CSS Only
Master Pages	2 More
Page Layouts		One time only	None
Page Layouts

Cards

Basic Cards

Add colorful accent borders to parts of the card or highlight active items

Simple Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a nulla mauris. Maecenas vulputate mauris felis, vel viverra est pharetra non.

Card Bordered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a nulla mauris. Maecenas vulputate mauris felis, vel viverra est pharetra non.

Another Card Layout

Some other description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a nulla mauris. Maecenas vulputate mauris felis, vel viverra est pharetra non.

Plans Cards

Cards layout for Plans or Bundles

Free

Lorem ipsum description, forever free

Reason number 1
Reason number 2
Reason number 3

Free

Lorem ipsum description, forever free

Reason number 1
Reason number 2
Reason number 3

Free

Lorem ipsum description, forever free

Reason number 1
Reason number 2
Reason number 3

Quote Card

“Finding a partner to help us deliver beautiful looking Intranets that complimented and not hinder our ability to produce great solutions looked to be impossible, until we discovered BindTuning. Their perfectly crafted themes and components delivered to Microsoft’s best practices allows us to customise all the standard features of SharePoint, and have them presented to our clients elegantly, and on any device. (…) We love working with BindTuning, and our customers love the solutions we deliver together.”

Kevin Rowland Office 365 Specialist at HappyWired, UK

<div class="card text-center">
            <blockquote class="blockquote">
                                            <p class="text-blue">
                                                “Finding a partner to help us deliver beautiful looking Intranets that complimented and not hinder our ability to produce great solutions looked to be impossible, until we discovered BindTuning. Their perfectly crafted themes and components delivered to Microsoft’s best practices allows us to customise all the standard features of SharePoint, and have them presented to our clients elegantly, and on any device. (…) We love working with BindTuning, and our customers love the solutions we deliver together.”
                                            </p>
                                            <footer class="blockquote-footer">
                                                <div class="author-info">
                                                    <span class="nomargin bold">Kevin Rowland</span>
                                                    <cite>Office 365 Specialist at HappyWired, UK</cite>
                                                </div>
                                            </footer>
                                        </blockquote>
            
          </div>

Blog Post Card

Cards layout for resources including blog posts, events and other interesting content

Mar 7, 2018Blog

BindTuning Provisioning Engine desktop app - Your Top Questions Answered

<div class="grid-item ">
          <div class="card post-card ">
            <div class="card-header ">
              <figure><img src="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" class="img-responsive " alt=" "></figure>
            </div>
            <div class="card-body ">
              <span class="card-date ">Mar 7, 2018</span><span class="label bg-blue">Blog</span>
              
              <p class="nomargin text-dark text-bold">BindTuning Provisioning Engine desktop app - Your Top Questions Answered</p>
            </div>
          </div>
        </div>

Gallery Card

Gallery layouts for Themes and Web Parts

NEWSPFX READY

SPC

Theme Details

Power your SharePoint intranet with complete weather information, customizable for each user regardless of their location.

NEWSPFX READY

Tiles

Web Part Details

Power your SharePoint intranet with complete weather information, customizable for each user regardless of their location.

<div class="card gallery-card white-card">
            <span class="label text-white bg-esmerald">NEW</span><span class="label text-white bg-ocean">SPFX READY</span>
            <div class="product-option">
              <figure>
                <img class="img-responsive" ng-src="https://cdn.bindtuning.com/api/order/resourceinfo/assets/Packs/SPC/images/SPC1.jpg" src="https://cdn.bindtuning.com/api/order/resourceinfo/assets/Packs/SPC/images/SPC1.jpg">
              </figure>
            </div>
            <div class="product-overlay"></div>
            <div class="product-details">

              <div class="media-left media-middle" style="display:none">
                <img width="32" class="media-object img-circle" ng-src="https://bind.blob.core.windows.net/bindtuning/developers/bindtuning/bt.iconic.png" src="https://bind.blob.core.windows.net/bindtuning/developers/bindtuning/bt.iconic.png">
              </div>
              <div class="media-body">
                <div class="product-owner pull-left">
                  <p>SPC</p>
                </div>

                <a href="#">Theme Details <i class="fa fa-angle-right" aria-hidden="true"></i></a>
              </div>
              <div class="product-info">
                <p class="small">Power your SharePoint intranet with complete weather information, customizable for each user regardless of their location.</p>
              </div>
            </div>
          </div>

Tabs

Tabs menu layout

Menu 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Menu 3

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

<ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home" aria-expanded="true">Menu 1</a></li>

            <li class=""><a data-toggle="tab" href="#menu2" aria-expanded="false">Menu 2</a></li>
            <li class=""><a data-toggle="tab" href="#menu3" aria-expanded="false">Menu 3</a></li>
          </ul>
<div class="tab-content">
            <div id="home" class="tab-pane fade active in">
              <h3>Menu 1</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

            <div id="menu2" class="tab-pane fade">
              <h3>Menu 2</h3>
              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
              <h3>Menu 3</h3>
              <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
          </div>

Tabs menu layout center

Menu 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Menu 3

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Tabs with no border

Good for presenting product featured layouts

Menu 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Menu 3

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Accordions

Basic Table for Product Info, icons should be rethink in order to serve the themes CMS specs

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Blockquotes

Highlight blockquote

"The BindTuning Office 365 SharePoint Theme product is a unique solution to quickly build SharePoint solutions from end to finish."

<blockquote class="blockquote highlight">
<h3 class="text-blue text-center">"The BindTuning Office 365 SharePoint Theme product is a unique solution to quickly build SharePoint solutions from end to finish."</h3>
</blockquote>

Basic paragraph blockquote

The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients build customized solutions with compressed design and implementation timelines

Roland Icard Director, Business & Tech Integration at Avanade

<blockquote class="blockquote">
            <p class="text-dark">The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients build
              customized solutions with compressed design and implementation timelines</p>
            <footer class="blockquote-footer">

              <div class="author-info">
                <span class="nomargin bold">Roland Icard</span>
                <cite>Director, Business & Tech Integration at Avanade</cite>
              </div>
            </footer>
          </blockquote>

Basic paragraph blockquote with image

The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients build customized solutions with compressed design and implementation timelines

Roland Icard Director, Business & Tech Integration at Avanade

<blockquote class="blockquote">
            <p class="text-dark">The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients build
              customized solutions with compressed design and implementation timelines</p>
            <footer class="blockquote-footer">

              <figure>
                <img class="img-responsive" src="https://cdn.geekwire.com/wp-content/uploads/2017/02/avanadelogo.png">
              </figure>
              <div class="author-info">
                <span class="nomargin bold">Roland Icard</span>
                <cite>Director, Business & Tech Integration at Avanade</cite>
              </div>
            </footer>
          </blockquote>

Basic paragraph blockquote within a slider

The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients build customized solutions with compressed design and implementation timelines

Roland Icard Director, Business & Tech Integration at Avanade

<div id="myCarousel" class="carousel bt-basic-carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="bg-gray-dark"></li>
              <li data-target="#myCarousel" data-slide-to="1" class="bg-gray-dark active"></li>
              <li data-target="#myCarousel" data-slide-to="2" class="bg-gray-dark"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item">
                <blockquote class="blockquote">
                  <p class="text-dark">The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients
                    build customized solutions with compressed design and implementation timelines</p>
                  <footer class="blockquote-footer">
                    <figure>
                      <img class="img-responsive" src="https://cdn.geekwire.com/wp-content/uploads/2017/02/avanadelogo.png">
                    </figure>
                    <div class="author-info">
                      <span class="nomargin bold">Roland Icard</span>
                      <cite>Director, Business & Tech Integration at Avanade</cite>
                    </div>
                  </footer>
                </blockquote>
              </div>
              <div class="item active">
                <blockquote class="blockquote">
                  <p class="text-dark">The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients
                    build customized solutions with compressed design and implementation timelines</p>
                  <footer class="blockquote-footer">
                    <figure>
                      <img class="img-responsive" src="https://cdn.geekwire.com/wp-content/uploads/2017/02/avanadelogo.png">
                    </figure>
                    <div class="author-info">
                      <span class="nomargin bold">Roland Icard</span>
                      <cite>Director, Business & Tech Integration at Avanade</cite>
                    </div>
                  </footer>
                </blockquote>
              </div>
              <div class="item">
                <blockquote class="blockquote">
                  <p class="text-dark">The BindTuning Office 365 SharePoint Theme product is a unique solution that helps clients quickly build mobile-ready, SharePoint solutions from end to finish. By leveraging BindTuning SharePoint Theme, we have been able to help clients
                    build customized solutions with compressed design and implementation timelines</p>
                  <footer class="blockquote-footer">

                    <figure>
                      <img class="img-responsive" src="https://cdn.geekwire.com/wp-content/uploads/2017/02/avanadelogo.png">
                    </figure>
                    <div class="author-info">
                      <span class="nomargin bold">Roland Icard</span>
                      <cite>Director, Business & Tech Integration at Avanade</cite>
                    </div>
                  </footer>
                </blockquote>
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">    
  </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
  </a>
          </div>

Video

Basic Video

Watch Video

<a id="watch-video" class="video-container play-video" data-video="https://www.youtube.com/embed/Oq4wlVTIxE0" alt="BindTuning at Microsoft Inspire 2017">
              <div class="video-play-icon">
                <i class="bt bt-play bt-3x text-white"></i>
              </div>
              <h4 class="text-white align-abs video-caption">Watch Video
              </h4>
              <img class="img-responsive center-block" src="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" data-original="https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg" width="100%" height="auto" alt="BindTuning at Microsoft Inspire 2017">
            </a>

Headers

Headers have more padding on top due to the consideration of the site menu presence

Basic Header

Small heihgt header for text

A framework for the digital workplace

We provide the building blocks to engage your employees and boost productivity

<section class="hero bg-light">
        
        <div class="hero-wrapper">
          <div class="container">
            <div class="row">
              <div class="col-md-8 center-block text-center">
                <h1 class="nav-fixer">A framework for the digital workplace</h1>
                <p>We provide the building blocks to engage your employees and boost productivity</p>
              </div>
              
            </div>
          </div>
        </div>
      </section>

Big Header

Header with text and image

A framework for the digital workplace

We provide the building blocks to engage your employees and boost productivity

Watch Video Try it now

<section class="hero big-hero">
        <figure>
          <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0882af6fc30960d027b31250a10b75d&auto=format&fit=crop&w=1051&q=80" class="img-responsive">
        </figure>
        <div class="hero-wrapper">
          <div class="container">
            <div class="row">
              <div class="col-md-8 center-block text-center">
                <h1 class="text-white nav-fixer">A framework for the digital workplace</h1>
                <p class="text-white">We provide the building blocks to engage your employees and boost productivity</p>
              </div>
              <div class="col-md-8 center-block text-center">
                <a id="#" class="btn btn-white-line btn-lg text-uppercase btn-space-right" href="#" target="_blank">Watch Video</a>
                <a id="#" class="btn btn-blue btn-lg text-uppercase" href="#" target="_blank">Try it now</a>
              </div>
            </div>
          </div>
        </div>
      </section>

Resources Post header

Blog Posts, Events and other cool BindTuning articles

Events

BindTuning at SP Conference Nowhere 2023

September, 12

<section class="hero overlay big-hero">
        <figure>
          <img src="https://images.unsplash.com/photo-1444084316824-dc26d6657664?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=61ae344590a3f18d3f1b6c650c49a6ed&auto=format&fit=crop&w=1350&q=80" class="img-responsive">
        </figure>
        <div class="hero-wrapper">
          <div class="container">
            <div class="row">
              <div class="col-md-8 center-block text-center">
                <span class="label bg-carrot">Events</span>
                <h1 class="text-white nav-fixer">BindTuning at SP Conference Nowhere 2023</h1>
                
                <h5 class="text-white">September, 12</h5>

              </div>

            </div>
          </div>
        </div>
      </section>

Heading

Overview

About BindTuning

Corporate Logo

The logo

The Logo Symbol

Blue square background

Blue logo on white background

Colors

Primary Colors

Secondary Colors

Complementary Colors

NEUTRALS

Extended Palete

Cerulean

Fuchsia

Carrot

Typography

This is Roboto

Usage

font-size

font-weight

line-height

margins

main title

Subtitle

subsubtitle

Content titles

Tags and labels

Normal text on paragraph

Smaller text on paragraph

Line Height

Text Formatting

Text Decoration

Text Color

Icon Family

Icons

Text with Icons

Title here

Title here

Title here

Title here

Products

Presenting products in order

Visual Differentiation

Themes

Icon

Color

Web Parts

Icon

Color

Clutch

Icon

Color

Images

Basic Images

Persona / User Images

Persona Big

Persona Default

Persona Small

Shadows

Backgrounds

Labels

Example

Buttons

Primary Buttons

Secondary Buttons

Dropdown Buttons

Links

Link example

Classes Used

Code

Tags

Alerts

Full width alert

Basic Alerts

Components

Social

Form Group

Basic Inputs