inFakt Styleguide

Aplikacja infakt.pl – styleguide

CSS ogólne zasady

  • Używamy soft-tabs, dwie spacje wcięcia
  • Po : oddzielającym nazwę właściwości, od wartości dajemy spację.
  • Pomiędzy nazwą selektora a { dajemy odstęp 1 spację.
  • Do definiowania kolorów używamy hex code np. #000 z wyjątkiem sytuacji gdy kolor deklarujemy jako rgba.
  • Właściwości CSS piszemy w porządku alfabetycznym
  • Style dokumentujemy przy użyciu Hologram
  • Nie używamy ID, tylko class
.styleguide-element {
  background: #fff;
  border: 1px solid #999;
  font-size: 18px;
  position: relative;
  z-index: 3;
}

Uwaga: W przypadku używania w edytorze funkcji automatycznego sortowania, należy zwrócić uwagę na niezamierzone przestawienie kolejności wpisów dotyczących podobnych własności.

.styleguide-element {
  border-top: 2px solid black;
  border: 10px solid red;
}

Przykład (prawidłowa kolejność):

.styleguide-element {
  border: 10px solid red;
  border-top: 2px solid black;
}

Sass ogólne zasady

  • Używamy biblioteki Bourbon
  • Pliki partiale importowane do głównego pliku SCSS nazywamy w konwencji _partial.scss
  • Wszystkie kolory zapisujemy jako zmienne w pliku _var.scss
  • Deklarację @extend dajemy jako pierwszą, deklarcję @include jako ostatnią
  • Deklaracji nie zagnieżdżamy więcej niż 3 poziomy
  • Maksymalnie zagnieżdżamy do 60 – 70 linii kodu

Jednostki w CSS

Wielkość czcionek ustawiamy w px. Wielkość linii (line-height) ustawiamy bez podania jednostki (traktowane jest to wtedy jako mnożnik).

.styleguide-sass {
  @extend .styleguide-element;
  color: $lightGray;
  font-size: 15px;
  line-height: 1.5;
}

Struktura plików SCSS

main.scss

/base
— _normalize.scss

/components
— _alerts.scss
— _buttons.scss
— _datepicker.scss
— _file-uploader.scss
— _general.scss
— _modifiers.scss
— _notification.scss
— _stats.scss
— _tables.scss

/helpers
— _helpers.scss
— _icons-svg.scss
— _mixins.scss
— _variables.scss

/layout
— _activetext.scss
— _animation.scss
— _flexbox-global.scss
— _footer.scss
— _forms.scss
— _header.scss
— _lists.scss
— _main-content.scss
— _preview.scss
— _retina-img.scss
— _shame.scss
— _sidebar.scss

/pages
— _company.scss
— _payments.scss
— _settings.scss

/vendors
— _jquery-ui.scss
— _jquery-ui.structure.scss
— _modal-box.scss
— _perfect-scrollbar.scss
— _select2.scss
— _toastr.scss

Generowanie statycznych szablonów HTML za pomocą .kit language (CodeKit)

  1. templates/kit-templates/partials – tutaj znajdują się części składowe szablonu takie jak top strony, sidebar itp.
  2. templates/kit-templates – tutaj tworzymy szablony *.kit, które importują poszczególne części strony z katalogu /partials. Szablony z tej lokalizacji kompilowane są bezpośrednio do folderu /templates.