Skip to content

Latest commit

 

History

History
256 lines (189 loc) · 6.76 KB

README_styles.md

File metadata and controls

256 lines (189 loc) · 6.76 KB

Workflow capabilities - Styles

Main style file is located in assets/styles/sass/style.scss, it's build with 5 parts:

1. Bower components

Bower components part loads SCSS files for bower components which won't be automatiacally implemented i.e.:

  • Bootstrap
  • Font awesome
  • Select2
  • Hamburgers

2. Base

2.1. Fonts

In this file you should create @mixins for all fonts that will be used in project. Mixin should contain one value for font-weight.

For Google Fonts and Typekit:

@mixin primary-font($fontWeight) {
    @if $fontWeight == "normal" {
        font-weight: 300;
    } @elseif $fontWeighte == "medium" {
        font-weight: 400;
    } @elseif $fontWeight == "bold" {
        font-weight: 700;
    }
    font-family: 'Lato', sans-serif;
    font-style: normal;
}

For @font-face generated:

@mixin secondary-font($fontWeight) {
    @if $fontWeight == "regular" {
        font-family: 'gotham-lightgotham-light', sans-serif;
    } @elseif $fontWeight == "medium" {
        font-family: 'gotham-bookgotham-book', sans-serif;
    } @elseif $fontWeight == "bold" {
        font-family: 'gotham-boldgotham-bold', sans-serif;
    }
    font-weight: normal;
    font-style: normal;
}

2.2. Reset

It's reset for standard CSS rules, copied from HTML5 Reset Styleshet. There are added few more styles for transitions to <a>, and <button> tag.

3. Components

It's set of CSS clases which are using in some of the projects:

3.1. Animsition

Fix for animsition plugin (turn it on if your project is using Animsition plugin).

3.2. Bootstrap 4 Vertical Center Modal

Fix which allows you to vertical center standard Bootstrap Modal.

Your html structure should look like here:

<div class="vertical-alignment-helper">
    [...]
    <div class="modal-dialog vertical-align-center" role="document">
        [...]
    </div>
    [...]
</div>

3.3. Gravity forms reset styles

If your peojct contain Gravity Forms plugin you can simply reset all of standard CSS styles.

3.4. Re-captcha resized on mobile

Fix which allows you to resize re-captcha container on smaller resoultions.

3.5. Skip to main content

Component for the disabled users - facilitate navigation of the site.

3.6. WP Admin Bar Fix

Fix for WP Admin Bar - which allows you show it correctly with our Wokflow.

4. Helpers

4.1. Variables

In this file are set all of variables. Here you should set colors for you projects, i.e.:

$primary-color: #XXXXXX;
$secondary-color: #YYYYYY;

4.2. Mixins

In this file are @mixins for current project. By default there are two mixins.

@mixin fluid-type This mixin set max and min font-size and line-height. It needs 3 values, first: The biggest font-size of content, second: the smallest font-size, and third: line-height. Example:

@include fluid-type(42px, 28px, 1.4);

@mixin letter-spacing This mixin set letter-spacing for RWD. It needs 1 value: number of letter-spacing. Example:

@include letter-spacing(200);

4.3. Repeaters

In this file are set usefull classes to reusing them in project like section margins, section paddings, small margin from top for elements, background with cover option etc.

4.4. Content

This file contain styles for .content class which should wrap all content elements on website.

First element fix set margin-top: 0 for first element in .content div to avoid errors with current section spacings. Div .first-element-fix is automatically added into .content div in assets/scripts/main.js file.

Class .content set margins for headlines, and styles for <p>, <ul>, and <ol> tags. Otherwise it handle styles for <img> tag, included WordPress classes for images added in Content Editor.

5. Layout

5.1. Pages -> Homepage, Header, Footer

Predfinied style file for Homepage, Header, and Footer

5.2 General

In this file are set styles for body, headlines, italic content, bold content, and some elements which are different for each project like hamburger colour or to top button colour. This is file where you should set all global styles.

In body class you should set font-size and line-height for the paragraphs of content for all project.

In this file you should set global classes for buttons using on website. Example:

.asgard-button {
    @include primary-font('bold');
    font-size: 14px;
    margin-top: 25px;
    display: inline-block;
    border-radius: 100px;
    padding: 6.5px 20px;
    border: 2px solid transparent;

    @include media-breakpoint-up(sm) {
        margin-top: 30px;
    }

    @include media-breakpoint-up(md) {
        margin-top: 35px;
    }

    &--wide-paddings {
        padding-left: 40px;
        padding-right: 40px;
    }

    &__full-background {
        &:hover,
        &:focus {
            background: transparent;
        }

        &--white-background {
            background: #fff;
            border-color: #fff;

            &:hover,
            &:focus {
                color: #fff;
            }
        }

        &--gray-color {
            color: $secondary-color;
        }

        &--green-background {
            background: $primary-color;
            border-color: $primary-color;

            &:hover,
            &:focus {
                color: $primary-color;
            }
        }

        &--white-color {
            color: #fff;
        }
    }

    &__outline {
        &--gray-border-and-color {
            border-color: $secondary-color;
            color: $secondary-color;
        }

        &--gray-background {
            &:hover,
            &:focus {
                background: $secondary-color;
                color: #fff;
            }
        }

        &--white-border-and-color {
            border-color: #fff;
            color: #fff;
        }

        &--white-background {
            &:hover,
            &:focus {
                background: #fff;
                color: $secondary-color;
            }
        }
        &--green-border-and-color {
            border-color: $primary-color;
            color: $primary-color;
        }

        &--green-background {
            &:hover,
            &:focus {
                background: $primary-color;
                color: #fff;
            }
        }
    }
}

Each part of the document should be preceded by comment with description. Example:

/* ~~~~~~~~~~ Here should go description ~~~~~~~~~~ */

.some-class {
}

ⓒ 2017 All rights reserved WP Team. WP Team is a division of Acclaim