Panduan CSS/LESS untuk Pengembangan Tema OJS

Apa itu LESS?

LESS adalah preprocessor CSS yang memungkinkan Anda menulis kode stylesheet dengan sintaks yang mirip CSS namun dengan kemampuan tambahan yang sangat berguna. File LESS akan secara otomatis dikompilasi menjadi CSS oleh aplikasi OJS/OMP.

Keuntungan Menggunakan LESS

Contoh Penggunaan Dasar

1. Menggunakan Variabel

Variabel dalam LESS dimulai dengan simbol @. Berikut contoh penggunaan variabel untuk warna background:

@background: red;

.pkp_structure_head,
.pkp_structure_footer {
  background: @background;
}

Variabel ini menjadi lebih powerful ketika digunakan di berbagai tempat:

@background: red;

.pkp_structure_head,
.pkp_structure_footer {
  background: @background;
}

button {
  border-color: @background;
}

2. Import File untuk Organisasi yang Lebih Baik

Seiring berkembangnya stylesheet, Anda akan ingin memecahnya menjadi beberapa file. LESS memungkinkan Anda mengimpor file terpisah dan berbagi variabel antar file tersebut.

Struktur File yang Disarankan:

/styles
  ├── variables.less  // Variabel global
  ├── structure.less  // Style struktur layout
  ├── forms.less      // Style untuk form
  └── index.less      // File utama yang mengimpor semua

Contoh isi file:

@bg-primary: #1e6292;
@bg-secondary: #f5f5f5;
@text-color: #333;
@link-color: #1e6292;
@border-radius: 3px;

.pkp_structure_head {
  background: @bg-primary;
  color: white;
}

.pkp_structure_content {
  background: @bg-secondary;
}

button {
  background: @bg-primary;
  color: white;
  border-radius: @border-radius;
}

input[type="text"] {
  border: 1px solid @bg-primary;
  border-radius: @border-radius;
}

// Import semua file dalam urutan yang benar
@import "variables";
@import "structure";
@import "forms";

Implementasi dalam Plugin Tema

Untuk menggunakan LESS dalam plugin tema OJS, Anda perlu mendefinisikannya dalam file plugin class:

<?php
import('lib.pkp.classes.plugins.ThemePlugin');

class TutorialThemePlugin extends ThemePlugin {
    public function init() {
        // Parameter kedua menunjuk ke file LESS di tema Anda
        $this->addStyle('stylesheet', 'styles/index.less');
    }
}
?>

Struktur File Plugin Tema Lengkap

/plugins/themes/tutorial-theme/
  ├── index.php
  ├── TutorialThemePlugin.inc.php
  ├── version.xml
  ├── locale/
  │   └── en_US/
  │       └── locale.po
  └── styles/
      ├── index.less
      ├── variables.less
      ├── structure.less
      └── forms.less

Tips dan Best Practices

1. Gunakan Variabel untuk Konsistensi

Definisikan semua warna, ukuran font, spacing, dan nilai yang sering digunakan sebagai variabel di file variables.less:

// Warna
@color-primary: #1e6292;
@color-secondary: #6c757d;
@color-success: #28a745;
@color-danger: #dc3545;

// Typography
@font-family-base: 'Noto Sans', sans-serif;
@font-size-base: 14px;
@line-height-base: 1.5;

// Spacing
@spacing-xs: 5px;
@spacing-sm: 10px;
@spacing-md: 20px;
@spacing-lg: 40px;

// Border
@border-width: 1px;
@border-color: #ddd;
@border-radius-base: 3px;

2. Organisasi File yang Sistematis

Pisahkan stylesheet berdasarkan komponen atau fungsi:

3. Nested Rules untuk Readability

LESS memungkinkan Anda menulis CSS bersarang yang lebih mudah dibaca:

.article-summary {
  padding: @spacing-md;
  border: @border-width solid @border-color;
  
  .title {
    font-size: 18px;
    color: @color-primary;
    
    a {
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .meta {
    color: @color-secondary;
    font-size: 12px;
  }
}

4. Mixins untuk Reusability

Buat mixins untuk style yang sering digunakan:

// Mixin untuk shadow
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

// Mixin untuk transition
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  transition: @transition;
}

// Penggunaan
.card {
  .box-shadow(0 2px 4px rgba(0,0,0,0.1));
  .transition(all 0.3s ease);
}

Kompilasi dan Cache

Proses Kompilasi Otomatis

Ketika Anda memanggil addStyle() dan menunjuk ke file LESS, aplikasi OJS akan:

1. Secara otomatis mengkompilasi file LESS menjadi CSS
2. Menyimpan hasil kompilasi di folder cache/
3. Memuat file CSS yang sudah dikompilasi di frontend

Menangani Cache

Jika Anda mengubah file LESS dan perubahan tidak muncul:

1. Hapus file CSS di folder cache/
2. Reload halaman - OJS akan mengkompilasi ulang file LESS
3. Jangan pernah mengedit file CSS di folder cache/ secara langsung karena akan ditimpa

Force Recompilation

Untuk memaksa kompilasi ulang saat development:

# Hapus cache CSS
rm cache/t_compile/*.css
rm cache/t_cache/*.css

Menggunakan CSS Biasa

Jika LESS terasa terlalu kompleks, Anda tetap bisa menggunakan CSS biasa. Cukup simpan file dengan ekstensi .less dan tulis CSS standar di dalamnya:

/* CSS biasa juga berfungsi */
.header {
  background: #1e6292;
  color: white;
  padding: 20px;
}

Context untuk Stylesheet

OJS mendukung berbagai context untuk memuat stylesheet:

1. Frontend Context (Default)

$this->addStyle('stylesheet', 'styles/index.less');
// Atau eksplisit
$this->addStyle('stylesheet', 'styles/index.less', [
    'contexts' => 'frontend'
]);

Stylesheet akan dimuat di template dengan:

{load_stylesheet context="frontend" stylesheets=$stylesheets}

2. Backend Context

Untuk styling backend editorial:

$this->modifyStyle('pkpLib', [
    'addLess' => array('styles/backend.less')
]);

3. HTML Galley Context

Untuk styling HTML galley:

$this->addStyle('htmlGalley', 'styles/galley.less', [
    'contexts' => 'htmlGalley'
]);

Memodifikasi Style yang Ada

Menambahkan File LESS ke Style Existing

public function init() {
    // Menambahkan file LESS tambahan ke style 'default'
    $this->modifyStyle('default', [
        'addLess' => array('styles/custom-colors.less')
    ]);
}

Menambahkan Variabel LESS

public function init() {
    $customColors = "
        @primary-color: #ff6600;
        @secondary-color: #333333;
    ";
    
    $this->modifyStyle('default', [
        'addLessVariables' => $customColors
    ]);
}

Menghapus Style

public function init() {
    // Menghapus style bernama 'default'
    $this->removeStyle('default');
}

Parameter Lengkap addStyle()

Method addStyle() menerima berbagai parameter opsional:

$this->addStyle($name, $style, $args);

Parameter $args yang tersedia:

Contoh lengkap:

$this->addStyle('custom-style', 'styles/custom.less', [
    'contexts' => 'frontend',
    'priority' => STYLE_SEQUENCE_CORE,
    'addLess' => array('styles/variables.less', 'styles/mixins.less')
]);

Child Theme dan LESS

Salah satu kekuatan LESS adalah kemudahan dalam membuat child theme. Child theme dapat mewarisi dan memodifikasi style parent theme dengan mudah.

Contoh Child Theme:

<?php
import('lib.pkp.classes.plugins.ThemePlugin');

class MyChildThemePlugin extends ThemePlugin {
    public function init() {
        // Set parent theme
        $this->setParent('defaultthemeplugin');
        
        // Modifikasi style parent dengan menambahkan variabel custom
        $this->modifyStyle('stylesheet', [
            'addLess' => array('styles/custom-variables.less')
        ]);
        
        // Tambahkan stylesheet tambahan
        $this->addStyle('child-style', 'styles/child.less');
    }
}
?>

Troubleshooting Umum

1. Perubahan LESS Tidak Muncul

Solusi:

• Hapus cache CSS di folder cache/
• Clear browser cache
• Pastikan file LESS tidak ada syntax error

2. Error Kompilasi LESS

Solusi:

• Periksa syntax LESS Anda
• Pastikan semua variabel telah didefinisikan sebelum digunakan
• Periksa urutan import file di index.less

3. Style Tidak Ter-load

Solusi:

• Pastikan path file LESS benar
• Periksa context yang digunakan sesuai
• Verifikasi method addStyle() dipanggil di init()

4. Konflik dengan Parent Theme

Solusi:

• Gunakan !important dengan hati-hati (last resort)
• Tingkatkan specificity selector CSS
• Override dengan benar menggunakan modifyStyle()

Kesimpulan

LESS adalah alat yang powerful untuk pengembangan tema OJS. Dengan memahami konsep variabel, import file, dan mixins, Anda dapat membuat tema yang maintainable dan mudah dikustomisasi.

Jika Anda membutuhkan bantuan lebih lanjut dalam pengembangan tema OJS atau layanan manajemen jurnal profesional, elkuator siap membantu Anda. Kami menyediakan layanan custom tema, instalasi OJS, hingga pendampingan pengelolaan jurnal yang kredibel dan terindeks.