AGL Coding Rules

General configuration for Editor

Encoding is UTF-8
Line break code (End of Line Sequence) uses LF
Indent using tab (2 half-width spaces)

Example: Configuration for VS code in settings.json:

{
  "files.encoding": "utf8", /* Encoding is UTF-8 */
  "files.eol": "\r\n", /* Line break code is LF */
  "editor.tabSize": 2, /*Tab is 2 half-width spaces */
}

File/Directory naming

The characters that can be used File/Directory names are as follows:
- Lowercase letters from "a" to "z" (1 byte)
- Digits from "0" to "9" (1 byte)
- "-" (hyphen), "_" (underscore) characters (1 byte)
Name in English
Do not use spaces and other special characters.
If the File/Directory name has multiple words, add a "-" (hyphen) between the words.

Markup

Make sure have <!DOCTYPE html> and <html lang="ja"> declarations.
Validate HTML W3C
Write HTML with correct syntax and correct tags.
Tag names and attributes must be written in lowercase letters.
Do not add CDN libraries that you do not use. If you use multiple CDNs, you should only refer to a CDN.

Meta tags

Make sure charset="UTF-8"
Make sure the title, description, keyword tags are inside the head tag. (Can be left blank if there is no directive).

Heading tags

1 page has only 1 <h1> tag, the <h1> tag does not contain the logo but contains 1 key title of that page.
Use heading tags on the page that match the logical structure of the document.
- If there is a <h4> tag, there must be a <h3>, <h2> tag before it
- The font-size of heading tags in the section must ensure the rule h2 > h3 > h4 > h5 > h6
Heading tags are often contained by section, aside, article tags.

img, picture tag

The img tag must have an alt, the alt contains the main title of the section or item, the alt of the logo is the website name.
Add loading="lazy" attribute to img tags, except for first view images or otherwise indicated by the requester.
When using images that vary based on device or screen width, use the picture tag.
Make sure the image is not distorted when responsive.
Make sure the image must have x2 ratio on Mobile and Rentina screens.

link, script tag

It is not necessary to use the type attribute.
When using Google Font, you should use the <link> tag and not import in CSS to optimize page loading.

dl, dt, dd tag

Often used for FAQ lists

HTML5 tags

The main tag can only be used once for main content.
The nav tag can only be used once for Global navigation.
There must be at least 1 heading tag in section, otherwise use div.
The time tag is used to display the date and time for the article/event.

Styling

CSS

Validate CSS W3C

font-size, line-height, letter-spacing must be specified with relative values (rem, em,...), except in special cases.

/* Bad */
.elem {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.4px;
}

/* Good */
.elem {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}  

Properties and values must use lowercase letters.

/* Bad */
.elem {
  COLOR: #FFF;
  background-color: RED;
}

/* Good */
.elem {
  color: #fff;
  background-color: red;
}  

When using an attribute, make sure that attribute is commonly used on all browsers (Cross-Browser), otherwise you must ask customer again.
Limit the use of id to write CSS (except in force majeure cases where you cannot set the class yourself)
Limit the use of !important as much as possible.

SCSS

Limit levels to as few as possible (preferably 2 levels Parent -> Child).

For child elements, you must write the full Class name and do not use the & sign. In other cases ((ie: Pseudo classes, Pseudo elements...)), you can use the & sign optionally.

<div class="c-box">
  <h2 class="c-box__title">title title title title title</h2>
  <p class="c-box__desc">desc desc desc desc desc desc desc desc</p>
</div>

/* Bad */
.c-box { 
  padding: 20px;
  &__title {
    color: blue;
  }
  &__desc {
    color: gray;
  }
}

/* Good */
.c-box { 
  padding: 20px;
  .c-box__title {
    color: blue;
    &:before { ... }
  }
  .c-box__desc {
    color: gray;
    &:hover { ... }
  }
}

Do not overuse mixins because there are some cases where the code cannot be optimized when building pure CSS.
Do not use the html element name directly in SCSS, use the Class name (every tag that needs to be styled must be given a Class), except in mandatory cases like on a WordPress single page..
```
/* Bad */
.c-box { 
  padding: 20px;
  h2 {
    color: blue;
  }
}

/* Good */
.c-box { 
  padding: 20px;
  .c-box__title {
    color: blue;
  }
}
```

Set media queries right at the class that needs to be changed.

/* Bad */
.c-block {
  background-color: #fff;

  &__element {
    color: #000;
  }
}

@media (max-width: 767px) {
  .c-block {
    background-color: #000;
  
    &__element {
      color: #fff;
    }
  }
}

/* Good */
.c-block {
  background-color: #fff;

  @media (max-width: 767px) {
    background-color: #000;
  }

  &__element {
    color: #000;

    @media (max-width: 767px) {
      color: #fff;
    }
  }
}

Flocss & BEM

Set the Class name according to Flocss and BEM.

It is not necessary to set Class for all tags.

<!--Ví dụ đặt tên Class-->
<div class="c-sample">
  <div class="c-sample__img">
    <img class="c-sample__img__img1" alt="img" src="/">
  </div>
  <div class="c-sample__text c-sample__text--red">
    <p class="c-sample__text__text1">title title title</p>
  </div>
</div>

Avoid setting Class name that are too long and nesting all parent Class name.

<!-- Bad -->
<div class="c-list">
  <div class="c-list__card">
    <div class="c-list__card__info"> <!-- Not recommended -->
      <div class="c-list__card__info__img"> <!-- Not recommended -->
        <img alt="img" src="/">
      </div>
      <div class="c-list__card__info__text"> <!-- Not recommended -->
        Title title title
      </div>
    </div>
  </div>
</div>

<!-- Good -->
<div class="c-list">
  <div class="c-list__card">
    <div class="c-list__info">
      <div class="c-list__img">
        <img alt="img" src="/">
      </div>
      <div class="c-list__text">
        Title title title
      </div>
    </div>
  </div>
</div>

Fonts

For fonts, coding must ensure same as the design that the customer has provided.
In cases where the font is unclear or the font is not available, you must immediately contact the customer.
Absolutely do not arbitrarily download fonts on internet, and use font files to convert to font-face without the customer's confirmation. Most Japanese fonts are copyrighted. If you use them arbitrarily, it will violate the law.
Font family must have Font Fallbacks (sans-serif, serif...) at the end.

The main font must be assigned to the largest overarching tag, usually the body tag.

body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

Font size must use rem unit, only 1 decimal number is allowed.
Ví dụ: font-size: 2.5rem.

Javascript

Constant

Constants that are used throughout and do not change, must be declared in UPPERCASE letters + "_ (underscore)".

const SITE_URL = 'https://...';

Variables and Functions

Variables/functions in JavaScript are declared in the camelCase type with lowercase letters at the beginning, other words are written in UPPERCASE the first letter

var companyName = 'Allgrow Labo';

function showName(name) {
  console.log(name);
}

Library

Slider/Carousel

Default setting to autoplay mode.
Prefer to use Swiper

Paralax

Perfect Pixel

The created product must be 100% similar to the design, except for objective cases due to design or customer requirements.

Browser and Device

実際のデバイスでの表示を正確に確認するために、以下の環境でコーディングされることを前提としています。

OS	ブラウザ	デバイス
Windows	Chrome, Firefox, Edge	Window PC
MacOS	Safari	iMac, Macbook
iOS	Safari	iPhone, iPad
Android	Chrome	Android Device

Breakpoint and Simulation

基本的には、デザインにあるものはすべてそのままに再現されます。Pixel Perfectでそのサイズをテストします。
提供されるPC、タブレット、スマートフォンのデザインの場合、それぞれのサイズに対する基準は次のとおりです。

サイズ	チェックポイント	仮想環境
1025px以上	レイアウトが崩れない	PC
768px~1024px	レイアウトが崩れない	Tablet
320px~767px	レイアウトが崩れない	SP

note

Breakpoints can be added to facilitate responsiveness and Perfect Pixel

Wordpress

HTML から WordPress に変換した後にインターフェースエラーがないことを確認してください。
header.php, footer.php, sidebar.phpなど的確なテンプレートにファイルを分割すること。
HTMLが存在しないページは404ページを正しく表示させること。
管理ページのメイン言語を忘れずに「ja」に設定してください。編集中に英語をオンにすることができます。
管理ページのデフォルトの背景色を設定します。
忘れずにメニューをアクティブにしてください。
注意してページングを処理する必要があります。
WordPress のデフォルト機能を機能に応じて使用します。例:
- Header: get_header() 関数を使用して header.php ファイルをインクルードします。wp_head() 関数を header.php ファイルに忘れずに配置してください。
- Footer: get_footer() 関数を使用して footer.php ファイルをインクルードします。wp_footer() 関数を footer.php ファイルに忘れずに配置してください。
- Get link: get_template_directory_uri() 関数を使用して、css ファイルと js ファイルにリンクを添付します。
- Loop: In single pages, you also need to use a loop, use wp_reset_postdata() to end the loop.
コーディングする際は、冗長性や未使用のコードに注意し、常に最適化を考慮してください。
Wordpressテンプレートのファイル構造と読み込みテンプレートの優先順位を明確に理解する。
全てのページで正しいtitle, meta descriptionを設定すること。

Styling on single pages needs to use html element names instead of class names

.content {  
  h1 { ... }  
  h2 { ... }  
  p  { ... }  
  ul { ... } 
  ... 
}

PHP

Variable/function names in PHP are declared using the camelCase type.
Constants must be in all UPPERCASE letters, separated by "_" (underscore).
PHP code must be written within the <?php ?> tag and use the <?= ?> short tag instead of echo.

Information security requirements

Do not share project information (design, source code, data...) with third-parties (including AGL employees) without permission.
Do not publicize the project on SNS before release.

AGL Coding Rules

General configuration for Editor​

File/Directory naming​

Markup​

Meta tags​

Heading tags​

img, picture tag​

link, script tag​

dl, dt, dd tag​

HTML5 tags​

Styling​

CSS​

SCSS​

Flocss & BEM​

Fonts​

Javascript​

Constant​

Variables and Functions​

Library​

Slider/Carousel​

Paralax​

Perfect Pixel​

Browser and Device​

Breakpoint and Simulation​

Wordpress​

PHP​

Information security requirements​