adaptive-toolbox v1.3.0
Adaptive Toolbox
Adaptive Toolbox är ett bibliotek av flexibla komponenter (block) som kan användas för att bygga upp webbapplikationers gränssnitt.
Installation
Composer
Lägg till följande i ditt projekts composer.json:
"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. (Observera att det minsta man kan använda sig av är required.scss.)
Standardkomponenter
- normalize.scss - Normalize.css av Nicolas Gallagher (4.1.1).
- grid.scss - Flexbox Grid av kristoferjoseph (6.3.1).
- font-awesome.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>