ONUR ERGEN

Bootstrap açık kaynak kodlu bir html,css ve javascript kütüphanesidir(framework). Bootstrap'ın detaylarına bu yazıda değinmeyeceğim. Bu yazıda sizlerle bootstrap 4 beta sürümünde cihaza özgü boyutlara(xs-sm-md-lg) özel tasarım nasıl geliştirebiliriz ona göz atacağız. Yapacağım işlemin gözünüzde canlanması açısından sizlere bir örnekten bahsedeceğim. Böylece cihaza özgü tasarımdan neyi kastettiğimi de anlamış olacaksınız. Elimizde bir adet navbarımız olduğunu ve bu navbarın sağ kısmında sosyal medya iconları için ayrılmış bir bölümün olduğunu gözünüzde canlandırın. Bu alan lg ve md boyutuna sahip olduğunda, tasarımımızın bu kısmında sosyal medya iconlarının yanında aynı zamanda bir yazının bulunmasını istiyorum. Örneğimizi anlayabilmeniz açısından üstteki resim yeterli olabilir diye düşünüyorum.Bizim yapmak istediğimiz ise tasarımımızın sm boyutlarına ulaştığı zaman bu alanda bulunan yazının kaldırılması ve yalnızca sosyal medya iconlarının tasarımımızda gösterilmesi olsun.

Front-end çalışmalarımız sırasında iş akışımızın daha verimli ve sağlıklı bir şekilde gerçekleştirilmesini sağlayan nodejs tabanlı bir javascript aracıdır. Bu sebeple gulpjs kurulumu için öncelikle nodejs'in kurulumunu gerçekleştirmemiz gerekmektedir. NodeJS Adresinden kolayca indirerek nodejs kurulumunu gerçekleştirebilirsiniz. Kurulumu gerçekleştirdikten sonra npm paket yöneticisini kullanarak gulpjs'in kurulumunu gerçekleştiriyoruz. Bunun için komut satırımızı açıyoruz, ardından şu komutu giriyoruz. npm install -g gulp Kurulum tamamlandıktan sonra gulpjs'nin versiyonunu kontrol ederek sistemimizde kurulu olup olmadığını kontrol edebiliriz. gulp -v Komutu ile kontrolümüzü gerçekleştirdikten sonra projelerimizde gulpjs'i nasıl kullanabiliriz ona bir göz atalım. İşlemi sıfırdan gerçekleştirmek açısından öncelikle ornek isminde bir klasör oluşturdum. Ardından klasörü vscode ile açtım. Gulp komutlarını vscode editörünün terminali sayesinde çalıştıra