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.