Sıfırdan tema yazmak

17-03-2023, 19:35:53

Front - End alanındaki arkadaşlar Adobe XD, PSD, Figma tasarımını HTML, CSS'e dökmeniz gerektiğinde sayfa ölçülerini, responsive yapıyı nasıl ayarlıyorsunuz ?

Örneğin resimdeki figma tasarımının ölçüleri 1600 x 5870 bu ölçülere uyuyor musunuz ? Uymuyorsanız nasıl bir yol izliyorsunuz ?

17-03-2023, 19:44:34

#2

rufiqcavadov

tolgaademirr adlı üyeden alıntı: mesajı görüntüle

Front - End alanındaki arkadaşlar Adobe XD, PSD, Figma tasarımını HTML, CSS'e dökmeniz gerektiğinde sayfa ölçülerini, responsive yapıyı nasıl ayarlıyorsunuz ?

Örneğin resimdeki figma tasarımının ölçüleri 1600 x 5870 bu ölçülere uyuyor musunuz ? Uymuyorsanız nasıl bir yol izliyorsunuz ?

Bu konu beni de düşündürüyor. ChatGPT acaba WP to HTML ya da HTML to WP yapıyor mu?

Ayrıca hocam konunuza gelince. Ben genelde şöyle bir yol izliyorum. Muhtemelen Bootstrap veya TailwindCSS gibi CSS frameworklerini kullanıyorlar ama ben genelde custom yazmak istiyorum ama Sizin gibi sorunlarla karşılaşıyorum. Ama genel olarak aşağıdaki örnekteki gibi bir genel atama yapıyorum.

.container { width: 95%; margin: 0 auto; }

17-03-2023, 19:54:56

#3

tolgaademirr

rufiqcavadov adlı üyeden alıntı: mesajı görüntüle

Bu konu beni de düşündürüyor. ChatGPT acaba WP to HTML ya da HTML to WP yapıyor mu?

Ayrıca hocam konunuza gelince. Ben genelde şöyle bir yol izliyorum. Muhtemelen Bootstrap veya TailwindCSS gibi CSS frameworklerini kullanıyorlar ama ben genelde custom yazmak istiyorum ama Sizin gibi sorunlarla karşılaşıyorum. Ama genel olarak aşağıdaki örnekteki gibi bir genel atama yapıyorum.

.container { width: 95%; margin: 0 auto; }

Bu bir çözüm değil bence hocam, height değeri bu sefer sırıtıyor, net bir bilgim olmadığından soruyorum saydığınız CSS kütüphanelerinde bu sorunlar ile karşılaşmıyor muyuz ?

17-03-2023, 20:00:06

#4

rws

media query kullanın, bootstrabı örnek alabilirsiniz
https://getbootstrap.com/docs/5.3/layout/breakpoints/

17-03-2023, 20:05:49

#5

thealiyasar

Önemli olan oradaki ölçü değil kaçlı gridde çizdiğidir. Tasarımlar bootstrap şablonunda çizilir global olarak. Bootstrap grid system diye araştırma yaparsanız hangi ekranda ne ölçü aldığını görebilirsiniz.

18-03-2023, 12:02:52

#6

tolgaademirr

thealiyasar adlı üyeden alıntı: mesajı görüntüle

Önemli olan oradaki ölçü değil kaçlı gridde çizdiğidir. Tasarımlar bootstrap şablonunda çizilir global olarak. Bootstrap grid system diye araştırma yaparsanız hangi ekranda ne ölçü aldığını görebilirsiniz.

Bahsettiğiniz konuya kısmen hakimim diyebilirim ama çoğu figma tasarımında layout kısmında grid sistemi göremedim ve template ölçülerinde %, vh gibi responsive ölçü birimleri verilmemiş random ölçü vermek zorunda kalıyorum her seferinde

18-03-2023, 15:20:40

#7

thealiyasar

tolgaademirr adlı üyeden alıntı: mesajı görüntüle

Bahsettiğiniz konuya kısmen hakimim diyebilirim ama çoğu figma tasarımında layout kısmında grid sistemi göremedim ve template ölçülerinde %, vh gibi responsive ölçü birimleri verilmemiş random ölçü vermek zorunda kalıyorum her seferinde

Ana kapsayıcı layer her zaman 100% mantıgında ılerler, bunun için ölçü vermenize gerek yok. İçerik alanı ortalı gözüküyorsa bunu container olarak algılamanız gerekmekte. Bu yüzden bootstrap çatısını örnek alın diyorum. Bootstrap container'ı her ekrana göre belli bir ölçüde büyür yada küçülür.