About Methodologies

WARNING

There are different rules from the old version. Please see the reference migration guide. Migrations from Old rules

Basically, We'll follow FLOCSS CSS methodologies, and we have the enhanced rules.

Enhanced rules

Originally in FLOCSS rules, Project is defined combination of Component, but we define that has own each page style.

And, originally, Component should make a small part, but the small component is not so useful in the case of "Web site". so, we define Component that the element that included in multiple pages.

SCSS directory structure

We prepare the directory structure same with FLOCSS basic rules.

- scss
  ├ foundation/
  ├ layout/
  └ object/
      ├ component/
      ├ project/
      └ utility/

Important points

We prepared several limitations, please see the following links.

• File name and Class name
• Don't include other component
• Don't use tag selector
• Place of media query

Explaining of each layers

• Foundation
• Layout
• Object
  • Component
  • Project
  • Utility