"repositories": [
  {
    "type": "vcs",
    "url": "https://github.com/adaptivemedia/adaptive-toolbox"
  }
],
"require": {
    "adaptivemedia/adaptive-toolbox": "^1.0.0"
},

Astrum

För att kunna uppdatera styleguiden så behöver man Astrum, en Vue-app till för att hantera just styleguides/pattern libraries. (Skall du endast använda dig av pattern library i ett projekt så behövs den inte installeras lokalt.)

Struktur

Biblioteket ligger uppdelat i ett antal SASS-filer i src/, där app.scss är "standardkonfigurationen". Inkludera denna i projekt om du vill använda "hela" uppsättningen block. Vill man använda sig av delar av biblioteket kan man själv inkludera de import-deklarationer som är relevanta.

Standardkomponenter

normalize.scss - Normalize.css av Nicolas Gallagher (4.1.1).
grid.scss - Flexbox Grid av kristoferjoseph (6.3.1).
icons.scss - Font Awesome av Dave Gandy (4.6.3).
animate.scss - Animate.css av Dan Eden (3.5.1).

Utveckling

Alla sidor/vyer med AT skall ha ID #tb-app på body-taggen, för att alla JS-komponenter ska fungera optimalt i detta "scope". Nya block som används av flera projekt kan inkluderas i AT, med följande steg:

Blocket följer BEM-standard och skapas som ny SASS-fil i src/sass/blocks/.
Ev. JS för blockets funktionalitet skall placeras i src/js/blocks.
Dokumentera blockets funktionalitet i Astrum.

Layout

Vyer kan ha en av två layouter: generell, undersida eller modal. Den stora skillnaden ligger i att en "generell vy" saknar submeny och tar upp webbläsarens fulla bredd. En "undersida" har en submeny på vänster sida som ger "context" (t.ex. om man redigerar en adress under ett villaprojekt så bör submenyn vara actions relaterade till villaprojektet). En modal är en vy som saknar layout.

Generell
Exempelkod:

<html>
    <head>...</head>
    <body id="tb-app">
        <section class="header">...</section>
        <section class="content">
            <div class="container container--content">
                (Innehåll i en kolumn)
            </div>
        </section>
    </body>
</html>

Undersida
Exempelkod:

<html>
    <head>...</head>
    <body id="tb-app">
        <section class="header">...</section>
        <section class="content">
            <div class="container container--content container--content__with-submenu">
                <div class="row">
                    <div class="submenu--wrapper col-xs-3">
                        (Submeny)
                    </div>
                    <div class="col-xs-9">
                        (Innehåll i en kolumn)
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

Keywords

Sass

styling

boilerplate

FAQs

What is adaptive-toolbox?

Is adaptive-toolbox well maintained?

Package last updated on 22 Sep 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

adaptive-toolbox