24Slides Front-End Style Guide

Guides

1. Folder Structure
2. JavaScript / React Guide
3. Styles Guide
4. Font Awesome Guide

Table of Contents

1. Development Process
2. Re-exporing and Aliases Approach

Development Process

• Every task should be implemented in a new branch. The branch name should correspond to the following formula: TFL + task number + task name.

  • TFL - "Twenty Four Linear".

  • Task number - a number that Linear generates on task creation and it is unique.

  • Task name - a short name to define an implementation scope.

    // Avoid; No context; "tfl" should be in uppercase;
    tfl-111-fixes

    // Prefer
    TFL-111-header-refactoring

    // Prefer
    TFL-111-public-page-fixes

• Follow Linear's task statuses;

• The commit message should start with the task number. Example: TFL-179: Add new feature. Follow commit scope and message. Avoid messages like "fixed styles", prefer - "fixed login form styles";

  // Avoid; No task identifies
  Fixed header styles

  // Avoid; No context
  TFL-111: Fixed styles

  // Avoid; No context
  TFL-111: Fixes after code review

  // Prefer
  TFL-111: Created header markup, styles

• When a task is completed, create Pull Request (PR) on GitHub, request the developers to code review. You are able to move forward with other tasks while the current task in code review status.

• PR's title should contain the Linear's task identifier according to the next formula: TFL + task number. LinearBot tracks the PRs and titles. When the title corresponds to Linear's task identifier, Linear's link, task title, and its description will be added as a comment by the bot automatically. Follow next title template:

  // Avoid; No context
  TFL-11: Header

  // Prefer
  TFL-11: Update treatments page styles

• Fill PR description. Add a changelog, what you have done, some special cases or comments, you would like to note.