Styling

Rota CSS preprocessor olarak SASS kullanmaktadir.Eger VS kullanıyorsanız SASS dosyalarını compile etmek icin Web Compiler 'ı yükleyebilirsiniz.Rota style framework'ü,Bootstrap 3X SASS kütüphanesini kullanıyor.Rota'nin ihtiyaci olan tüm style dosyaları Content folder'i altında bulunuyor.

##İlk Çalıştırma

Uygulamayı ilk defa yüklediyseniz,CSS dosyasi oluşmayacaktir.

CSS oluşturmak için

• Content/scss/rota/rota.scss dosyasını derleyin
• Derleme sonucunda oluşacak compilerconfig.json dosyasının içerigini aşagidaki şekilde değiştirin

SASS compile ayarları

 [
  {
    "outputFile": "Content/css/site.css",
    "inputFile": "Content/scss/rota/rota.scss",
    "options": {
      "relativeUrls": false
    },
    "minify": {
      "enabled": false
    }
  }
]

Bu işlem sonucunda Content/css folder altında site.css dosyasi oluşmuş olucaktir.

##Custom Theme Yaratmak

Rota SCSS kütüphanesini miras alip kendi theme'larınız yaratabilirsiniz.Bunun için,

• Content/scss klasörü altında kendi theme klasörünüzü açın
• Kendi theme SASS dosyalarınızı burada yaratabilirsiniz.
• Ana SCSS dosyanınızın içerigi temel olarak aşagidaki gibi olmalı

Örnek:

DarkTheme adında klasör içine,darktheme.scss ve variables.scss dosyalarını ekleyin.variables.scss dosyasının içeriğini Content/scss/rota/libraries/variables.scss dosyasından kopyalayın.darktheme.scss dosyasına aşağıdaki kodu kopyalayın.

//proje bazlı variables dosyası
@import "variables";
//rota sass dosyaları 
@import "../rota/rota";
//proje bazlı SASS dosyaları
//@import "components/input_groups";
//@import "components/dropdown";
...

Son olarak compilerconfig.json dosyasındali input bilgisini darktheme.scss dosyasını gösterecek şekilde değiştirin.

"inputFile": "Content/scss/DarkTheme/darktheme.scss",

darktheme.scss dosyasını derleyin.Artık kendi theme'nizi oluşturmaya başlayabilirsiniz :simple_smile: