Skip to content

Instantly share code, notes, and snippets.

@MattisOlsson
Created April 25, 2016 09:14
Show Gist options
  • Save MattisOlsson/fdb63d2429e760248d4ec334196c61fb to your computer and use it in GitHub Desktop.
Save MattisOlsson/fdb63d2429e760248d4ec334196c61fb to your computer and use it in GitHub Desktop.
Rammeverk
Förslag på åtgärder på startsida:
- Ny blokkflate under Hero (som vi kan sätta en egen CSS-klass på wrappern för och göra eventuella anpassningar per sajt).
- Lägga till checkbox på "Instillinger"-fanen på samtliga block, "Sentrert". Kryssar man i den så läggs CSS-klass "block-center" till på block-wrappern.
- Undvika "row-closer row-reflow" på row-wrapper i ny blokkflate direkt under Hero. Skapa hellre override styles baserat på CSS-klass som vi kan sätta på wrappern (.container).
- Undvika "block-top" på block-wrappers i ny blokkflate direkt under Hero. Skapa hellre override styles baserat på CSS-klass som vi kan sätta på wrappern (.container).
- Ny visningsvariant på Tekst-blocket (block-text-link). Rubriken och länken kan man göra i brödtext-editorn.
- Undvika en massa onödiga varianter av Tekst-blocket (block-text-small etc). Skapa hellre override styles baserat på CSS-klass som vi kan sätta på wrappern (.container). För att täcka länkbehovet i Tekst-blocken direkt under Hero för Abelia och Reiseliv kan vi lägga till ett länkfält som visas med följande markup:
<p><a class="block-text-action">Mer om oss</a></p>
- Nytt block, "Blokkflate" som bara innehåller en content area. Detta block kan användas för att designa sidan, t.ex. för att göra tvåspalt som Energi Norge har direkt under full width sektionen:
<div class="block three-fourths block-center">
<div class="row">
<!-- Block kommer här -->
</div>
</div>
- Ny blokkflate för full width sektion med möjlighet för bakgrundsbild:
<div class="section section-startpage" style="background-image: url(/skins/base/img/stock/w3.jpg);">
<div class="container">
<div class="row">
</div>
</div>
</div>
- Nytt block, "Bli medlem" som kan placeras i full width section med följande markup:
<div class="block-member">
<div class="row">
<div class="block one-third push-1">
<div class="block-text block-text-long">
<div class="block-text-content">
<h3>Bli medlem!</h3>
<p>Rekruttere, utvikle og beholde kompetanse og medarbeidere i kunnskapsbedrifter er helt avgjørende for å lykkes. Jobbene er ikke standardiserte. Flyten stopper aldri.</p>
<p class="last">
<a class="button button-arrow" href="/guide/samples/article-hero.html">Bli medlem</a>
<a class="button button-primary button-arrow" href="/guide/samples/article-hero.html">Se fordelene</a>
</p>
</div>
</div>
</div>
<div class="block one-half">
<div class="block-image">
<div class="block-image-content">
<figure><img src="/skins/base/img/stock/b10.jpg" alt=""></figure>
<p>
Vi forsterker stadig vårt arbeid mot de ulike bransjene i næringen.
</p>
</div>
</div>
</div>
</div>
</div>
- Nytt block, "Energi Norge - Fagområder" som kan placeras i full width sektion med följande markup:
<div class="block full">
<div class="row">
<div class="block one-half block-center block-squeeze">
<div class="block-text block-text-plain block-text-center">
<div class="block-text-content">
<h3>Våre fagområder</h3>
<p>Venstre og KrF foreslår i sine alternative statsbudsjett å øke elavgiften med opptil 1,5 milliarder millioner kroner årlig. Energi og klima fra strømnettet via strømmarkeded og fornybar produksjon.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="block full">
<div class="block-sectors block-sectors-invert">
<div class="block-sectors-content">
<div class="blocks-sectors-items">
<a class="blocks-sectors-item" href="#">
<span class="block-sectors-icon"><i class="icon icon-brand-large icon-brand-fornybar"></i></span>
<span class="block-sectors-name"><span>Fornybar produksjon</span></span>
<span class="block-sectors-more"></span>
</a>
<a class="blocks-sectors-item" href="#">
<span class="block-sectors-icon"><i class="icon icon-brand-large icon-brand-nett"></i></span>
<span class="block-sectors-name"><span>Strømnett</span></span>
<span class="block-sectors-more"></span>
</a>
<a class="blocks-sectors-item" href="#">
<span class="block-sectors-icon"><i class="icon icon-brand-large icon-brand-marked"></i></span>
<span class="block-sectors-name"><span>Strømmarked</span></span>
<span class="block-sectors-more"></span>
</a>
<a class="blocks-sectors-item" href="#">
<span class="block-sectors-icon"><i class="icon icon-brand-large icon-brand-klima"></i></span>
<span class="block-sectors-name"><span>Energibruk, klima og miljø</span></span>
<span class="block-sectors-more"></span>
</a>
<a class="blocks-sectors-item" href="#">
<span class="block-sectors-icon"><i class="icon icon-brand-large icon-brand-okonomi"></i></span>
<span class="block-sectors-name"><span>Skatt og økonomi</span></span>
<span class="block-sectors-more"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment