OST UI FRAMEWORK

Table of Contents

• Project Structure
  • Main Folder Structure
  • Assets Folder Structure
  • SCSS Folder Structure
• SCSS
  • functions
    • stripUnit
    • calcUnit
      • em
      • rem
      • px
    • contrastColor
    • zIndex
  • mixins
    • contrastBgText
• CHANGELOG.md

Project Structure

Project
├───assets
│   ├───css
│   │   ├───main.css  
│   │   ├───custom.css
│   │   ├───styles.min.css
│   │   ├───pages
│   │   │   └─── ...
│   │   └───vendors
│   │       ├───_index.css
│   │       └─── ...
│   ├───fonts
│   │   ├───_index.scss/.css
│   │   └─── ...
│   ├───images
│   │   └─── ...
│   └───scss
│       ├───base
│       │   ├───_index.scss
│       │   ├───cssReset.scss
│       │   ├───functions
│       │   │   ├───_index.scss
│       │   │   └─── ...
│       │   ├───mixins
│       │   │   ├───_index.scss
│       │   │   └─── ...
│       │   └─── ...
│       ├───components
│       │   ├───_index.scss
│       │   └─── ...
│       ├───pages
│       │   ├───_indexRS.scss
│       │   └─── ...
│       ├───themes
│       │   ├───_index.scss
│       │   └─── ...
│       ├───variables
│       │   ├───_index.scss
│       │   └─── ...
│       ├───vendors
│       │   ├───_index.scss
│       │   ├───vendorsName
│       │   │   ├───_index.scss
│       │   │   └─── ...
│       │   └─── ...
│       └───main.scss
├───.gitignore
├───package.json
├───gulpfile.js
├───demo.html
├───README.md
└─── ...

Main Folder Structure

Project
├───assets
├───.gitignore
├───package.json
├───gulpfile.js
├───demo.html
├───README.md
└─── ...

โครงสร้างหลักของ OST UI FRAMEWORK จะประกอบด้วย

• assets คือ folder ที่รวม resource ต่างๆที่เราจะใช้ project โดยจะแบ่งเป็น sub folder ตามประเภทของไฟล์นั้นๆ ซึ่งในแต่ละ project อาจจะมี sub folder ที่ไม่เหมือนกัน ขึ้นอยู่กับความต้องการของ project นั้นๆ โดยตัว assets folder เองอาจจะไม่ได้อยู่ในชั้น root เสมอไป ขึ้นอยู่กับโครงสร้าง project นั้นๆ ว่าจะวางโครงสร้างอย่างไร

• .gitignore เป็นไฟล์ที่ไว้กำหนดค่าที่เราไม่ต้องการให้ push ขึ้นไปบน git

• package.json เป็นไฟล์ที่รวม package ต่างๆ ที่เราใช่งานใน project โดยจะรันคำสั่ง npm install หรือ yarn เพื่อทำการติดตั้ง package ต่างๆ ที่เราระบุไว้ในไฟล์ package.json ให้สามารถใช้งานได้

• gulpfile.js ใน project นี้จะเป็นตัวที่จัดการคำสั่ง scss ให้แปลงเป็น css ผ่านการรันคำสั่ง gulp โดยหากเราวาง assets folder ไว้ในชั้น root จะสามารถ run คำสั่งได้เลย แต่หากโครงสร้าง project นั้นวาง assets folder ไว้ในชั้นอื่นต้องทำการแก้ค่าตัวแปร const assetsPath = 'assets/' ในไฟล์ gulpfile.js ให้เป็นที่อยู่ของ assets folder ที่เราวางไว้ตาม โครงสร้าง project นั้น

• demo.html เป็นไฟล์ html ตัวอย่างการเรียกใช้งาน css โดยจะเรียงลำดับตามความสำคัญ

  - assets/css/main.css
  - assets/css/pages/pageName.min.css (เรียกใช้กรณีในหน้านั้นๆมี style ที่มีผลเฉพาะในหน้านั้นเท่านั้น )

• README.md เป็นไฟล์ที่อธิบายรายละเอียดของ project

Assets Folder Structure

assets
├───css
├───fonts
├───images
├───scss
└─── ...

โครงสร้างหลักของ Assets Folder จะประกอบด้วย resource ต่างๆที่เราจะใช้ใน project โดยจะแบ่งเป็น sub folder ตามประเภทของไฟล์

• css

  assets
  └───css
      ├───main.css  
      ├───custom.css
      ├───styles.min.css
      ├───pages
      │   └─── ...
      └───vendors
          ├───_index.css
          └─── ...

  ใน css folder จะประกอบด้วย

  • main.css คือไฟล์ css ที่ทำการ @import css ทุกไฟล์ยกเว้นใน css/pages folder

  • styles.min.css คือไฟล์ css ที่ได้จากการรันคำสั่ง gulp โดยแปลงไฟล์ main.scss ใน scss folder มาเป็นไฟล์ styles.min.css

  • pages คือ folder ที่เก็บไฟล์ css ที่เราต้องการให้มีผลเฉพาะในหน้านั้นๆเท่านั้น โดยไฟล์ css ที่อยู่ใน pages folder นี้จะได้จากการรันคำสั่ง gulp โดยแปลงไฟล์ scss ทุกไฟล์ที่อยู่ใน folder assets/scss/pages มาเป็นไฟล์ .min.css ตามไฟล์ที่อยู่ใน folder

  • vendors คือ folder ที่เก็บไฟล์ css ภายนอกที่เรานำมาใช้ โดยภายใน vendors folder จะแบ่งเป็น sub folder ตามชื่อของ css ภายนอกที่เรานำมาใช้ ภายใน sub folder จะทำการ @import ไฟล์มาไว้ในไฟล์ _index.css แล้วทำการ @import ไฟล์ _index.css ที่อยู่ใน sub folder มาไว้ในไฟล์ _index.css folder vendors อีกที

• fonts

  assets
  └───fonts
      ├───_index.scss/.css
      └─── ...

  • ใน fonts folder จะประกอบด้วย font ต่างๆที่เรานำมาใช้ใน project รวมทั้ง icon font โดยจะเก็บรวมไว้ใน folder ตามชื่อของ font นั้นๆ แล้วทำการ @import font ทุกตัวมาไว้ในไฟล์ _index.css/scss ที่อยู่ใน fonts folder

• images

  assets
  └───images
      └─── ...

  • ใน images folder จะเก็บไฟล์รูปต่างๆที่เรานำมาใช้ใน project โดยจะแบ่งเป็น folder ตามประเภทของรูป เช่น icons, logos

• scss คือ folder ที่รวมไฟล์ scss ต่างๆที่ใช้ใน project โดยจะแบ่งเป็น folder ตามโครงสร้าง scss folder structure

SCSS Folder Structure

scss
├───base
│   ├───_index.scss
│   ├───cssReset.scss
│   ├───functions
│   │   ├───_index.scss
│   │   └─── ...
│   ├───mixins
│   │   ├───_index.scss
│   │   └─── ...
│   └─── ...
├───components
│   ├───_index.scss
│   └─── ...
├───pages
│   ├───_indexRS.scss
│   └─── ...
├───themes
│   ├───_index.scss
│   └─── ...
├───variables
│   ├───_index.scss
│   └─── ...
├───vendors
│   ├───_index.scss
│   ├───vendorsName
│   │   ├───_index.scss
│   │   └─── ...
│   └─── ...
└───main.scss

ใน scss folder จะประกอบด้วยโครงสร้างหลักๆ คือ

• base ใน base folder จะประกอบด้วย _index.scss, functions, mixins, cssReset.scss และไฟล์อิ่นๆที่เป็นไฟล์ตั้งต้น หรือชุดคำสั่งที่จะนำไปใช้ในการเขียน scss โดยแต่ละ folder จะมีไฟล์ _index.scss เพื่อทำการ @import ไฟล์ใน folder ตัวเองรวมไว้

• components ใน components folder จะประกอบด้วยไฟล์ scss ที่สามารถแยกออกมาเขียนเป็น component ได้โดยทุกๆ component จะทำการ @import มาไว้ในไฟล์ _index.scss ที่อยู่ใน components folder

• pages _indexRS ใน pages folder จะประกอบด้วยไฟล์ scss ที่เราต้องการให้มีผลเฉพาะในหน้านั้นๆเท่านั้น โดยไฟล์ scss ที่อยู่ใน folder นี้ นำไปแปลงด้วย gulp ให้เป็นไฟล์ css แล้วเก็บไว้ใน css/pages/ ทำให้ไฟล์ที่อยู่ใน folder ทั้งสองมีเหมือนกัน โดยทุกๆไฟล์ scss ที่อยู่ใน folder นี้จะต้องทำการ @import ไฟล์ _indexRS.scss ก่อนเพื่อเรียกใช้งานไฟล์ใน base folder และ variable หfolder

• themes ใน themes folder จะประกอบด้วยไฟล์ scss ที่เป็น layout หลักของระบบ โดยทุกๆไฟล์จะทำการ@import มาไว้ในไฟล์ _index.scss ที่อยู่ใน themes folder

• variables ใน variables folder จะประกอบด้วยไฟล์ scss ที่ไว็เก็บค่าตัวแปร ต่างๆที่ใช้ในการเขียน scss ของโดยทุกๆไฟล์จะทำการ@import มาไว้ในไฟล์ _index.scss ที่อยู่ใน variables folder

• vendors คือ folder ที่เก็บไฟล์ scss ภายนอกที่เรานำมาใช้ โดยภายใน vendors folder จะแบ่งเป็น sub folder ตามชื่อของ scss ภายนอกที่เรานำมาใช้ ภายใน sub folder จะทำการ @import ไฟล์มาไว้ในไฟล์ _index.css แล้วทำการ @import ไฟล์ _index.css ที่อยู่ใน sub folder มาไว้ในไฟล์ _index.css folder vendors อีกที

• main.scss คือไฟล์ scss ที่ทำการ @import scss ทุกไฟล์ยกเว้นใน scss/pages folder