1 Grid

Grid

The Toyota ONE Grid is based on the bootstrap grid but takes only four columns as standard (one T1 column = 3 bootstrap columns since bootstrap is based on 12 columns grid and not 4). Extra divisions can be added as required. The grid responds to 4 breakpoints:

  • xs (< 768 - mobile)
  • sm (< 992 - tablet portrait)
  • md (< 1200 - tablet landscape, small desktop)
  • lg (>= 1200 - large desktop)
  • xl (>= 1600 - very large desktop) xl was added only for exceptional purposes.

NOTE:

Any items suffixed by CORE may be used by any NMSCs or 3rd party of the T1 project. Any item that don't have the "CORE" suffix or that are suffixed by EXTENDED are reserved to the "t1-client" & "t1-server" project and might evolved in a non-expected way for anyone using them out of those two projects.

1.1 mobile - CORE

mobile - CORE

.col-xs-x

.col-xs-12
.col-xs-6
.col-xs-3
.col-xs-3
<div class="container grid">
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-3">.col-xs-3</div>
        <div class="col-xs-3">.col-xs-3</div>
    </div>
</div>

1.2 tablet - CORE

.col-sm-x

.col-xs-12 .col-sm-6
.col-xs-6
.col-xs-3
.col-xs-3
<div class="container grid">
    <div class="row">
        <div class="col-xs-12 col-sm-6">.col-xs-12 .col-sm-6</div>
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-3">.col-xs-3</div>
        <div class="col-xs-3">.col-xs-3</div>
    </div>
</div>

1.3 small desktop - CORE

.col-md-x

.col-xs-12 .col-sm-6 .col-md-3
.col-xs-6 .col-md-3
.col-xs-3
.col-xs-3
<div class="container grid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 .col-sm-6 .col-md-3</div>
        <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
        <div class="col-xs-3">.col-xs-3</div>
        <div class="col-xs-3">.col-xs-3</div>
    </div>
</div>

1.4 large desktop - CORE

.col-lg-x

.col-xs-12 .col-sm-6 .col-lg-3
.col-xs-6 .col-lg-3
.col-xs-3 .col-lg-6
.col-xs-3 .col-lg-12
<div class="container grid">
   <div class="row">
     <div class="col-xs-12 col-sm-6 col-lg-3">.col-xs-12 .col-sm-6 .col-lg-3</div>
     <div class="col-xs-6 col-lg-3">.col-xs-6 .col-lg-3</div>
     <div class="col-xs-3 col-lg-6">.col-xs-3 .col-lg-6</div>
     <div class="col-xs-3 col-lg-12">.col-xs-3 .col-lg-12</div>
   </div>
</div>

1.5 container class - CORE

container class - CORE

The container class is a bootstrap utility class that can be used to contain your content in a fix-width block that evolves through the breakpoints. The illustration below shows you the difference between a contained section and a fullwidth one

.container

This is a contained fullwidth row(conatiner > row > col-xs-12). The background won't span fullwidth on pages and will be centered in the middle of the page.


This is a non-contained fullwidth row(row > col-xs-12). The background will span fullwidth on pages (unfortunatelly not on this styleguide section since the styleguide section is already contained).
<div class="container grid">
	<div class="row">
		<div class="col-xs-12">
			This is a contained fullwidth row(conatiner > row > col-xs-12). The background won't span
			fullwidth on pages and will be centered in the middle of the page.
		</div>
	</div>
</div>
<br><br>
<div class="grid">
	<div class="row">
		<div class="col-xs-12">
			This is a non-contained fullwidth row(row > col-xs-12). The background will span fullwidth on pages
			(unfortunatelly not on this styleguide section since the styleguide section is already contained).
		</div>
	</div>
</div>


1.6 core visibility classes - CORE

core visibility classes - CORE

Those classes can be used to handle the visibility of html tags depending on the breakpoint. Those come from boostrap and can be used as CORE elements (ref: CORE vs EXTENDED, see introduction note on this page).

Switch breakpoints and view markups to understand the visibility of each html tags in the following code.

.visible-xs, hidden-xs, hidden



This is only visible on XS devices (mobile).


<div class="container grid hidden-xs">
	<div class="row">
		<div class="col-xs-12">
			This isn't visible on XS devices (mobile).
		</div>
	</div>
</div>
<br><br>
<div class="container grid visible-xs">
	<div class="row">
		<div class="col-xs-12">
			This is only visible on XS devices (mobile).
		</div>
	</div>
</div>
<br><br>
<div class="container grid hidden">
	<div class="row">
		<div class="col-xs-12">
			This won't be visible until the hidden class is removed.
		</div>
	</div>
</div>


1.7 Extended grid utility classes - EXTENDED

1.7.1 Extended visibility classes - EXTENDED

Extended visibility classes - EXTENDED

The following visibility classes can also be used the same as the boostrap ones but are restricted to the t1-client and t1-server projects (EXTENDED).

The -ib suffix (eg: visible-xs-ib) is for inline-block => the css display rule is set to inline-block instead of block (visible-xs => display:block / visible-xs-ib => display:inline-block).

visible-xs-ib, visible-sm-ib, hidden-xs-ib, hidden-desktop-ib, hidden-desktop, hidden-lg, hidden-xl, visible-lg, visible-xl

This is visible on mobile only and displayed as an inline-block element.


This is only visible on LG devices.
<div class="container grid visible-xs-ib">
	<div class="row">
		<div class="col-xs-12">
			This is visible on mobile only and displayed as an inline-block element.
		</div>
	</div>
</div>
<br><br>
<div class="container grid visible-lg">
	<div class="row">
		<div class="col-xs-12">
			This is only visible on LG devices.
		</div>
	</div>
</div>

1.7.2 Automatic flow paragraphs - EXTENDED

With automatic flow, the paragraphs are automatically sliced in X columns from the indicated breakpoint. See illustration and markups for

.col-p-sm-2, .col-p-sm-3, .col-p-md-3, .col-p-md-2, .col-p-md-4

col-p-sm-2

DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.

col-p-sm-3

DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.

col-p-md-3

DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.

col-p-md-2

DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.

col-p-md-4

DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.

<style>
	.demo-col-p-class .col-xs-12{
		padding-top: 10px;
		padding-bottom: 10px;
	}
</style>

<div class="container grid demo-col-p-class">
	<div class="row">
		<div class="col-xs-12 col-p-sm-2">
			<h5>col-p-sm-2</h5>
			<p>DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl
				quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit.
			</p>

		</div>
		<div class="col-xs-12 col-p-sm-3">
			<h5>col-p-sm-3</h5>
			<p>DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl
				quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit.
			</p>

		</div>
		<div class="col-xs-12 col-p-md-3">
			<h5>col-p-md-3</h5>
			<p>DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl
				quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit.
			</p>

		</div>
		<div class="col-xs-12 col-p-md-2">
			<h5>col-p-md-2</h5>
			<p>DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl
				quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit.
			</p>

		</div>
		<div class="col-xs-12 col-p-md-4">
			<h5>col-p-md-4</h5>
			<p>DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl
				quis neque. Suspendisse in orci enim. DESKTOP - Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat
				auctor eu in elit.
			</p>

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

1.7.3 Print columns - EXTENDED

Print columns can be used if the content has to span differently on print pages. E.g: a DIV with col-xs-12 class combined with col-print-6 will span 50% instead of 100% on a print page.

.col-print-1, .col-print-2, .col-print-3, .col-print-4, .col-print-5, .col-print-6, .col-print-7, .col-print-8, .col-print-9, .col-print-10, .col-print-11, .col-print-12

This normally spans full width, but on a print pages it only spans 50%. Just do a print preview of the page to notice the difference.
This normally spans full width, but on a print pages it only spans 75%. Just do a print preview of the page to notice the difference.
<div class="container grid">
   <div class="row">
     <div class="col-xs-12 col-print-6">This normally spans full width, but on a print pages it only spans 50%. Just do
         a print preview of the page to notice the difference.</div>
       <div class="col-xs-12 col-print-9">This normally spans full width, but on a print pages it only spans 75%. Just
           do a print preview of the page to notice the difference.</div>
   </div>
</div>

1.7.4 center text on mobile - EXTENDED

center text on mobile - EXTENDED

center text on mobile only

.col-xs-center

This text will be centered on mobile
<div class="row"><div class="col-xs-12 col-xs-center">This text will be centered on mobile</div></div>

1.7.5 No gutter on mobile - EXTENDED

Set side gutter to 0 for a particular column

.no-padding-gutter-xs.col-xs-12

No gutter on this col for XS devices
<div class="row"><div class="col-xs-12 no-padding-gutter-xs">No gutter on this col for XS devices</div></div>

1.7.6 No gutter - EXTENDED

No gutter - EXTENDED

The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

.no-gutters

.col-xs-12 .col-md-8
.col-xs-12 .col-md-4
<div class="container no-gutters">
	<div class="row">
		<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
		<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
	</div>
</div>