Layout

INNEHÅLL

1. Breakpoints
2. Containers
   • 2.1. rh-container-px
   • 2.2. rh-container-py
   • 2.3. rh-container-p
   • 2.4. rh-container–auto
   • 2.5. Annan containers
3. Grid
   • 3.1. Elementer i en rad har lika höjd
   • 3.2. Rännor (gutters)
     • 3.2.1. Standard gutters
     • 3.2.2. Section gutters
   • 3.3. Lösning för IE11s rendering

1. Breakpoints

Användning

Exempel: @include medium {...}

2. Containers

Filplats: /components/scss/_utilities.scss

2.1. rh-container-px

Container har både padding-left och padding-right för respektive breakpoint.

Användning

<div class="rh-container-px">
    <!-- Content här -->
</div>

2.2. rh-container-py

Container har både padding-top och padding-bottom för alla breakpoints.

Användning

<div class="rh-container-py">
    <!-- Content här -->
</div>

2.3. rh-container-p

Container kombinerar både rh-container-px och rh-container-py som är ovan.

Användning

<div class="rh-container-p">
    <!-- Content här -->
</div>

2.4. rh-container--auto

Det justerar en container i mitten och applicerar begränsningar för bredden. Se detaljen är nedan.

    width: 100%;
    min-width: 20em; //320px
    max-width: 90em; //1440px

    margin-left: auto;
    margin-right: auto;

Användning

<div class="rh-container--auto">
    <!-- Content -->
</div>

2.5. Annan containers

Användning

<div class="rh-container--center">
    <!-- Content -->
</div>

<div class="rh-container--min-width">
    <!-- Content -->
</div>

<div class="rh-container--max-width">
    <!-- Content -->
</div>

3. Grid

Standard är utan rännor mellan elementer.

Hudvudstruktur:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="item">
                <!-- Content 1 -->
            </div>
        </div>

        <div class="col">
            <div class="item">
                <!-- Content 2 -->
            </div>
        </div>
    </div>
</div>

OBS! Klassnamnen används för förklaring om grid systems struktur.

3.1. Elementer i en rad har lika höjd

• Klassnamn används:
  • row-eq-height
  • col-item-eq-height
• Filplats: /components/scss/_grid.scss
• Beskrivning: Alla elementer i en rad har samma höjden.

OBS! Var försiktig när man använder row-eq-height för en rad som har flex-direction: column-reverse. Det kommer blir en konflikt på IE11 men modern webbläsare kommer fungerar bra.

// SCSS kod för .row-eq-height
.row.row-eq-height {
    display: flex;
    flex-wrap: wrap;

    &>[class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    &:before,
    &:after {
        display: flex;
    }
}

Användning

// CSS
.item {
    background-color: #f4f4f4;
}

// HTML
<div class="container">
    <div class="row row-eq-height">
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="item">
                <!-- Item 1 -->
            </div>
        </div>

        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="item">
                <!-- Item 2 -->
            </div>
        </div>
    </div>
</div>

3.2. Rännor (gutters)

• Filplats: /components/scss/_grid.scss
• Beskrivning: Det skapar utrymmen runt om en element.

3.2.1 Standard gutters

• Klassnamn används:
  • row-gutters
  • row-gutters--around

Användning

// CSS
.item {
    background-color: #f4f4f4;
}

// HTML för row-gutters
<div class="rh-overflow--hidden">
    <div class="row row-eq-height row-gutters">
        <div class="col col-12 md-col-6 col-item-eq-height">
            <div class="item">
                <!-- Item 1 -->
            </div>
        </div>

        <div class="col col-12 md-col-6 col-item-eq-height">
            <div class="item">
                <!-- Item 2 -->
            </div>
        </div>
    </div>
</div>

// HTML för row-gutters--around
<div class="rh-overflow--hidden">
    <div class="row row-eq-height row-gutters row-gutters--around">
        <div class="col col-12 md-col-6 col-item-eq-height">
            <div class="item">
                <!-- Item 3 -->
            </div>
        </div>

        <div class="col col-12 md-col-6 col-item-eq-height">
            <div class="item">
                <!-- Item 4 -->
            </div>
        </div>
    </div>
</div>

3.2.2 Section gutters

• Det skapar rännor mellan många sektioner i en sida. Det använder samma princip som standard gutters och det påverkar alla kolumners padding i en rad.
• Klassnamn används: row-section-gutters

Användning

<div class="rh-overflow--hidden">
    <div class="row row-section-gutters">
        <div class="col col-12 md-col-6">
            <div class="item">
                <!-- Item 1 -->
            </div>
        </div>

        <div class="col col-12 md-col-6">
            <div class="item">
                <!-- Item 2 -->
            </div>
        </div>
    </div>
</div>

TIPS! Man kan använda också rh-overflow--hidden i container nivå (eller row nivå) för att content i rutsystem inte påverkar annan elementer som är utanför i nåt speciellt läge.

3.3 Lösning för IE11s rendering

• Anledning: IE11 räknar inte bra när det är odda nummer lik som: 33.3333333333…%. Det renderar om mycket och blinkar när bredden är nära begränsningarna.
• Lösning: max-width används för att IE11 renderar bättre. Se mer i filen /components/scss/_grid.scss