Logo

This section contains the Logo Usage Guidelines for Dabilu Sports.

Logo Artwork

The Dabilu Sports Logo is comprised of the two laurel leafs on the left and right side, the three stars in the middle on top (mark) and the Dabilu Sports lettering (logotype).

The logotype is custom designed lettering and should never be replaced by a font or any other type.

The mark and logotype must never be used seperately!

Color

When color is an option the following colors must be used (usage as shown in the logo image above):

You can find all the available colors in the Colors section.

Size

The dimensions of the artwork have been selected accordingly and should never be altered. Examples below show improper usage:

Minimum Size

For maximum performance, it is recommended that the minimum size for reproduction of the artwork is 90 pixels in width, whilst retaining the original set dimensions. This roughly equates to 24mm across on paper.

Minimum Clear Space

To protect the integrity of the Dabilu Sports brand and to achieve maximum recognition, it is important for assisting graphical elements, or other company logos, to not be in direct contact with the Dabilu Sports logo artwork.

By visually imagining a containing box around the artwork, any assisting elements should be at least a "D"s width away from the logo artwork.

Code Style

• Indentation: Two spaces must be used. This ensures that code renders the same in every environment.
• Rule declaration: Rules must be formatted as shown in the example below. Note the spaces, the semicolons, and the placement of the braces. Furthermore, do not forget to follow the class naming rules.

  Good

    .block__element--modifier {
    color: $color-primary;
    font-family: 'Open Sans', sans-serif;
  }

  Bad

    .block__element--modifier, .block{
    color:#2C3e50;
      font-family: 'Open Sans',sans-serif
    }

• Single declarations: Even if a rule only include a single declaration, do not omit line breaks, i.e. do not write everything into one single line. This makes it easier to extend the rule if necessary.
• Units: Use relative lengths such as >em whenever possible, as opposed to using px for everything.
• Zero values: Do not specify units for zero values, i.e use 0 as opposed to 0px, 0em, etc.
• Files: Use UTF-8 encoding and add a new line at the end of the file.
• Quotations marks: Use single 'quotation marks' when possible.

While some of these rules are checked through linting, as described in section Pre-Processors, the programmer must not solely rely on linting, but keep the rules in mind and follow them thoroughly.

File Structure

To ensure a consistency, the file structure of websites should follow a basic guideline. As way of example, the file structure of this CSS styleguide is explained in this section.

In the main folder, the configuration files can be found:

• .gitignore: Specifies intentionally untracked files to ignore
• .stylintrc.json: Contains the rules for the CSS linter. Must not be changed!
• gulpfile.js: Configures gulp, the build system of choice for our front-end web development.
• package.json: All used npm modules are specified here, making it easy for every developer to install the needed modules.

Furthermore, there are 3 important folders:

• img: Contains all images which are used throught the website.
• src: Contains the SCSS files, which can be edited by the developer.
• dest: Herein the compiled CSS files can be found, which should not be edited manually! Furthermore, the HTML files are also in here.

Pre-Processors

The building process of the CSS files makes use of gulp and PostCSS and consists of several steps:

1. The SCSS files are linted using stylelint, enforcing consistent conventions throught all SCSS files.
2. The SCSS files are converted to CSS files through the use of gulp-sass, which is a wrapper around node-sass, which in turn utilizes libsass, which is a fast C/C++ port of the Sass CSS precompiler.
3. The CSS files are now analyzed and modifed by Autoprefixer in order to automatically add vendor prefixes to the existing CSS.

Class Naming

Our styleguide follows the Block, Element, Modifier Architecture. Every CSS class has to be named according to the following rules. This section is a citation from: http://getbem.com/naming/

Block

Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.

<div class="block">...</div>

.block {
  color: $color-primary;
}

Element

Parts of a block and have no standalone meaning. Any element is semantically tied to its block.

<div class="block">
  ...
  <span class="block__elem">...</span>
</div>

.block__elem {
  color: #042;
}

.block .block__elem {
  color: #042;
}

div.block__elem {
  color: #042;
}

Modifier

Flags on blocks or elements. Use them to change appearance, behavior or state.

<div class="block block--mod">
  ...
</div>
<div class="block block--size-big block--shadow-yes">
  ...
</div>

<div class="block--mod">
  ...
</div>

.block--hidden {
  ...
}

.block--mod .block__elem {
  ...
}

.block__elem--mod {
  ...
}

Headings

Take a look at the typography section for additional information on font sizes.

<h1 class="heading heading--extra-large">...</h1>

<h2 class="heading heading--large">...</h2>

<h3 class="heading heading--medium">...</h3>

<h4 class="heading heading--small">...</h4>

To keep a clear and simple structure, heading level 5 (h5) and 6 (h6) must not be used.

Lists

If the ordering of the items you want to display is relevant, use an ordered list. Otherwise use an unordered list.

<ol class="list list--ordered">
  <li class="list__item">...</li>
  <li class="list__item">...</li>
</ol>

<ul class="list list--unordered">
  <li class="list__item">...</li>
  <li class="list__item">...</li>
</ul>

Form Elements

Our forms have to be in a really good shape, just like our brand models. Here is the guide on how to implement all kinds of form elements.

<form class="form">
    <div class="form__flex">
      <div class="form__float">
        <label for="required_input" class="form__label">Required Field: *</label>
        <input class="form__input form__input--required" id="required_input" type="text" placeholder="Max@Mustermann.org"></input>
      </div>

      <div class="form__float">
        <label for="optional_input" class="form__label">Optional Field:</label>
        <input class="form__input" id="optional_input" type="text" placeholder="Phone"></input>
      </div>
    </div>

    <div class="form__flex">
      <div class="form__float">
        <label for="valid_input" class="form__label">Valid Field</label>
        <input class="form__input form__input--valid" id="valid_input" type="text" placeholder="Valid"></input>
      </div>

      <div class="form__float">
        <label for="invalid_input" class="form__label">Invalid Field</label>
        <input class="form__input form__input--invalid" id="invalid_input" type="text" placeholder="Invalid"></input>
    </div>
</form>

<form class="form">
  <label for="textarea" class="form__label">Place your thoughts</label>
  <textarea class="form__textarea" id="textarea" type="text" rows="6" cols="100" placeholder="Place for your thoughts"></textarea>
</form>

<form class="form">
  <fieldset>
  <label class="form__label">Do you like our Styleguide ?</label>

    <input type="radio" id="likes_it" name="voting" class="form__checkbox--radio" value="awesome">
    <label for="likes_it">Yes, awesome!</label>

    <input type="radio" id="medium_like" name="voting" class="form__checkbox--radio" value="medium">
    <label for="medium_like">It's decent</label>

    <input type="radio" id="ugly_af" name="voting" class="form__checkbox--radio" value="ugly">
    <label for="ugly_af">No! disgusting</label>
  </fieldset>
</form>

<form class="form">
<label for="select" class="form__label">Select Field:
  <select class="form__select">
    <option disabled selected>choose</option>
    <option value="small">Dabilu Shoes</option>
    <option value="medium">Dabilu Shirts</option>
    <option value="large">Dabilu Sneakers</option>
    <option value="xxlarge">Dabilu Backpacks</option>
  </select>
</form>

Links

We differentiate between two different types of links.

• An internal link, which is a link that refers to a page on our website.
• An external link, which is a link that refers to a page other than our website.

<a href="#" class="link">Internal link</a>

<a href="#" class="link link--external">External link</a>

Buttons

Use the button classes on <button> or <input> elements.

<button class="btn">Button</button>
<input class="btn" type="button" value="Input" />
<input class="btn" type="submit" value="Submit" />

<button class="btn btn--primary">Primary</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--info">Info</button>
<button class="btn btn--warning">Warning</button>
<button class="btn btn--danger">Danger</button>

<button class="btn btn--xs">Extra Small</button>
<button class="btn btn--s">Small</button>
<button class="btn btn--m">Medium</button>
<button class="btn btn--l">Large</button>
<button class="btn btn--xl">Extra Large</button>
<button class="btn btn--xxl">Extra Extra Large</button>
<button class="btn btn--xxxl">Extra Extra Extra Large</button>

Media Blocks

In order to write the cleanest and most readable code possible we use mixins. Mixins are groups of styles that can be reused throughout our code. One of the features of mixins is that they can use blocks of content which is especially usefull for media-queries.

They should be written like this:

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

p {
  font-size: 16px;

  @include tablet {
    font-size: 18px;
  }

  @include desktop {
    font-size: 20px;
  }
}

Navigation

To ensure a consistent look and feel, the following type of navigation should be used when applicable.

<nav class="container__nav container__nav--full" style="background:white;">
  <div class="nav-container">
	<a href="#"><img class="logo logo--medium nav" src="../img/Dabilu_Logo_V2.jpg" alt="Dabilu Sports Logo"></a>
	<p class="p p--nav">WEBSITE TITLE</p>
  </div>
  <ul class="treeMenu">
	<li class="main-category content-container">
	  <p>Main Section 1<span class="nav-icon nav-icon--open"></span></p>
	  <ul>
		<li><a href="#">Navigation Point 1</a></li>
		<li><a href="#">Navigation Point 2</a></li>
		<li><a href="#">Navigation Point 3</a></li>
	  </ul>
	</li>
	<li class="main-category last content-container">
	  <p>Main Section 2<span class="nav-icon nav-icon--open"></span></p>
	  <ul>
		<li><a href="#">Navigation Point 2.1</a></li>
		<li><a href="#">Navigation Point 2.2</a></li>
	  </ul>
	</li>
  </ul>
</nav>