Introduction

Welcome to our styleguide !

It provide base styles and all the HTML (Jekyll) / CSS (SCSS) components used in our website.


A styleguide fosters and offers many advantages :

  • consistency and logic in visual identity, leading to a better UX;
  • fast and easy component testing and prototyping;
  • better and more methodical workflow with easier modular components design and faster view assembly;
  • extensible and scalable as much as you want, for improved functionalities or new views;
  • common system vocabulary and basis definition, facilitating communication to all the actors, team members as well as clients;
  • facilitate the arrival of new designers and developpers in the project.

This styleguide is mobile responsive and has cross-browser support (we no longer support IE 9 or lower).

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

CSS Architecture

To make this design system accessible to all, the CSS selectors follow a specific naming convention making it more legible and easier to use.


CSS principles

The design system follows the CSS principles established by Brad Frost :

  1. "Make it modular" : the components should be independent to insure that the design system is really flexible ;
  2. "Legibility is key" : the naming and coding of a component should be explicit and let the developer easily understand its structure and its purpose ;
  3. "Clarity trumps succinctness" : a component should not sacrifice its legibility in order to be less verbose or to have a shorter syntax. Legibility must remains the key ;
  4. "Keep things flat" : independence between components should be avoided as often as possible, meaning that selector should not be too long and too deep and as DOM-independent as possible ;
  5. "Avoid conflicts" : the components should not conflict with other libraries and systems, or with components from the same design system.

Class prefixes

In addition to this global namespace, we add another limited prefixes to specify the purpose of the element.

There are 6 different prefixes in our design system :

  • the UI components are prefixes with -c ;
  • the layouts are prefixes with -l ;
  • the utilities are prefixes with -u ;
  • the behaviours are prefixes with -js (JavaScript functionalities) ;
  • the states are prefixes with -is and -has ;
  • the views are prefixes with -view ;

Class naming

The selectors from the design system follow the BEM syntax, meaning :

  • Block is the primary independent component block, corresponding to the only name of the element, such as c-card ;
  • Element designates an element FROM the block, meaning a direct or indirect child of the primary block. It is designated by a double underscore __ separator, such as c-card__title ;
  • Modifier is the variation of a block style. it is designated by a double dash --, such as c-card--primary .

Draft Draft

This section is currently in progress...

Mixins

Add-arrow

Creates a directional css arrow.

	@include add-arrow($position, $size, $color, $borderWidth, $borderColor, $offset)

Clearfix

Clears float element (based on Nicolas Gallagher "micro clearfix hack").

	@include clearfix()

Diffused-box-shadow

Creates a long shadow by creating a shadowed block under the element.

Enable hover effect with $hover boolean.

	@include diffused-box-shadow($diffusion, $hover)

Gradient-directional

Creates a background gradient.

	@include gradient-directional($deg, $start-color, $end-color)

Skew-section

Creates skewed section.

Enable shadow on section with the$shadow argument (boolean).

	@include skew-section($shadow)

Reset-ul

Resets browser default style on the ul item.

	@include reset-ul()

Colors

Blue

$blue-dark
#3239e8

$blue-base
#2b7de8

$blue-deep
#38bfea

blue-ice

$blue-ice-dark
#00adcf

$blue-ice-base
#8ac8df

Green

$green-dark
#5ed3a0

$green-base
#30d8e3

$green-deep
#34d8fb

Orange

$orange-deep
#ffcb7a

$orange-dark
#f245aa

Pink

$pink-dark
#7e00e5

$pink-base
#cd307b

$pink-deep
#f44848

Purple

$purple-dark
#764ba2

$purple-base
#5e63d5

$purple-deep
#667eea

Gradients

$gradient-blue-(start/end)
#38bfea/#3239e8

$gradient-blue-ice-(start/end)
#8ac8df/#00adcf

$gradient-orange-(start/end)
#ffcb7a/#f245aa

$gradient-green-(start/end)
#34d8fb/#5ed3a0

$gradient-pink-(start/end)
#f44848/#7e00e5

$gradient-purple-(start/end)
#667eea/#764ba2

Greys

$grey10
#262729

$grey20
#313131

$grey30
#4d4d4d

$grey40
#888

$grey50
#aeaeae

$grey60
#ccc

$grey70
#4eaeaea44

$grey80
#f4f4f4


Job color

Accelerate

$accelerate-tertiary
#3239e8

$accelerate-primary
#2b7de8

$accelerate-secondary
#38bfea

Palace

$palace-secondary
#00adcf

$palace-primary
#8ac8df

Startup

$startup-tertiary
#5ed3a0

$startup-primary
#30d8e3

$startup-secondary
#34d8fb

Roomservice

$roomservice-tertiary
#7e00e5

$roomservice-primary
#cd307b

$roomservice-secondary
#f44848

Corporate

$corporate-tertiary
#764ba2

$corporate-primary
#5e63d5

$corporate-secondary
#667eea

Gradients

$gradient-accelerate-(start/end)
#38bfea/#3239e8

$gradient-palace-(start/end)
#8ac8df/#00adcf

$gradient-startup-(start/end)
#34d8fb/#5ed3a0

$gradient-roomservice-(start/end)
#f44848/#7e00e5

$gradient-corporate-(start/end)
#667eea/#764ba2

SP Universe

As we saw in the colors section, the Startup Palace visual design is a colorful universe that achieves to keep its consistency accross interdependent identities.

In order to keep this consistency without multiplying the versions of a same component, all the "job" colors are managed globally. It means that if the color of a component depends on a specific universe (Corporate, Startup, Roomservice, ...), then its color is given by a global class.

There is as many global classes as there are universes.

	<div class="l-view--palace"></div>
	<div class="l-view--startup"></div>
	<div class="l-view--roomservice"></div>
	<div class="l-view--corporate"></div>

The colors are then applied to the views thanks to specific utilities and component classes defined in the apply-view-color mixin.







To extend this color management to non-specific universe views, such as neutral landings, there also is agnostic global classes.


	<div class="l-view--blue"></div>
	<div class="l-view--blue-ice"></div>
	<div class="l-view--green"></div>
	<div class="l-view--purple"></div>
	<div class="l-view--pink"></div>

Icons

Icons are used with the jekyll include method and a specific id attribute. The attribute is mandatory for the icons with a gradient.

	{ % include /svg/name.svg id="myId" % }

/svg/logo-palace-line.svg
/svg/logo-palace.svg
/svg/burger.svg
/svg/area.svg id="area-exemple"
/svg/arrow-plus.svg
/svg/arrow-white.svg
/svg/bank.svg
/svg/chemistry.svg
/svg/geoloc.svg
/svg/happy.svg
/svg/house.svg

/svg/little-triangle.svg
/svg/market.svg
/svg/network.svg
/svg/plant.svg
/svg/team.svg
/svg/wallet.svg
/svg/dna.svg
/svg/dna-blue.svg
/svg/list.svg
/svg/list-blue.svg
/svg/medal.svg
/svg/medal-blue.svg
/svg/origami.svg
/svg/origami-blue.svg
/svg/arrow-button.svg
/svg/arrow-small.svg
/svg/arrow.svg

Icon shadow

Add a shadow behind an icon


	<div class="l-container">
		<div class="c-icon-shadow">
			<svg src="...">
		</div>
	</div>

Draft Draft

This section is currently in progress...

Container

The container is used to reduce the width of a content in the view.


The default container is adaptative and sets a different width to the content according the default breakpoints.


	<div class="l-container">...</div>

Modifiers

3 smaller sizes for the container are made available.


	<div class="l-container-sm">...</div>
	<div class="l-container-md">...</div>
	<div class="l-container-lg">...</div>

Grids

Grids are mare of a global .l-grid class and different sizes of columns. All the columns break at the main breakpoint to form a unique column.


Full-based

	<div class="l-grid">

		<div class="l-col-full"></div>

	</div>

2-based

	<div class="l-grid">

		<div class="l-col-one-half"></div>

	</div>

3-based

	<div class="l-grid">

		<div class="l-col-one-third"></div>

		<div class="l-col-two-third"></div>

	</div>

4-based

	<div class="l-grid">

		<div class="l-col-one-quarter"></div>

		<div class="l-col-three-quarter"></div>

	</div>

5-based

	<div class="l-grid">

		<div class="l-col-one-fifth"></div>

		<div class="l-col-two-fifth"></div>

		<div class="l-col-three-fifth"></div>

		<div class="l-col-four-fifth"></div>
	</div>

Header

The header is used on every views and landings of the platform. It is made of a left-aligned logo and an optional navbar.


	<div class="c-header">
		<div class="u-bg-white">
			<div class="l-container u-pd-hz-s">
				<div class="l-grid u-flex-center-vt u-flex-between">
					<a href="/" title="logo-palace" class="u-svg-view-color u-flex"><svg width="132" height="19" viewBox="0 0 132 19" xmlns="http://www.w3.org/2000/svg"><g id="ACCELERATEUR-DESKTOP" fill="none" fill-rule="evenodd"><g fill="#2B7DE8"><g id="HEADER"><path d="M6.677 2.677c-.603-.16-1.193-.24-1.77-.24-1.022 0-1.84.203-2.454.61-.615.408-.922.95-.922 1.63 0 .59.158 1.072.47 1.442.315.37.702.656 1.163.86.46.203 1.085.43 1.872.675.873.26 1.58.512 2.12.76.542.246.997.61 1.366 1.09.37.482.554 1.105.554 1.87 0 .666-.184 1.255-.553 1.767-.368.512-.89.907-1.567 1.184-.676.278-1.463.417-2.36.417-.85 0-1.685-.173-2.51-.518C1.26 13.88.567 13.423 0 12.855l.406-.684c.516.556 1.156.99 1.918 1.305.762.315 1.525.472 2.287.472 1.12 0 2.005-.23 2.657-.694.65-.463.977-1.082.977-1.86 0-.604-.16-1.095-.48-1.47-.32-.377-.716-.67-1.19-.88-.472-.21-1.102-.432-1.89-.666-.885-.27-1.59-.527-2.11-.768-.524-.242-.966-.596-1.33-1.065-.362-.47-.543-1.08-.543-1.832 0-.617.176-1.16.526-1.63.35-.467.85-.828 1.494-1.08.646-.254 1.387-.38 2.223-.38.652 0 1.306.095 1.964.286.658.19 1.233.447 1.725.767l-.35.704c-.468-.308-1.003-.542-1.605-.703zm10.107 11.326c-.677.456-1.36.684-2.048.684s-1.217-.225-1.586-.675c-.37-.45-.553-1.12-.553-2.008v-6.07h-1.402v-.666h1.402V2.88h.738V5.27H16.6v.666h-3.265v5.977c0 1.346.498 2.02 1.494 2.02.564 0 1.117-.186 1.658-.557l.296.63zm8.52.666l-.018-1.907c-.393.654-.92 1.138-1.577 1.452-.66.315-1.412.472-2.26.472-.627 0-1.18-.123-1.66-.37s-.852-.583-1.116-1.008c-.264-.427-.397-.91-.397-1.454 0-.802.32-1.434.96-1.897.64-.463 1.512-.695 2.62-.695h3.41V8.32c-.012-.825-.258-1.467-.737-1.923-.48-.457-1.193-.685-2.14-.685-.578 0-1.125.108-1.64.324-.518.216-1.046.527-1.587.935l-.37-.592c.628-.456 1.23-.798 1.808-1.027.58-.227 1.212-.34 1.9-.34 1.12 0 1.984.29 2.592.87.61.58.92 1.374.932 2.386l.037 6.403h-.756zm-1.4-1.297c.638-.407 1.1-1.024 1.382-1.85V9.95H21.93c-.947 0-1.67.16-2.168.48-.498.322-.747.79-.747 1.407 0 .642.23 1.16.692 1.555.46.395 1.08.592 1.853.592.923 0 1.703-.203 2.343-.61zm7.828-7.707c.61-.413 1.343-.632 2.204-.657v.795c-1.045 0-1.88.324-2.508.97-.627.65-.984 1.54-1.07 2.675v5.22h-.775V5.027h.775v2.424c.307-.778.765-1.373 1.374-1.786zm8.825 8.337c-.676.456-1.358.684-2.047.684-.69 0-1.217-.225-1.586-.675-.37-.45-.553-1.12-.553-2.008v-6.07h-1.4v-.666h1.4V2.88h.738V5.27h3.265v.666h-3.265v5.977c0 1.346.498 2.02 1.494 2.02.566 0 1.12-.186 1.66-.557l.295.63zm10.31-8.975v9.64h-.756V12.1c-.306.837-.79 1.476-1.447 1.914-.658.438-1.46.663-2.407.675-1.156 0-2.056-.333-2.702-1-.645-.665-.968-1.59-.968-2.775V5.028h.756v5.736c0 .987.27 1.758.812 2.313.54.555 1.297.833 2.268.833 1.156-.025 2.06-.407 2.71-1.147.653-.74.98-1.746.98-3.017V5.028h.755zm11.186.6c.707.414 1.257.988 1.65 1.722.394.734.59 1.57.59 2.507 0 .926-.196 1.755-.59 2.49-.393.733-.94 1.307-1.64 1.72-.702.414-1.5.62-2.398.62-.935 0-1.756-.225-2.463-.675-.707-.45-1.244-1.07-1.613-1.86v6.107h-.776V5.027h.775v2.535c.368-.802.905-1.428 1.612-1.88.707-.45 1.528-.674 2.463-.674.885 0 1.68.206 2.388.62zm-.443 7.81c.61-.35 1.082-.84 1.42-1.462.34-.623.508-1.33.508-2.12 0-.788-.17-1.494-.507-2.117-.338-.624-.81-1.115-1.42-1.473-.608-.357-1.294-.536-2.056-.536s-1.445.18-2.047.537c-.603.358-1.073.85-1.41 1.472-.34.622-.508 1.328-.508 2.117 0 .79.168 1.496.506 2.12.338.622.808 1.11 1.41 1.46.603.353 1.286.53 2.048.53s1.448-.177 2.056-.53zM81.022 2.89c.91.796 1.365 1.915 1.365 3.36 0 1.53-.455 2.716-1.365 3.56-.91.846-2.188 1.27-3.836 1.27H74.88v3.59h-3.375V1.696h5.68c1.65 0 2.927.397 3.837 1.193zm-2.407 4.97c.375-.347.563-.846.563-1.5 0-.63-.188-1.113-.563-1.453-.375-.34-.906-.51-1.595-.51h-2.14v3.98h2.14c.69 0 1.22-.173 1.595-.518zm13.14-2.38c.764.636 1.15 1.528 1.163 2.675v6.514H89.69v-1.13c-.663.85-1.665 1.277-3.006 1.277-1.057 0-1.89-.287-2.5-.86-.607-.574-.912-1.33-.912-2.268 0-.95.33-1.69.987-2.22.657-.532 1.6-.803 2.83-.815h2.6v-.11c0-.483-.162-.853-.488-1.112-.326-.26-.796-.388-1.41-.388-.42 0-.89.067-1.412.203-.523.136-1.048.333-1.577.592L83.9 5.62c.81-.37 1.59-.645 2.332-.824.744-.18 1.516-.268 2.315-.268 1.377 0 2.447.318 3.21.953zm-2.765 6.737c.37-.24.602-.552.7-.935v-.87h-1.954c-.923 0-1.384.346-1.384 1.037 0 .344.12.62.36.822.24.204.57.306.987.306.49 0 .92-.12 1.29-.36zM95.224.937h3.283V14.67h-3.283V.937zm13.593 4.544c.762.636 1.15 1.528 1.16 2.675v6.514h-3.226v-1.13c-.663.85-1.665 1.277-3.005 1.277-1.058 0-1.89-.287-2.5-.86-.608-.574-.912-1.33-.912-2.268 0-.95.328-1.69.986-2.22.657-.532 1.6-.803 2.83-.815h2.6v-.11c0-.483-.162-.853-.488-1.112-.326-.26-.796-.388-1.41-.388-.42 0-.89.067-1.412.203-.522.136-1.048.333-1.577.592l-.903-2.22c.81-.37 1.59-.645 2.333-.824.744-.18 1.515-.268 2.314-.268 1.377 0 2.447.318 3.21.953zm-2.767 6.737c.37-.24.603-.552.7-.935v-.87h-1.954c-.922 0-1.383.346-1.383 1.037 0 .344.12.62.36.822.24.204.568.306.986.306.49 0 .92-.12 1.29-.36zm10.623-4.95c-.59 0-1.07.225-1.438.675-.37.45-.553 1.033-.553 1.75 0 .727.184 1.313.553 1.757.37.443.848.665 1.438.665.91 0 1.562-.376 1.955-1.13l2.417 1.39c-.394.764-.984 1.356-1.77 1.776-.788.42-1.71.63-2.768.63-1.02 0-1.918-.21-2.692-.63-.775-.42-1.374-1.01-1.8-1.776-.423-.765-.635-1.653-.635-2.665 0-1.025.215-1.928.646-2.712.43-.783 1.036-1.388 1.816-1.813.78-.426 1.682-.64 2.702-.64.996 0 1.882.208 2.656.62.775.415 1.377.998 1.808 1.75l-2.38 1.388c-.467-.69-1.118-1.036-1.955-1.036zM130.69 5.99c.874.962 1.31 2.282 1.31 3.96 0 .26-.006.456-.018.592h-6.935c.16.568.436 1.002.83 1.305.393.302.873.453 1.438.453.43 0 .846-.086 1.245-.26.4-.172.766-.425 1.098-.758l1.715 1.72c-.516.58-1.14 1.022-1.872 1.324-.73.303-1.558.454-2.48.454-1.07 0-2.004-.21-2.803-.63-.8-.42-1.41-1.01-1.835-1.776-.424-.765-.637-1.653-.637-2.665 0-1.025.216-1.928.646-2.712.43-.783 1.04-1.388 1.827-1.813.787-.426 1.697-.64 2.73-.64 1.623 0 2.87.483 3.744 1.445zm-1.88 2.794c0-.58-.17-1.045-.508-1.397-.338-.352-.784-.527-1.337-.527-.516 0-.95.172-1.3.518-.35.345-.58.814-.692 1.406h3.836z" /></g></g></g></svg>
</a>
				</div>
			</div>
		</div>
	</div>

Note that the color of the logo depends on the global universe class.



The header can have a sticky behaviour with a --fixed modifier.

	<div class="c-header c-header--fixed">
		...
	</div>

In this case, various utilities are made available to adjust the layout:

u-pd-navbar-top

Padding top with the exact size of the navbar.

u-mg-navbar-top

margin top with the exact size of the navbar.

Navbar

Basic navbar

The basic navbar component is used to display a list of links. It becomes a dropdown menu on smaller devices.


	<nav>
		<ul class="c-navbar">
			<li>
				<a href="#item1" class="js-smoothScroll">navigation_item1</a>
			</li>
			<li>
				<a href="#item2" class="js-smoothScroll">navigation_item2</a>
			</li>
			<li>
				<a href="#item3" class="js-smoothScroll">navigation_item3</a>
			</li>
		</ul>

		<div class="c-navbar__overflow">
			<a href="#" class="js-toggle" data-target="#myNav">
				<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22">
    <g id="nav-stack-header" fill="#4E4E4E"><path fill-rule="evenodd" d="M0 0h23v5.077H0V0zm0 8.462h23v5.076H0V8.462zm0 8.461h23V22H0v-5.077z"/></g>
</svg>

			</a>
			<ul id="myNav" class="c-navbar__hidden-links u-hide">
				<li>
					<a href="#item1" class="js-smoothScroll">navigation_item1</a>
				</li>
				<li>
					<a href="#item2" class="js-smoothScroll">navigation_item2</a>
				</li>
				<li>
					<a href="#item3" class="js-smoothScroll">navigation_item3</a>
				</li>
			</ul>
		</div>
	</nav>

Priority Navigation

The priority navigation component is also used to display a list of links, but unlike the basic navbar, it doesn't change at a specific breakpoint. Instead, it hides in a contextual dropdown every latest visible link that doesn't fit into the container.


	<nav class="c-priority-nav [js-priority-nav]">
		<ul class="c-navbar js-priority-nav__navbar">
			<li>
				<a href="#item1" class="js-smoothScroll">navigation_item1</a>
			</li>
			<li>
				<a href="#item2" class="js-smoothScroll">navigation_item2</a>
			</li>
			<li>
				<a href="#item3" class="js-smoothScroll">navigation_item3</a>
			</li>
			<li>
				<a href="#item4" class="js-smoothScroll">navigation_item4</a>
			</li>
			<li>
				<a href="#item5" class="js-smoothScroll">navigation_item5</a>
			</li>
		</ul>

		<div class="c-priority-nav__overflow [js-priority-nav__overflow]">
			<a href="#" class="c-priority-nav__trigger js-priority-nav__trigger" title="Liens de navigation masqués">
				<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22">
    <g id="nav-stack-header" fill="#4E4E4E"><path fill-rule="evenodd" d="M0 0h23v5.077H0V0zm0 8.462h23v5.076H0V8.462zm0 8.461h23V22H0v-5.077z"/></g>
</svg>

				<svg width="8" height="4" viewBox="0 0 8 4" class="c-priority-nav__caret"><path d="M7.76,1L4.46,3.84a0.73,0.73,0,0,1-.92,0L0.24,1A0.56,0.56,0,0,1,.1.24,0.55,0.55,0,0,1,.7,0H7.3A0.55,0.55,0,0,1,8,.41,0.56,0.56,0,0,1,7.76,1Z"></path></svg>
			</a>
			<ul class="c-priority-nav__hidden-links js-priority-nav__hidden-links u-pd-m">
			</ul>
		</div>
	</nav>

Headings

Use tags (h1 h2 h3 ...) for semantics and classes (sg-h1 sg-h2 sg-h3...) for styles.


h1 default title

h2 default title

h3 default title

h4 default title

	<h1 class="c-h1">h1 default title</h1>
	<h2 class="c-h2">h2 default title</h2>
	<h3 class="c-h3">h3 default title</h3>
	<h4 class="c-h4">h4 default title</h4>

Paragraphs

The default content text is styled with the .c-p class.

	<p class="c-p">default text</p>

Blockquote

For quoting blocks of content from another source within your document.


"Lorem ipsum dolor sit amet."

	<p class="c-blockquote">"Lorem ipsum dolor sit amet."</p>

Form group

The .c-form-group components are meant for dividing the various elements of a form into clearer and more readable pieces. They are use to wrap label and input for optimum spacing.

The .c-form-label component is meant to style the label in form contexts.

The .c-form-control component is used to give all inputs a coherent styling.



	<div class="c-form-group">
		<label class="c-form-label c-form-label--required" for="form-name">Name</label>
		<input type="text" class="c-form-control" id="form-name" placeholder="Your name">
	</div>
	

Required

Specify the required attribute on the input.

Add the is-required state class to the .c-form-group to add the * at the end of the label.


	<div class="c-form-group is-required">
		...
	</div>
	

Inline

The --inline modifier on the c-form-group allows the label and the input to behave like they are inline components.


	<div class="c-form-group c-form-group--inline">
		...
	</div>
	

Form error

When a compulsory input is not filled or when an input contains an error, a .has-error class is added to the .c-form-group container of the specific input.


	<div class="c-form-group has-error">
		...
	</div>
	

Textarea

The textarea inputs is styled in the same way as a basic input to convey a visual coherence. However a .c-form-control--textarea is required on the textarea to guarantee this coherence.


	<div class="c-form-group">
		<label class="c-form-label" for="form-message">Leave a message</label>
		<textarea rows="3" class="c-form-control c-form-control--textarea" id="form-message" placeholder="Message..."></textarea>
	</div>
	

Shadow

The c-form-group--shadow modifier adds a shadow under the input.




	<div class="c-form-group c-form-group--shadow">
		...
	</div>

	<div class="c-form-group c-form-group--inline c-form-group--shadow">
		...
	</div>
	

Add-on button

A button can be added directly right after the input to form a c-form-group--addon.



	<div class="c-form-group c-form-group--addon">
		<input class="c-form-control" placeholder="placeholder" type="text">
		<button type="submit" class="c-form-btn u-bg-view-color">Validate</button>
	</div>
	

Select

The select inputs is styled in the same way as a basic input to convey a visual coherence. However a .c-form-control--select is required on the select to guarantee this coherence.



	<div class="c-form-group">
		<label class="c-form-label" for="select-example">Select</label>
		<div class="c-select-container">
			<select id="select-example" class="c-form-control c-form-control--select">
				<option>1</option>
				<option>2</option>
			</select>
		</div>
	</div>
	

Checkboxes & Radio button

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Only the label is visible by users so don't forget to link the input (id attribute) with the right label (for attribute).

Checkboxes


	<div class="c-form-group">
		<input class="c-checkbox" type="checkbox" id="checkbox-test" name="checkbox test">
		<label for="checkbox-test">Option</label>
	</div>
	

Radio


	<div class="c-form-group">
		<input class="c-radio" type="radio" id="radio-test" name="radio-profil">
		<label for="radio-test">Option</label>
	</div>
	

Buttons

Use the different custom buttons styles for actions in sections, forms, and more. Button can be used in a or button tag.


	<button type="button" class="c-btn">
		<div class="c-btn__background">
			Validate
		</div>
	</button>

Variations

	<a href="#" class="c-btn c-btn--light">
		<span class="c-btn__background">
			Validate
		</span>
	</a>

	<a href="#" class="c-btn c-btn--dark">
		<span class="c-btn__background">
			Validate
		</span>
	</a>

Images

The images are managed with the lazysizes plugin for lazyloading. It means that the image is only loaded if necessary. Since it is based on a script, do not forget the noscript alternative.


An image with lazyload class goes throught 3 steps :

  • lazyload : the image isn't loaded nor requested
  • lazyloading : the image is requested and loading
  • lazyloaded : the image is fully loaded.


sample
	<img class="lazyload" data-src="img/sg-exemple.jpg" alt="sample">
	<noscript>
		<img src="img/sg-exemple.jpg" alt="sample">
	</noscript>

Overlay image

The c-img-overlay component creates an image with a min-width and a black transparent overlay.

sample
	<div class="c-img-overlay">
		<img class="lazyload" data-src="img/sg-exemple.jpg" alt="sample">
		<noscript>
			<img src="img/sg-exemple.jpg" alt="sample">
		</noscript>
	</div>

Timeline

The timeline component is used for visualising project steps.


Step example

with some text

Second example

with some text

Last example

with some text

	<div class="c-timeline u-center">
		<div class="c-timeline__step">
			<h2 class="c-timeline__title">Step example</h2>
			<p class="c-p">with some text</p>
		</div>
		<div class="c-timeline__step">
			<h2 class="c-timeline__title">Second example</h2>
			<p class="c-p">with some text</p>
		</div>
		<div class="c-timeline__step">
			<h2 class="c-timeline__title">Last example</h2>
			<p class="c-p">with some text</p>
		</div>
	</div>

Modal

Modals are used to display additional page content.


	<button type="button" class="c-btn js-modal-btn" data-target="modal-example">
		<div class="c-btn__background">Open</div>
	</button>

	<div class="c-modal js-modal" id="modal-example">
		<div class="c-modal__content">
			<button type="button" class='c-modal__close js-modal-close'>x</button>
			<p class="c-p">Modal content.</p>
		</div>
	</div>

Badge

The badge component gives a specific shape to a content, for instance an image or a logo. It has a fixed size.



	<div class="c-badge">
		{ % include /svg/logo-palace.svg % }
	</div>

Card

The c-card component adds a white background, a border-radius and box-shadow to convey a visual coherence accros the application and to demarcate areas of informations. It's a simple block with card style. By default, a .c-card has no padding.



	<div class="c-card">
		...
	</div>

You can add any other component inside a card.


Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores facere sit iure harum quibusdam quas ut temporibus necessitatibus.

Tiles

Tiles are components made of an image (with or without any overlay) and some typography elements to illustrate a content or a link.

For a specific layout, include it within a grid.


sample

Title

Lorem ipsum


	<div class="c-tile">
		<img class="lazyload u-height-full c-tile__bg-img" data-src="img/sg-exemple.jpg" alt="sample">
		<noscript>
			<img src="img/sg-exemple.jpg" class="c-tile__bg-img" alt="sample">
		</noscript>
		<div class="c-tile__content">
			<h3 class="c-h3">Title</h3>
			<p class="c-p">Lorem ipsum</p>
		</div>
	</div>


	<a href="#" class="c-tile">
		<div class="c-img-overlay u-height-full">
			...
		</div>
		<div class="c-tile__content">
			...
		</div>
	</a>

Overhead

The overhead component is a floating component that exceeds the limits of its container and goes over its preview and next siblings. It creates a special graphic effect to highlight some content.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris vitae velit sem. Maecenas vestibulum interdum ullamcorper. Aliquam efficitur, nulla a accumsan lacinia, dolor elit dictum libero, hendrerit pretium nulla eros eget est. Integer vel scelerisque est. Fusce lorem lacus, laoreet a aliquam vel, venenatis quis lectus. Fusce a mi tristique, iaculis lectus sed, condimentum felis.

Morbi sodales, sapien et consequat aliquam, dui sapien molestie orci, sollicitudin molestie quam enim sed nulla. Vestibulum vel purus arcu. Nullam lectus magna, placerat vel nisi sit amet, laoreet viverra nulla.

Vivamus auctor lacus at volutpat accumsan.

Aliquam imperdiet accumsan diam, et rhoncus tellus ultricies ac. Ut laoreet semper turpis vel dictum. Cras id mi posuere, convallis justo eget, consequat sapien. Sed ullamcorper tristique lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

	<div class="c-overhead">
		<p class="c-p">Lorem ipsum [...]</p>
	</div>

Footband

The footband is a skewed section inserted before the footer and often used to "brand" the view and offers a way to contact the team.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, adipisci placeat. Suscipit, quod accusantium explicabo corporis quasi, dolorum quos perspiciatis consequatur pariatur expedita consectetur quis eum, autem non, officia id.

Contact

	<section id="postulate" class="c-footband u-pd-skew">

		<div class="c-footband__bg-layer"></div>
		<div class="c-footband__bg-layer"></div>
		<div class="c-footband__bg-layer"></div>
		<div class="c-footband__bg-layer"></div>

		<div class="l-container l-container-md u-center u-pd-vt-xl u-mg-bottom-l">

			<span class="c-footband__icon c-icon-shadow u-svg-white u-mg-bottom-m">
				{ % include svg/message.svg % }
			</span>

			<p class="c-p u-mg-bottom-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, adipisci placeat. Suscipit, quod accusantium explicabo corporis quasi, dolorum quos perspiciatis consequatur pariatur expedita consectetur quis eum, autem non, officia id.</p>

			<a href="#" title="contact Startup Palace" class="c-btn c-btn--light u-mg-top-l">
				<span class="c-btn__background">
					{ % include svg/arrow-button.svg % }
					Contact
				</span>
			</a>

		</div>
	</section>

Typography

u-bold

Bold text

u-font-base

Gives the basic font-family of the application

u-font-heading

Gives the headings' font-family of the application

Spacing

All the spaces and white spaces of the application is controled by utilities, especially with margin and padding utilities.


These utilities are built with different prefixes and suffixes:

  • property: m- for margin and p- for padding;
  • direction: -top, -right, -bottom, -left ; -vt for top and bottom, -hz for right and left ; default (nothing) for every direction;
  • size: -s, -m, -l, -xl, -0;
  • breakpoint: specify the \@main suffix to only apply the utility from the main breakpoint.

Non-exhaustive samples

u-pd-m

m-sized padding to every direction.

u-mg-m

m-sized margin to every direction.

u-mg-vt-l

l-sized margin applied to the top and bottom.

u-mg-hz-l

l-sized margin applied to the left and right.

u-pd-0@main

Removes padding to every direction at the main breakpoint.

u-pd-left-s@main

Applies an s-sized padding on the left at the main breakpoint.


Specific spacing

u-pd-skew

Add a specific padding-bottom to a skewed section, equivalent to the height of its skew triangle.

Sizing

u-height-full

Give a block element all the available height.


Media

Object fit

The object-fit property (with polyfill) specifies how a replaced element, such as an img or video, should be resized to fit its container. Note that dimensions are mandatory.

u-object-fit-cover

The object occupies all the available space.

u-object-fit-contain

The object occupies the maximul available space without being cropped.

sample
sample

Image shadow

u-img-shadow

Add a long shadow on an image.

sample

	<div class="u-img-shadow">
		<img src="...">
	</div>

Background

For modularity purpose, the background colors and effects are managed with utilities.


Background color

u-bg-white

White background.

u-bg-grey80

Grey ($grey80) background.

u-bg-view-color

View color background (depends on global class color).

u-gradient

Gradient background (depends on global class color).


Skewed background

u-skew

Default white skewed background.

u-skew-grey80

Grey ($grey80) skewed background.

u-skew-gradient

Gradient skewed background (depends on global class color).


u-skew-shadow

Default white skewed background with shadow.

u-skew-grey80-shadow

Grey ($grey80) skewed background with shadow.

Draft Draft

This section is currently in progress...

Draft Draft

This section is currently in progress...

Product

A basic landing template for products, made of various components.

Can also be viewed at /templates/product.html.


Offer

A basic landing template for offers, made of various components.

Can also be viewed at /templates/offer.html.


Portal

A basic landing template for a platform portal, made of various components.

Can also be viewed at /templates/portal.html.