Boş Gezenin Boş Kalfası: Rails 7 Denemeler 4

İçindekiler +

Selam bu bölümde Rails uygulamalarımızın görselleriyle uğraşacağız biraz.

Yerleşimi Doldurmak

Yeni App (statik sayfalar) uygulamamızı yaparken stil dosyalarının yerini ve sayfalarımıza yerleşim dosyasında nasıl eklendiğini görmüştük. app/assets/stylesheets/application.css stil dosyamız şu anda boş. Bu bölümde bir CSS framework kullanarak uygulamamıza stiller ekleyeceğiz. Önce yerleşim dosyasında sayfalarımıza bağlantılar koyacağız. Bunları yaparken kısmi (partial) görselleri öğreneceğiz. Sass kütüphanesini kullanacağız.

Biraz yapı eklemek

Konumuz Rails, web geliştirmek üzerine ama biraz da web tasarımı olsa fena olmaz. Yerleşime bazı ilaveler yapıp stillerle güzelleştireceğiz. CSS kodları eklerken Bootstrap kullanacağız. Ayrıca kodumuza da stil ekleyeceğiz. Parça görseller kullanarak yerleşimi düzenleyeceğiz.

Bir web uygulaması yaparken kullanıcı arabirimine arada yukardan bir bakış atmak iyidir. Sayfaları tasarlarken genelde bir eskiz çizim yapılıp (web tasarımında buna wireframe denir) yerleşim ve stilleri hayal etmek çok yaygın kullanılır. Bu bölümde daha önce hazırladığımız statik sayfalar üzerinde duracağız. Ana sayfamızın eskizini aşağıda görüyorsunuz. İşimiz bittiğinde sayfada bir Rails logosu da olacak, taslağımıza birebir uymak zorunda değiliz nasılsa.

Navigasyon linkleri

İlk olarak yerleşim dosyamız application.html.erb dosyasında taslakta gördüğümüz bağlantı yazılarını ekleyelim.

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title yield(:title) %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <link rel="manifest" href="/manifest.json">
    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "Yeni App", "#", id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Ana Sayfa", "#" %></li>
            <li><%= link_to "Yardım", "#" %></li>
            <li><%= link_to "Giriş", "#" %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

Sayfanın <body> elemanı içeriği tarayıcıda gördüğümüz kısımdır. Buraya ilaveler yaptık.

    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "Yeni App", "#", id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Ana Sayfa", "#" %></li>
            <li><%= link_to "Yardım", "#" %></li>
            <li><%= link_to "Giriş", "#" %></li>
          </ul>
        </nav>
      </div>
    </header>

<header> içeriğinde sayfa üst bandında planladığımız yazı şeklinde uygulama logomuz ve birkaç link yazısı var. <header> elemanı birçok CSS sınıf adına sahip (navbar, navbar-fixed-top ve navbar-inverse). Tüm html elemanları bunun gibi class ya da id değerlerine sahip olabilir. Bu değerler stil kurallarını belirlerken ya da kodlarla elemana ulaşmak için kullanılır. class değeri birçok elemanda aynı kullanılabilir, ama aynı id değerinin sayfada sadece bir tek elemanda olması tavsiye edilir. Bu kodda gördüğümüz class değerleri Bootstrap CSS kütüphanesinde kullanılan sınıf isimleri. Şimdilik bu kütüphane yüklü olmadığı için görselimizde bu elemanlar default stilleriyle yayınlanır.

<header> içinde bir <div> elemanı görüyoruz.

      <div class="container">

<div> elemanı sayfada bölümler oluşturmak için kullanılan genel bir eleman. Eski HTML kodlarda <div> elemanı yegane bölümlendirme elemanıydı, anca Html5 sonrasında <header>, <nav> ve <section> gibi elemanlar da bölümlendirme amaçlı kullanılmaya başladı. Buradaki <div> elemanımız container sınıf değerine sahip. <header> elemanındaki sınıflar gibi bu da Bootstrap sınıflarından biri.

<div> içeriğinde en başta bir gömülü Ruby kodu var.

        <%= link_to "Yeni App", "#", id: "logo" %>

Burada Rails yardımcı metodu link_to ile sayfada bir <a> elemanı üretiliyor. Metodun ilk parametresi görünen yazı , ikinci parametre ise bağlantı yapılacak URL değeri (yani <a> elemanının href özelliği). Şimdilik URL değerini # olarak veriyoruz, bu geçici olarak verilmiş bağlantıyı hiç bir yere göndermeyen bir URL değeri olarak kullanılır. Metodun 3. parametresi eleman özelliklerini verebileceğimiz bir hash değer, burada id özelliğine "logo" değeri veriliyor. Bu metod o noktada,

<a id="logo" href="#">Yeni App</a>

Elemanını sayfa HTML koduna ekler.

Görselimizde daha sonra bir <ul> listesi olarak navigasyon linklerimiz var.

        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Ana Sayfa", "#" %></li>
            <li><%= link_to "Yardım", "#" %></li>
            <li><%= link_to "Giriş", "#" %></li>
          </ul>
        </nav>

Burada <nav> elemanını kullanmamıza gerek yok, ama kodumuzda navigasyon bölümünü ayrı göstermek için kullanılıyor. Ancak <ul> elemanı sınıf değerleri nav, navbar-nav ve navbar-right tabi ki Bootstrap CSS kütüphanesinde anlamlar taşıyor. Burada da link_to yardımcı metodu kullanılmış Ruby sayfayı işleyince burası için şu html kodu üretir.

  <nav>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Ana Sayfa</a></li>
      <li><a href="#">Yardım</a></li>
      <li><a href="#">Giriş</a></li>
    </ul>
  </nav>

Son olarak sayfa görsel dosyasını içeriğe yine container sınıf değerine sahip bir <div> elemanı içinde koyuyoruz.

    <div class="container">
      <%= yield %>
    </div>

Sayfa alt kısmı hariç yerleşim dosyasında yapacaklarımız bu kadar. Server'ı bir çalıştırıp bakalım.

Ana sayfa görselimiz home.html.erb dosyamıza da Bootstrap kütüphanesi için bir şeyler ekleyelim.

<div class="center jumbotron">

  <h1>Yeni Uygulama</h1>
  <h2>Bu uygulama ile Rails 
    <a href="https://ujk-ujk.blogspot.com/2025/03/rails-7-denemeler-2.html#Statik%20Sayfalar">
    Statik Sayfaları</a> öğreniyoruz
  </h2>
  <%= link_to "Hemen Katılın!", "#", class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.svg", alt: "Rails logo", width: 200),
      "https://rubyonrails.org/" %>

Sitemize yeni kullanıcı kayıtlarını yapmak için ilk önce katılım butonu ekliyoruz.

  <%= link_to "Hemen Katılın!", "#", class: "btn btn-lg btn-primary" %>

<div> elemanında jumbotron sınıf değeri Bootstrap için özel bir gösterim bölgesi demek, btn sınıfları yardımı ile de kaıtlım linki bir butona dönüşecek. İkinci link_to metodu ilk parametresinde image_tag metodunun dönen değerini almış. image_tag yardımcı metodu da sayfaya bir <img> elemanı ekler. rails.svg dosyasını internetten bulup app/assets/images klasörüne koydum. Buradaki dosyaları Rails görsellerde kullanabilir. image_tag ile üretilen <img> elemanı.

<img alt="Rails logo" width="200" 
  src="/assets/rails-....svg">

O src değerindeki bir sürü harf ve karakter Rails server'ın güvenlik amacıyla kendisine bağlanan her tarayıcıya başka verdiği bir kodlama. Böylece tarayıcıda sayfa her yenilendiğinde cash'den değil server'dan resim yeniden talep edilmesi, garanti edilir.

Sayfamızın son görüntüsü şöyle oldu.

Bootstrap ve CSS stillerimiz

Az evvel görsellerimize birçok sınıf değerleri ekledik, bunların Bootstrap kütüphanesinde bulunduğunu söylemiştik. Bootstrap html sayfalarında yerleşim ve görünümleri kolayca ayarlamak için yararlanabileceğimiz bir CSS kütüphanesi ve Rails yazılımcıları tarafından çok kullanılır. Bootstrap kullanırsak sayfamızın değişik cihazlarda (telefon , tablet , pc) nasıl görüneceği konusunda fazla uğraşmayız, Bootstrap bizim adımıza işin büyük kısmını halleder.

Şimdi uygulamamızı Bootstrap kütüphanesini kullanır hale getireceğiz. Rails uygulamalarında bunu başarmak için bootstrap-sass gem'i uygulamamıza eklemeliyiz. Bootstrap kütüphanesi sayfalarımızda stilleri yönetirken less CSS dilini kullanır. Fakat Rails uygulamaları benzer bir dil olan Sass kullanır. Bu yüzden bootstrap-sass Less dilini Sass diline çevirir ve Bootstrap stillerini uygulamamızda kullanmamızı sağlar. Şimdi Gemfile dosyamızı açalım.

source "https://rubygems.org"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "7.2.2"

gem "bootstrap-sass", "3.4.1"
gem "sassc-rails", "2.1.2"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"
.....

Bu iki satırı ekleyip dosyamızı kaydettikten sonra terminalde

$ bundle

komutunu çalıştıralım, bu bundle install komutunun kısa hali.

rails otomatik olarak bir CSS stil dosyası oluşturur. Ama burada standart dışı bir CSS kodlaması kullanacağımız için kendimize yeni bir stil dosyası oluşturup bunu kullanalım. Rails için default stil dosyaları yeri app/assets/stylesheets klasörü. Bu klasöre custom.scss adında bir dosya ekleyelim. Uzantısı .scss anlamı “Sassy CSS” ve stillerimizde sass dilini kullanmamızı sağlayan dosya uzantısıdır. Dosya içine şunları yazalım.

custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

@import ile Bootstrap ve onunla bağlantılı sprockets kodlarını stilimize ekliyoruz. Bu satırlarla Bootstrap kütüphanesinin tüm stil kuralları uygulamamızda geçerli olacaktır. Dosyayı kaydedip server'ı başlatırsak Rails otomatik olarak Bootstrap stillerini içeren custom.css dosyasını da sayfalarımıza dahil eder (çünkü default stilller klasöründe).

Wow Bootstrap sınıf adlarını elemanlarımızda kullanarak görüntüde yaptığımız inanılmaz değişikliğe bakın.

Şimdi kendi stillerimizi ekleyerek taslağımıza göre sayfamızı şekillendirmeye devam edeceğiz. cıustom.scss dosyamıza devam edelim. Yaptığımız ilavelerin neleri etkilediğini satırları /* */ arasına alıp yorum haline getirip devre dışı bırakarak ya da kullanmayı biliyorsanız ilgili elemanı tarayıcımızın geliştirici araçları'nda bulup o stilin yanındaki tiki kaldırarak görebiliriz.

@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */
body {
  padding-top: 60px;
}

Bu kural ile sayfalarımız içeriği (<body> elemanı içeriği) yukarıdan 60 piksel aşağıdan başlatılır, yani üstte bir boşluk bırakılır. <header> elemanının navbar-fixed-top class özelliği sayesinde Bootstrap <header> elemanını en üste sabitlediği için bu kuraldan etkilenmeden hala en üste yapışık kalır. Bu durumda eklediğimiz padding-top stil kuralı sayfa içeriğini <header> elemanından biraz uzaklaştıracaktır. Bir bilgi daha navbar-inverse sınıf özelliği ile üstteki barın koyu renk arka planlı olması sağlanır.

İlavelere devam edelim

....

.center {
  text-align: center;
}

home.html.erb sayfa görseli dosyamızda içeriği bir <div> elemanı içine koyup stil sınıfı olarak center ve jumbotron değerleri vermiştik. jumbotron o hafif gri arka planlı bölgeyi yapıp, yazıları kocaman yapıyor. center değeri ise şimdi eklediğimiz stil kuralı sayesinde içerik yazılarının <div> içinde ortalanmış şekilde görünmesini sağlıyor. Sayfayı yenilersek buton dahil tüm jumbotron içeriğinin ortalandığını göreceğiz.

Bootstrap typografy (yazı gösterimi) için birçok stil kuralına sahip olmasına rağmen, sayfalarımızda yazı görünümleri için kendi bir kaç kuralımızı da ekleyeceğiz. Bunların hepsi ana sayfamızda kullanılmayacak ama uygulamamızın bir yerlerinde lazım olacak.

custom.scss

.....

/* typography */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

Son olarak site logomuz olan sol üstteki Yeni App yazısını da şekillendirelim.

.....
/* header */
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
} 

Burada color: #fff; kuralı yazı rengini belirliyor, stil kurallarında renk belirtme 3 parçada yapılır (# ile başlaması bunu gösterir), hexadecimal olarak kırmızı , yeşil ve mavi renk parlaklıkları 0-255 (00-ff) arasında girilir. Buradaki #fff değeri aslında #ffffff (yani tüm renkler full, yani beyaz renk) değerinin kısa ifade ediliş şekli. Değer girmek yerine hazır tanımlı birçok renk isimlerini de kullanabiliriz.

  color: white;

olarak girebiliriz. Şimdi stil dosyamızı kaydedip sayfayı yenileyelim.

Kısmi görseller

Her ne kadar yerleşim dosyamız (application.html.erb) işimizi görse de biraz karmaşık duruyor. Daha buna header bölümüne benzer bir de footer (sayfa alt kısmındaki görseller) bölümü ekleyeceğiz. Rails programcıları böyle uzun dosyaları sevmez, bu yüzden görselleri kısmi görsel dosyaları yardımı ile başka dosyalarda toplarlar. Aslında bir örneğini denemeler yaparken görsellerde ortak kullanılan form görselini bir kısmi görsel dosyasından yüklerken görmüştük. Buna benzer birkaç sayfada kullanılan parçalar da kısmi görseller içinde toplanır.

Şimdi ilk olarak mevcut olan <header> elemanımızın olduğu kısmı aynı klasördeki app/views/layouts/_header.html.erb dosyasına kopyalayalım. Kısmi görsel dosyalarının isimleri alt çizgi ile başlar ve böylece Rails onların birer kısmi görsel dosyası olduğunu bilir.

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "Yeni App", "#", id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Ana Sayfa", "#" %></li>
        <li><%= link_to "Yardım", "#" %></li>
        <li><%= link_to "Giriş", "#" %></li>
      </ul>
    </nav>
  </div>
</header>

Şimdi yerleşim dosyamızda bu kısmi görseli kullanmak için <header> elemanının olduğu yere bir render kodu yazalım.

app/views/layouts/application.html.erb

....
  <body>
    <%= render "layouts/header" %>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

Sayfayı yenilersek her şeyin aynı olduğunu görürüz. Kısmi görsel adını alt çizgi ile yazmamıza gerek yok. Rails görsel kodunda render komutu görünce zaten alt çizgi ile başlayan bir dosya arar, ama dosya yerini app/views/ ana görsel klasörüne göre tarif etmeliyiz.

Şimdi taslağımızda sayfanın en altında görünenler için de bir _footer.html.erb kısmi görseli oluşturalım.

app/views/layouts/_footer.html.erb

<footer class="footer">
  <a href="https://rubyonrails.org/">Ruby On Rails</a>
  <nav>
    <ul>
      <li><%= link_to "Hakkımızda", "#" %></li>
      <li><%= link_to "İletişim", "#" %></li>
      <li><%= link_to "Haberler", "https://rubyonrails.org/blog/" %></li>
    </ul>
  </nav>
</footer>

Bu kısmi görseli de sayfamızın en altına render koduyla ekleyelim.

app/views/layouts/application.html.erb

....
  <body>
    <%= render "layouts/header" %>
    <div class="container">
      <%= yield %>
      <%= render "layouts/footer" %>
    </div>
  </body>
</html>

Bu kısma ait bir de stil kodlarımız var, bunları da custom.css dosyamızda footer başlığı altında ekleyelim.

custom.css

....
/* footer */
footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

Şimdi sayfamızı yenilersek taslağımıza oldukça benzer bir şeyler elde ettik.

Sass ve Asset Pipeline

Rails'in en önemli özelliklerinden biri image ve stilleri yönetmek gibi işleri basitleştiren asset pipeline. Bu kısımda asset pipeline olayına bir bakış atarken stillerimizi oluşturmada Sass dilini nasıl kullanacağımızı göreceğiz.

Asset pipeline

Tipik bir Rails geliştiricisi gözüyle bakınca uygulamamızdaki varlıkların yönetimi ile ilgili üç başlık düşünülebilir: asset klasörleri, manifest dosyaları ve preprocessor engine'lar.

Rails varlık yönetimi her birinin amacı olan üç standart klasör kullanır.

app/assets: uygulamamıza özel varlıklar
lib/assets: geliştiricileriniz tarafından yazılan kütüphane varlıkları
vendor/assets: 3. parti üreticiler tarafından üretilmiş varlıklar (default olarak bulunmaz.)

Bu klasörlerin her birinde image ve stil dosyaları için alt klasörler bulunur.

$ ls app/assets
config  images  stylesheets

Bu noktada app/assets/stylesheets klasöründe eklediğimiz custom.css stil dosyamızın çalışmasını anlamaya gayret edeceğiz.

Manifest dosyaları

Varlıklarımızı olması gereken yere koyduğumuzda Rails'e (sprocket gem kullanarak) onları nasıl tek bir varlık dosyası altında toplayacağını Manifest dosyası ile anlatırız. Bu CSS ve JavaScript dosyalarımıza uygulanır, ama image dosyalarımıza uygulanmaz. Örnek olarak uygulama stil dosyası application.css dosyamızdaki satırlara bakalım.

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

Burada her şey CSS kod yorumu gibi görünüyor, ancak sprockets için anlamı olan satırlar var.

 *
 *= require_tree .
 *= require_self
 */

Burada

 *= require_tree .

satırı application.css ile aynı klasör ve alt dizinlerindeki dosyaların application.css içinde servis edileceğini belirtir.

 *= require_self

satırı ise appli,cation.css kendisi içinde mevcut olan kodların servis edilen css içinde nerede olacağını gösterir. Tarayıcınızın geliştirici araçları penceresinde stil dosyası linkine sağ tıklayıp "yeni sekmede aç" seçerseniz tüm stil kodlarının en altında application.css içinde yazılı kodları görürsünüz.

......

/* line 95, app/assets/stylesheets/custom.scss */
footer ul li {
  float: left;
  margin-left: 15px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

Gördüğümüz üzere sprockets tarafından değerlendirilen iki satır yorum burada görünmüyor.

Preprocessor Engine

Varlıklarınızı birleştirdikten sonra Rails onları sayfada tarayıcınıza servis etmek için manifest dosyalarını kullanarak bazı ön işlemlerden geçirir. Rails'e hangi ön işlemin uygulanacağını dosya uzantıları ile veririz. En çok kullanılan iki dosya uzantısı .erb görsel dosyaları ve .scss stil dosyalarıdır. Sonuçta tarayıcılar Sass stil kodlarını anlamaz Rails onları tarayıcının anlayacağı hale getirip servis eder. Preprocessor engine'lar işte bu dönüştürmeleri yapar.

Production mode verimliliği

Asset pipeline'ın en büyük faydası uygulamamızı production modunda (geliştirme bitmiş ve siteyi yayınlamışızdır) performanslı hale getirmesidir. Geliştirme yaparken bir sürü stil dosyaları içinde amaçlarına göre ayrılmış stiller , bölümlemeler birçok girintili kodlar vs. uygulamamızı kullanmaya başladığımızda tek tek tarayıcıya yüklenirse performansı düşürecektir. Buna karşılık uygulamayı geliştirirken de bize çok yardımcı oluyor.

Asset pipeline sayesinde tüm stil dosyalarımız tek bir css dosyasında toplanarak servis edilir ve uygulamamızın performansı yükselir.

Sass diline bir bakış

Stilllerimiz Sass dili kullanarak yazmak birçok faydalar sağlar. Bu kısımda iç içe kodlama ve değişken kullanımı gibi bazı faydalarını inceleyeceğiz. Daha önce .scss uzantılı stil dosyası kullandık, bu dosya bir Sass kod dosyasıdır. Sass dili CSS kodlamayı tamamen değişik bir dille yapmak yerine ona ilave özellikler getirir, yani Sass kodlarında bilinen klasik CSS kodları rahatlıkla kullanılabilir. Yani eski projelerdeki CSS kodları Sass dosyalarında da kullanılabilir.

Bizim örneğimizde Sass kodlarını Bootstrap özelliklerinden faydalanmak için baştan beri kullandık.

İç içe stiller

Stil kuralları içeren dosyalarda iç içe kullanım kullanarak Sass özelliklerinden yararlanmak için .center ve .center h1 stillerimize bir bakalım.

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
} 

Burada alttaki .center h1 kuralını yeni ekledik. Bu iki grubu Sass kullanarak şöyle birleştirebiliriz.

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  } 
}

Standart CSS kodlamasında bu imkan yoktur, ancak Sass sayesinde bu şekilde kullanım çok daha anlaşılabilir değil mi?

Benzer bir kolaylık logomuzun stilinde kullanılabilir.

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
} 

Burada #logo id değeri iki farklı yerde kullanılıyor. :hover özelliği eleman üzerine mouse işaretçisi gelince olacak görünümü belirliyor. Bu şekilde özellik ifadeleri iç içe ifadede kullanmak için ana elemanı ifade eden & operatörü kullanılır.

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: #fff;
    text-decoration: none;
  } 
}

Sass dili &:hover ifadesini işlerken #logo:hover ifadesi olarak kullanır. Tüm bu iç içe kullanma tekniklerini bir de footer stillerine uygulayalım.

/* footer */
footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a {
    color: #555;
    &:hover {
      color: #222;
    }
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

Sass değişkenleri

Sass değerlerin sürekli tekrar yazılmasının önüne geçmek ve daha okunabilir kodlama için değişken kullanımını destekler. Örneğin

h2 {
  .
  .
  color: #777;
}

footer {
  .
  .
  color: #777;

Renk olarak #777 değeri açık gri bir renktir. İstersek bunu bir değişken ile ifade edebiliriz.

@import "bootstrap-sprockets";
@import "bootstrap";

$light-gray: #777;
....

h2 {
  .
  .
  color: $light-gray;
}

footer {
  .
  .
  color: $light-gray;

Aslında $light-gray ifadesi #777 'den daha açıklayıcı olduğu için, tekrarlanmayan değerler için de değişken kullanılması daha mantıklı olabilir. Bootstrap'ta tanımlı birçok Less değişkeni vardır. Bunları stillerimizde kullanabiliriz. Tek bir fark var Less değişkenleri @ ile başlar Sass değişkenleri $ ile , ama aynı isimleri kullanabiliriz. Sayfasına bakarsak @gray-light adında bir değişken var ve değerini lighten(@gray-base, 46.7%) olarak vermiş bu bizim #777 renk değerimize eşdeğer (#FFF değerinin %46.7'si #777). Yani Sass kodumuzda değişken tanımlamadan direk $gray-light kullanabiliriz.

@import "bootstrap-sprockets";
@import "bootstrap";

/*$light-gray: #777;*/
....

h2 {
  .
  .
  color: $gray-light;
}

footer {
  .
  .
  color: $gray-light;

Stil dosyamızın tüm Sass özellikleri, değişkeleri, hazır renk isimlerini kullanacak hale getirilmiş son hali şöyle olur.

custom.css

@import "bootstrap-sprockets";
@import "bootstrap";

$gray-medium-light: #eaeaea;

/* universal */
body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  } 
}




/* typography */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}




/* header */
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  } 
}



/* footer */
footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

Yerleşimdeki linkler

Görsellerimizi oldukça iyi bir hale getirdikten sonra şimdi linklerimizde sonraya bıraktığımız (# yazarak) adreslerin de

<a href="/static_pages/about">Hakkımızda</a>

şeklinde gelmesi için erb kodlarına yapılacak müdahaleye sıra geldi. Rails programcıları böyle sabit adres değerleri girmek yerine bu işleri kodlama ile yapmak isterler. Mesela yukarıdaki link için olan kodumuzu

<%= link_to "Hakkımızda", about_path %>

şeklinde kullanmak isterler. Bunlara named routes denir. Hem bu sayede about_path sdres değerini değiştirerek onu kullanan her yeri de değiştirmiş oluruz.

Şimdilik uygulamamızda kullanılan isimlendirilmiş yönlendirmeler için bir plan yapalım.

    Sayfa       URL       Named route
    ----------------------------------
    Anasayfa    /            root_path
    Hakkımızda  /about      about_path
    Yardım      /help        help_path
    İletişim    /contact  contact_path
    Katılım     /signup    signup_path
    Giriş       /login      login_path

Neyse bu bölüm de çok uzadı, burada keselim. Sonraki bölüme şu İletişim sayfasını ekleyerek başlayacağız. Şimdilik kalın sağlıcakla..

<-- Önceki Sonraki -->

Boş Gezenin Boş Kalfası

Hakkımda

31 Mart 2025 Pazartesi

Rails 7 Denemeler 4