10 Section setups

Section setups

This page will describe how to setup page sections correctly to make sure the setup is consistant for all sections.

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.

10.1 Section spacing rules + examples - CORE

Section spacing rules + examples - CORE

Spacing types

All vertical spacings must be in multiples of four. The following four key margins will help with the layout of sections on the page.

EXTRA LARGE MARGIN

Used to separate content blocks. Large amount of white space makes sure that user can distinguish between blocks without any additional cues.

LARGE MARGIN

Used above and below content blocks where neighbouring blocks have different background colours or one has an image. Since the background colour works as a visual cue, the Extra Large Margin is not needed.

MEDIUM MARGIN

Used to divide titles from the content it relates to. Medium margin helps to connect heading with the content below but also allows some breathing space.

SMALL MARGIN

In some scenarios, UI elements needs to sit closer together. Small margins could be used in these cases, for example if a CTA needs to be connected with the title of the section.

Core section utility classes

"section" class

Each uncolored section has the same margin-top and margin-bottom by default if applying the "section" class to it (the section doesn't necessarily have to use a section html tag). Margin bottom/top of the sections are merged so we will not have a double spacing between sections.
NOTE: previously we used padding-top and padding-bottom instead.

"t1-colored-section" class

If section should be colored please set the "t1-colored-section" class plus the color theme class (i.e "t1-grey-section"). Colored section is using padding-top and padding-bottom instead of margins so that the background is included in their top/bottom spacing (it won't work without a section class unless you don't want to color the top/bottom spacing). Padding collapsing does not exist so double spacing for the colored sections is handled with a light separator between.

"section-title" class

Section titles should have the "section-title" class added to obtain the correct margin-bottom between the section title and the section content. Note that the "section-title" class is dependent of it's "section" class parent element (it won't work out of a section context).

"small-margin-top" class

Section titles can also contain items such as buttons, links, etc... To connect the element to the title a "small-margin-top" class can be added on the connected element (click on show markup to see how this is setup). Note that other classes such as "s-margin-b", "xs-margin-t" are available to handle spaces as NON-CORE utility classes (they should only be used by the two following T1 projects: t1-client and t1-server)

Examples

In the following section examples, the main spacing rules are demonstrated by hovering the sections.

Section title

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi.

Title connected to toggle button

Connection between title and element
Show more (8)

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi.

Section title

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi.

Section title

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi.

<div class="t1-section-spacing-demo">
	<div class="maincontent">
		<section class="section">
			<div class="container">
				<header class="section-title">
					<h1>Section title</h1>
				</header>

				<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non
					neque elit. Sed ut imperdiet nisi.</p>

			</div>
		</section>

		<div class="section t1-colored-section t1-grey-section">
			<div class="container">
				<header class="section-title text-center">
					<h1>Title connected to toggle button</h1>

					<div class="s-margin-t-hover-demo text-center">Connection between title and element</div>
					<a href="#" class="btn btn-toggle btn-simple small-margin-top">
						<span>Show more (8)</span>
					</a>
				</header>

				<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non
					neque elit. Sed ut imperdiet nisi.</p>
			</div>
		</div>

		<section class="section t1-colored-section t1-grey-section">
			<div class="container">
				<header class="section-title">
					<h1>Section title</h1>
				</header>
				<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non
					neque elit. Sed ut imperdiet nisi.</p>
			</div>
		</section>

		<article class="section">
			<div class="container">
				<header class="section-title">
					<h1>Section title</h1>
				</header>
				<a class="btn btn-functional">Function button</a>
			</div>
		</article>

		<section class="section t1-colored-section t1-grey-section">
			<div class="container">
				<header class="section-title">
					<h1>Section title</h1>
				</header>
				<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. 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. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non
					neque elit. Sed ut imperdiet nisi.</p>
			</div>
		</section>

	</div>
</div>

10.2 Section utility classes

10.2.1 Spacing utility classes - EXTENDED

Here are some spacing utility classes that can be used to handle the spacing template-wise.

Ideally the spacing should be handled in the CSS to avoid overloading html tags with utility classes, but in some cases it is handy to be able to handle spaces in the template of a page itself.

.s-margin-t

.s-margin-b

.m-margin-b

.m-margin-t

.margin-b-0

.padding-t-0

.padding-right-0

.padding-left-0

.margin-r-0

Examples :

In the following examples, "show markup" to analyse the explanations and avoid a lot of confusion.

When are those utility classes usefull

In this case I've added a specific CSS rule to handle the spacing ".t1-spacing-utility-classes-demo .section-title p + .btn". Imagine this <p> element isn't added by the template ==> you will then have to add another rule for the spacing between "h2 + .btn" and if you don't use the CSS3 "+" selector you might have a useless spacing in case no element preceeds the button. That's when those spacing utility classes come in handy.

Show more (8)

s-margin-t => medium margin bottom

No need for specific CSS rules to handle this spacing, a simple utility class handles it and can be added conditionally inside the template.

Show more (8)

s-margin-b => small margin bottom

Small margin bottom utility class used on top html tag.

m-margin-b => medium margin bottom

Medium margin bottom utility class used on top html tag.

m-margin-b => medium margin bottom

Medium margin top utility class used on html tag.

margin-b-0 => margin bottom 0

This section title was forced to have "margin-bottom: 0". Note that "padding-t-0" and "margin-r-0" also exist.

<div class="t1-spacing-utility-classes-demo">
	<section class="section">
		<div class="container">
			<!-- Added for the demo-->
			<style>
				.t1-spacing-utility-classes-demo .section-title p + .btn{
					margin-top: 24px;
				}

				@media (min-width: 992px){
					.t1-spacing-utility-classes-demo .section-title p + .btn{
						margin-top: 40px;
					}
				}
			</style>
			<header class="section-title">
				<h2>When are those utility classes usefull</h2>
				<p class="text-left">
					In this case I've added a specific CSS rule to handle the spacing
					".t1-spacing-utility-classes-demo .section-title p + .btn". Imagine this &lt;p&gt; element isn't added
					by the template ==> you will then have to add another rule for the spacing between "h2 + .btn" and
					if you don't use the CSS3 "+" selector you might have a useless spacing in case no element preceeds
					the button. That's when those spacing utility classes come in handy.
				</p>
				<a href="#" class="btn btn-toggle btn-simple">
					<span>Show more (8)</span>
				</a>
			</header>

			<header class="section-title">
				<h2>s-margin-t => medium margin bottom</h2>
				<p class="text-left">
					No need for specific CSS rules to handle this spacing, a simple utility class handles it and can
					be added conditionally inside the template.
				</p>
				<a href="#" class="btn btn-toggle btn-simple s-margin-t">
					<span>Show more (8)</span>
				</a>
			</header>

			<header class="section-title">
				<h3 class="text-left s-margin-b">s-margin-b => small margin bottom</h3>
				<p class="text-left">
					Small margin bottom utility class used on top html tag.
				</p>
			</header>

			<header class="section-title">
				<h3 class="text-left m-margin-b">m-margin-b => medium margin bottom</h3>
				<p class="text-left">
					Medium margin bottom utility class used on top html tag.
				</p>
			</header>

			<header class="section-title">
				<h3 class="text-left">m-margin-b => medium margin bottom</h3>
				<p class="text-left m-margin-t">
					Medium margin top utility class used on html tag.
				</p>
			</header>

			<header class="section-title margin-b-0">
				<h3 class="text-left">margin-b-0 => margin bottom 0</h3>
				<p class="text-left">
					This section title was forced to have "margin-bottom: 0". Note that "padding-t-0" and
					"margin-r-0" also exist.
				</p>
			</header>
		</div>
	</section>
</div>