Styleguide - General Information

Introduction

This styleguide is supposed to give ready to use examples and code to for the app development which can be just copied and pasted. Additionally it is designed to explain the main idea of the design, so that new elements can be created from the guidelines in this document. If necessary the guidelines can be broken, this should not be done lightly but only after making sure that it is necessary. Following this guidelines will not only ensure an overall coherent design, but also an easy maintainability.

Colors

An h1 is only used for very important content like a users name on her profile. The color is either white or zupply-blue-dark.

Elements of design

Rounded corner radii

Zupply has two radii styles, one for elements like buttons and dialog boxes, and another style for circular elements.

The default radius for elements like buttons and dialog boxes is 4px. If an element has effectively two radii, because an element is inside another, the inner radius has to be smaller. By default this formula can be used inner-radius = outer-radius - padding - border-width. If this does not produce good results, the radius should be adjusted so that it seems visually correct.

To create a circle the radius has to be set to 50%.


.circle{
	overflow: hidden;
	border-radius: 50%; /* $circle-radius */
}
.button{
	border-radius: 4px; /* $default-radius */
}

Lines

Lines are sued to separate sections from each other.

The same line attributes are used in tables, boxes and lists.


hr{
	height: 0; /* reset default hr attributes */
	border: 0; /* reset default hr attributes */
	border-bottom: 1px solid rgb(215,215,215); /* $light-gray */
}

Shadow

Shadows are standardized and should be used to visually separate elements from the background or suggest that an object is clickable.

The strong shadow is used for elements that have to stand out from a noise background, like the modal window. The default shadow is used for a buttons hover, while the minimal shadow is a buttons default shadow state. The light shadow is for elements like a calendar that are supposed to be separated but are not entirely clickable.

Strong shadow

Default shadow

Light shadow

Minimal shadow


.shadow.strong{
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
}
.shadow.default{
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25);
}
.shadow.light{
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.15);
}
.shadow.minimal{
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
}

Transitions & Animations

The default transition is used for all css transitions where it is not especially necessary to change it. If not otherwise defined all changes should be of css properties should be transitioned. There is a In-transition and an Out-transition. The Out-transition is half the time, because the focus shifts away from this object quickly.


/* transition-in */
	transition: propertyOne .6s ease, propertyTwo .6s ease;
	-webkit-transition: propertyOne .6s ease, propertyTwo .6s ease;

/* transition-out */
	transition: propertyOne .3s ease, propertyTwo .3s ease;
	-webkit-transition: propertyOne .3s ease, propertyTwo .3s ease;

Loading spinner

Shadows are standardized and should be used to visually separate elements from the background or suggest that an object is clickable.

Loading data


.loader{
	background: transparent;
	position:relative;
}
.loader .loading-circle{
	position: absolute;
	border:3px solid transparent;
	border-top: 3px solid rgb(40,155,195); /* $brand */
	border-radius: 50%;
	height: 30px;
	width: 30px;
	left:0px;
	top:0px;
	background: transparent;
	box-shadow: none;
	/* shared animation */
	-webkit-animation: rotate 1s linear infinite;
	-moz-animation:    rotate 1s linear infinite;
	-o-animation:      rotate 1s linear infinite;
	animation:         rotate 1s linear infinite;
}
.loader .loading-label{
	margin-left: 50px;
	padding-top: 5px;
	font-weight: bold;
	color: rgb(40,155,195); /* $brand */
}


/* General animation for rotation */
@-webkit-keyframes rotate {
	/* 3d transform for best perf, GPU accelerated */
	from { -webkit-transform: rotateZ(360deg); }
	to { -webkit-transform: rotateZ(0deg); }
}
@-moz-keyframes rotate {
	from { transform: rotateZ(360deg); }
	to { transform: rotateZ(0deg);}
}
@-o-keyframes rotate {
	from { transform: rotateZ(360deg); }
	to { transform: rotateZ(0deg);}
}
@keyframes rotate {
	from { transform: rotateZ(360deg); }
	to { transform: rotateZ(0deg);}
}

Loading Button

.button.primary.loading


.loading-button{
	position: relative;
	padding-right: 40px;
}
.loading-button .loading-circle{
	position: absolute;
	display: block;
	border:3px solid transparent;
	border-top: 3px solid rgb(250,250,250); /* $white */
	border-right: 3px solid rgb(250,250,250); /* $white */
	border-radius: 50%;
	height: 12px;
	width: 12px;
	right:7px;
	top:5px;
	background: transparent;
	box-shadow: none;
	/* shared animation */
	-webkit-animation: rotate 1s linear infinite;
	-moz-animation:    rotate 1s linear infinite; 
	-o-animation:      rotate 1s linear infinite;
	animation:         rotate 1s linear infinite;
}

Full page loading

Loading ...

Some content is here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


.overlay-bg{
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(235,235,235,0.8); /* $white-gray */
	height: 100%;
	width: 100%;
}
.overlay-bg .loader{
	-webkit-font-smoothing: antialiased;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	-webkit-transform: translate3d(-50%,-50%,0);
}

Animation for changing values

Empty, adding value

Value

Changing value

Old Value New Value


/* adding fade-in animation */
-webkit-animation: fade-in 2s ease infinite;
-moz-animation:    fade-in 2s ease infinite;
-o-animation:      fade-in 2s ease infinite;
animation:         fade-in 2s ease infinite;

/* adding fade-slide-out animation */
-webkit-animation: fade-slide-out 2s ease infinite;
-moz-animation:    fade-slide-out 2s ease infinite;
animation:         fade-slide-out 2s ease infinite;

/* adding fade-slide-in animation */
-webkit-animation: fade-slide-in 2s ease infinite;
-moz-animation:    fade-slide-in 2s ease infinite;
animation:         fade-slide-in 2s ease infinite;

/* fade-in animation */
@-webkit-keyframes fade-in {
  from { opacity: 0.0;}
  to { opacity: 1.0;}
}
@-moz-keyframes fade-in {
  from { opacity: 0.0;}
  to { opacity: 1.0;}
}
@-o-keyframes fade-in {
  from { opacity: 0.0;}
  to { opacity: 1.0;}
}
@keyframes fade-in {
  from { opacity: 0.0;}
  to { opacity: 1.0;}
}


/* fade-slide-in & fade-slide-out animation */
@-webkit-keyframes fade-slide-in {
  from { 
		opacity: 0.0;
		margin-top: 0;
	}
  to { 
		opacity: 1.0;
		margin-top: -30px;
	}
}
@-webkit-keyframes fade-slide-out {
  from { 
		opacity: 1.0;
		margin-top: 0;
	}
  to { 
		opacity: 0.0;
		margin-top: -30px;
	}
}
@-moz-keyframes fade-slide-in {
  from { 
		opacity: 0.0;
		margin-top: 0;
	}
  to { 
		opacity: 1.0;
		margin-top: -30px;
	}
}
@-moz-keyframes fade-slide-out {
  from { 
		opacity: 1.0;
		margin-top: 0;
	}
  to { 
		opacity: 0.0;
		margin-top: -30px;
	}
}
@keyframes fade-slide-in {
  from { 
		opacity: 0.0;
		margin-top: 0;
	}
  to { 
		opacity: 1.0;
		margin-top: -30px;
	}
}
@keyframes fade-slide-out {
  from { 
		opacity: 1.0;
		margin-top: 0;
	}
  to { 
		opacity: 0.0;
		margin-top: -30px;
	}
}