Struktur File-Direktori

Project FrontEnd Sebo Studio umumnya memiliki struktur directori sebagai berikut:

  • project-name
    • assets
      • css
        • styles.css
      • js
        • global.js
        • nama-page.js
        • vendors.js
      • images
        • image-1.ext
        • image-2.ext
      • plugins
        • bootstrap
        • plugin-1
      • scss
        • styles.scss
    • sub-directory
      • sub-page.html
    • index.html
    • page-1.html
    • page-2.html

project-name

Merupakan root directory, aturan penulisan project-name sebaiknya :

  • benar-benar mendiskripsikan isi project yang dibuat
  • singkat, tidak berbelit
  • mudah dipahami oleh sesama tim developer maupun client
  • menggunakan lower-case, tanpa spasi

contoh : sebo-website, designspace-html, designspace-wp

HTML Files

HTML Files yang merupakan parent pages ditempatkan di root directory.

Aturan penulisan nama HTML Files sebaiknya :

  • benar-benar mendiskripsikan isi halaman yang dibuat
  • singkat, tidak berbelit
  • mudah dipahami oleh sesama tim developer maupun client
  • menggunakan lower-case, tanpa spasi

contoh : index.html, services.html, archive-categories.html, blog-detail.html, blog-detail-with-sidebar.html

sub-directory   ›   Sub Pages (HTML Files)

sub-directory digunakan jika terdapat sub-pages, misalkan halaman services.html memiliki sub-pages :

  • services/rental.html
  • services/insurance.html

Aturan penulisan nama Sub Pages (HTML Files) mengikuti aturan penulisan nama HTML Files.

assets/css   ›   CSS Files

Pada direktori assets/css minimal terdapat satu file styles.css yang merupakan hasil compile dari scss.

Dalam sebuah project, umumnya lebih baik menggunakan single .css file dengan pertimbangan sebagai berikut :

  • Mengizinkan browser untuk menyimpan cache, sehingga menghemat waktu pemuatan.
  • Mengurangi permintaan HTTP yang harus dibuat, sehingga menghemat waktu pemuatan.
  • Memudahkan proses maintenance.

assets/js   ›   Javascript Files

Penggunaan Javascript bersifat opsional.

Script yang digunakan lebih dari satu halaman HTML, sebaiknya ditempatkan pada file global.js.

Sedangkan script yang hanya digunakan pada satu halaman HTML, opsional bisa ditempatkan pada file nama-page.js, pada internal script sebelum penutup </body>, atau dapat digabung pada file global.js

assets/images   ›   Image Files

Umumnya file gambar png dan jpg minimal disediakan dalam dua versi yaitu @1x dan @2x.

Contoh penggunaan resolution switching pada tag img ditunjukkan pada code block berikut :

<img srcset="ill-image.jpg 1x,
             ill-image@2x.jpg 2x"
     src="ill-image.jpg"
     alt="Image Name">

Contoh penggunaan resolution switching pada CSS background-image: ditunjukkan pada code block berikut :

.class-name{
    background-image: url("ill-image.png");
    background-image: -webkit-image-set(
        url("ill-image.png") 1x,
        url("ill-image@2x.png") 2x
    );
    background-image: image-set(
        url("ill-image.png") 1x,
        url("ill-image@2x.png") 2x
    );
}

assets/scss   ›   SCSS Files

SCSS/SASS seperti CSS dengan format lebih keren. Perbedaan SCSS & SASS terletak pada format penulisan syntax. SCSS merupakan syntax baru dengan format lebih mirip dengan CSS. File-file SCSS selanjutnya akan di-compile menjadi file css.

Dengan SCSS kita bisa membuat nested rules, variables, mixins, mathematic-calculation, dsb. Lebih lanjut, SCSS dapat dipelajari di https://sass-lang.com/.

Dalam penulisan syntax SCSS sebaikya memperhatikan aturan-aturan berikut :

CSS Selector
  • Minimalkan pemanggilan nama tag, gunakan nama class
  • Urutkan selector berdasarkan urutan component di design (atas→bawah, kiri→kanan)
  • Minimalkan penggunaan selector bawaan bootstrap
    • contoh kurang tepat : .landing-saas1-hiw > .container
  • Minimalkan penggunaan selector tag tanpa class
    • contoh kurang tepat : .checklist.gap > div
  • Menggunakan heading tag untuk title, sub title, sub-sub title
  • Menggunakan tag p untuk text
  • Menggunakan maksimal 5 Nesting Selector
    • contoh penggunaan 5 Nesting Selector : 
    .selector-1{
    .selector-2{
        .selector-3{
            .selector-4{
                .selector-5{
                    background: red;
                    //hasil compile .selector-1 .selector-2 .selector-3 .selector-4 .selector-5
                }
            }
        }
    }
}
CSS Property
  • Minimalkan penggunaan !important rule
Class Name
  • Nama class unik
  • Nama class mudah diingat
  • Tidak terlalu banyak class dalam satu elemen HTML
  • Reusable : satu nama class bisa digunakan di banyak elemen HTML
  • Overidable : style class bisa di customize untuk elemen lain yang mirip
Struktur Direktori & Penamaan File

Penyusunan struktur directori dan penamaan file SCSS sebaiknya mengikuti aturan berikut :

  • File SCSS dipisah untuk setiap halaman.
  • Nama File diawali dengan underscore _, tanpa spasi.

Contoh susunan directori dan nama file SCSS :

  • scss
    • _page-name-1.scss
    • _page-name-2.scss
    • styles.scss

assets/plugins

Direktori ini berisi plugin-plugin yang dibutuhkan dalam project, seperti : font-awesome, slick.js, dll.