AutomaticCSS İncelemesi: Oksijen ve WP için Profesyonel CSS Yardımcı Çerçevesi

Bu makalede, Oxygen Builder için AutomaticCSS yardımcı programı CSS çerçevesini inceleyeceğiz. Bunun, oluşturucu için eklenti araç setinize iyi bir katkı olup olmadığını görmek için özellikleri, fiyatlandırmayı, maddi olmayan duran varlıkları ve rakipleri inceleyeceğiz.

Otomatik CSS Özellikleri

Her şeyden önce, AutomaticCSS bir CSS çerçevesidir . Oxygen Builder'da HTML öğelerine stil vermek için CSS kullanıyoruz. Bu nedenle, bu araç, oluşturucu içindeki başlıklar, metinler ve div'ler gibi bileşenlerin renklerini, boyutlarını, aralıklarını ve diğer görsel öğelerini değiştirmek için kullanılır.

Diğer Oksijen odaklı CSS çerçeveleri gibi, oluşturucuyla birlikte verilen inanılmaz sınıf sistemini kullanabilir ve öğeleri UI ile manuel olarak biçimlendirmekten çok daha verimli olması için bu çerçeveden sınıflar ekleyebiliriz. İşte çerçeveleri neden bu kadar çok sevdiğimize dair güzel bir örnek.

Bir div'in arka planını, üzerine gelindiğinde web sitemizin vurgu rengiyle değiştirmek istediğimizi varsayalım. Bunun gibi bir şey:

AutomaticCSS ile bunu yapmak için bu tek sınıfı kullanıyoruz:

.bg–vurgulu vurgu

Vurgu rengi Yönetici ayarları panelinde ayarlanır. Kullanıcı fareyi bu sınıfın atandığı öğenin üzerine getirdiğinde, arka plan vurguya dönüşür.

AutomaticCSS olmadan, aynı etkiyi elde etmek için gereken adımlar şunlardır:

İlk olarak, Oxygen'de global bir renk oluşturacağız ve buna Accent adını vereceğiz. Ardından, vurgulu efektimizin uygulanmasını istediğimiz div'e gideceğiz. Gelişmiş -> arka plana gidin ve varsayılan rengi ayarlayın. Şimdi gelişmiş -> efektlere gidin ve geçişi yaklaşık 1 saniye olarak ayarlayın. Ardından sınıf girişine gidin, "dur" u tıklayın ve üzerine gelin. Gelişmiş -> arka plana gidin ve vurgulu olarak vurgu rengini ayarlayın.

Aynı efekti bir çerçeve olmadan elde etmeye çalışıyorsanız, birden fazla tıklama ve adım olduğunu göreceksiniz. Ve kimliği şekillendiriyorsanız ve bir sınıf kullanmıyorsanız, bu etkiyi yaratmak için her gittiğinizde bunu yapmanız gerekir. Umarım bu, çerçevelerin neden AutomaticCSS gibi olduğunu ve bir web sitesi oluştururken çok fazla zaman kazandırdığını gösterir… saniyeler ve düğme tıklamaları toplanır!

Çerçeveler ayrıca işleri tutarlı tutar – birden fazla öğeyi boşluk bırakmak ve renklendirmek için aynı sınıfı kullanarak her şeye temiz, profesyonel bir görünüm verirsiniz. Stiller merkezileştirildiği için sınıfları kullanırken genel değişiklikler kolaydır.

Neden bir çerçeve kullanmanız gerektiği hakkında daha fazla bilgi için bunu okuyun:

Yayınlandığı tarihte, AutomaticCSS'nin cheet sayfasına bakarak keşfedebileceğiniz 903 sınıfı vardır. Bu sınıflar, renklendirme, boşluk bırakma, yazı tipi boyutları, CSS ızgaraları, esnek düzen vb. dahil her şeyi kapsar.

CSS Değişkenleri

Sınıflar, teklifin özüdür, ancak çerçeve ayrıca CSS Değişkenlerini de içerir.

Buna güzel bir örnek renklerdir. :root {--main-bg-color:grey;} içinde a yaparak tema oluşturabilirsiniz. Daha sonra şunu kullanarak bunu belirli öğelere ekleyebilirsiniz: background-color: var(--main-bg-color);

Genel değişiklikler yapmak istiyorsanız, değişkenler harikadır.

AutomaticCSS'de, renklerinizi Yönetici Panelinde (aşağıda bahsedilmiştir) ayarlarsınız ve bunları yardımcı program sınıfları ve aynı zamanda değişkenler ile ekleyebilirsiniz. Oksijen ayarları doğrudan CSS'ye çevrildiğinden, giriş alanlarına aşağıdaki gibi birçok değişken yapıştırabilirsiniz:

Ayarları Değiştirmek için Yönetici Paneli

Temel boyutlandırma, yedekler ve renkler gibi genel ayarlar, WordPress arka ucunuzdaki bir Yönetici panelinde belirlenir.

Bu ayarların genel doğası gerçekten harika, özellikle boyutlandırma seçenekleri.

Düğmelerin çok büyük olduğunu düşünüyorsanız, buradaki ayarları değiştirmeniz yeterlidir, sitedeki tüm düğmeler düzenlenecektir. Sitedeki her şeyin birbirine daha yakın olması gerektiğini düşünüyorsanız, taban aralığını 30 pikselden 40 piksele değiştirmek, aynı anda her şeyin etrafında biraz daha fazla alan ekleyecektir.

Her şey Otomatik

Adından da anlaşılacağı gibi, boyutlandırma ve aralık otomatiktir. Renk tonları, temel renklerinizden otomatik olarak oluşturulur ve boyutlandırma/aralık/yazı tipi boyutları, görüntü alanı genişliğine bağlı olarak otomatik olarak değişir.

Bu, calc() ve REM'e geri dönüşlerle birlikte karmaşık klemp() kombinasyonları kullanılarak yapılır. İşte Margin Bottom Small sınıfının bir örneği.

.margin-bottom–s { margin-bottom: 2.133rem; marj-alt: hesap(2.2492970947rem + (-0.2492970947* ((100vw – 32rem) / 96))); kenar boşluğu-alt: kelepçe(2.2492970947rem, calc(-0.2596844736vw + 2.3323961262rem), 2rem); }

Bu, görünüm alanına göre otomatik olarak ölçeklendirme yapmak için hesaplamaların yanı sıra geri dönüşlerin karmaşıklığını gösterir. Ayrıca harika olan şey, bu değerlerin Yönetici Panelindeki temel ayarlardan hesaplanmasıdır. Bunları değiştirirseniz, site genelinde bunun gibi tüm değerler de değişecektir.

Flex ve CSS ızgarası da ekranın boyutuna otomatik olarak yanıt verir.

Oxygen Builder'daki her kesme noktası için boyutlandırmayı ve aralığı manuel olarak düzenlemeniz gerekmeyeceğinden, bu size çok zaman kazandıracaktır.

Bununla birlikte, bu gerçekten hafif bir kit parçası, sizi ID ile stil vermekten veya tonlarca özel sınıf yapmaktan kurtaracağını düşünüyor. Aynı zamanda, bir yardımcı program çerçevesinin avantajlarından yararlandığınız için, İzotropik Ajans'taki geliştiricilerin kullanmaktan gerçekten keyif aldığı bir şeydir, ancak birçok yönü otomatik olarak yapılmıştır.

Oksijen için de mükemmeldir. (Not: Tailwind'i Next ile oluşturulmuş özel projelerde kullanmaktan gerçekten keyif alıyoruz, ancak ":' veya "/" karakterlerini (diğer sorunların yanı sıra) desteklemediği için çerçeveyi Oxygen'de kullanamıyoruz. ' kesme noktasına özel stiller belirtin, bu yüzden Tailwind kullanamayız. OxyMade (başka bir çerçeve) Tailwind'den ilham almıştır, ancak duyarlı sınıflar söz konusu olduğunda yetersiz kalır.)

AutomaticCSS, -l -m -sm tanımlayıcılarıyla bunun gibi bir şeyi destekler.

Sayfa Oluşturucu / Diğer Eklenti Desteği

Çerçevenin, Oluşturucu ve Form Sistemi Desteği için gelecek planlarını gösteren genel bir yol haritası vardır. Gelecekte Bricks (inceleme), Zion (inceleme), Gutenberg, WooCommerce, North Commerce ve hatta WordPress olmayan platformları destekleyecekler (Tailwind gibi NPM paketi harika olurdu!).

Ayrıca, hem Fluent Forms hem de Gravity Forms ile birlikte favori form oluşturucumuz WSForm'u (ayrıntılı inceleme burada) destekleyecekler.

Kamu Yol Haritası

Bu nispeten yeni bir ürün ve yol haritası gerçekten umut verici görünüyor. Oxygen Builder ve diğer yardımcı programlar için oluşturucu panosu gibi özellikler gerçekten heyecan verici.

Araç ipuçları, degrade arka planlar, simge sınıfları ve diğer benzersiz özellikler de yakında geliyor ve özel kod veya ek eklentilere olan ihtiyacı ortadan kaldıracak.

Kullanım Kolaylığı (Yeni Başlayanlar Kullanabilir mi?)

Sınıf yönetimine sahip bir oluşturucu kullanan herkesin bir çerçeve kullanmasını öneriyoruz. GUI kullanmaktan çok daha hızlı ve verimli. Yeni başlayanlar bir çerçeveyi çabucak öğrenecekler ve AutomaticCSS çılgınca bir şey değil.

Tek yapmanız gereken, genel kavramları anlamak için çerçeveyi kullanmak. Hızlanmak için tüm sınıfları listeleyen Cheat Sheet'i kullanabilirsiniz. Ayaklarınızı ıslattığınızda, inanılmaz sezgiseldir.

Otomatik CSS Fiyatlandırması

AutomaticCSS, kişisel lisans için yılda 69$ ve ajans lisansı için yılda 99$'dan gelir. Kişisel, bir site içindir ve ajans sınırsız site içindir.

30 gün para iade garantisi var.

Ödemeyi durdurursanız, çerçeveye erişmeye devam edersiniz (hiçbir şey bozulmaz), gelecekteki güncellemeleri almayı bırakırsınız. Bu fiyatlandırma modeli, bu ürünle elde edeceğiniz özellikler, değer ve zaman tasarrufunun yanı sıra aktif geliştirme ve yayın planı göz önüne alındığında inanılmaz derecede adil.

Otomatik CSS Çember Topluluğu

AutomicCSS'i satın aldığınızda, soru sorup yanıtlayabileceğiniz, destek alabileceğiniz ve özellikler talep edebileceğiniz canlı bir topluluğa erişim elde edersiniz. İnanılmaz derecede aktif ve orada gördüğüm her soru çabucak cevaplandı.

Bu, pek reklamı yapılmayan, ancak muazzam bir katma değer sağlayan bir şey. İnsanlar ürün hakkında konuşuyor, aynı zamanda diğer harika konseptler de (ekran görüntüsünün altındaki gönderiye bakın).

Bir platform olarak Circle (topluluğun üzerine inşa edildiği şey) inanılmaz. Kullanıcı arayüzü kolaydır, tasarım basittir ve belirli içeriği aramak çok kolaydır.

Rekabete Bir Bakış

Oxygen Builder için sağlam bir CSS çerçevesi söz konusu olduğunda, AutomaticCSS tek seçenek değildir. Bakmaya değer iki rakip var; OxyNinja ve OxyMade.

Üçü de "çerçeve" olsa da, AutomaticCSS kendini biraz farklı konumlandırır (nasıl farklı olduğuna dair bu resmi gönderiyi okuyun).

• Başlıkları, bölümleri ve daha fazlasını varsayılan olarak şekillendirerek işleri daha hızlı hale getirir.
• Tailwind ve Tailwind'den ilham alan OxyMade'de gördüğümüz mt-10 gibi ayrıntılı yardımcı sınıflara olan ihtiyacı ortadan kaldırarak daha otomatik olmaya odaklanır. Bu nedenle daha basit ve ezberlenmesi daha kolaydır.
• Her şeyi bir yönetici paneli aracılığıyla küresel olarak şekillendireceksiniz ve ayarlar (boyutlandırma ve boşluk gibi) buna göre ayarlanacak. Bu nedenle aynı sınıfları farklı sitelerde kullanabilir, farklı sonuçlar elde edebilirsiniz.
• Yukarıda bahsedilen sağlam bir tip ve renk sistemi var. OxyMade harika bir renk sistemine sahiptir, ancak ACSS'ler daha ayrıntılıdır.
• Geri dönüşler var – calc() klemp() desteklenmiyorsa kullanılır. calc() desteklenmiyorsa REM kullanılır.

Yukarıda bağlantılı gönderiden alınan bu cümle, iki rakipten ne kadar farklı olduğunu tartışırken kafadaki çiviyi vuruyor.

Automatic.css otomatik olarak yanıt verir. Kesme noktası ayarlamalarına gerek yoktur, bu da onu kurulumu, özelleştirmesi ve bakımı en kolay yardımcı program çerçevesi haline getirir.

Ayrıca daha ucuz ve sadece bir çerçeve. Hem OxyNinja hem de OxyMade, şablonlar ve diğer öğelerle birlikte gelir… ACSS'de yoktur.

Son olarak, topluluk (ve topluluk üyelerinden gelen destek), diğer ürünlerin hiçbirinin sunmadığı bir şeydir. Neredeyse mini bir Oxygen Builder FB grubu gibi, ancak daire şeklinde ve AutomaticCSS'ye odaklanmış durumda.

Bir AutomaticCSS vs OxyMade vs OxyNinja karşılaştırması için aramaya devam edin. Her ürünü çok iyi tanıyoruz ve yıllar boyunca müşteri projelerinde hepsini kullandık. Kullanım durumunuza bağlı olarak, her teklif sizin için iyi bir seçim olabilir. Şimdilik, her incelemeyi okuyun ve her birinin sunduğu şeyleri daha iyi anlamak için her siteye gidin.

Çözüm

AutomaticCSS, Oxygen Builder için inanılmaz bir çerçevedir. Kullanımı kolay, sezgisel ve sağlam bir CSS çerçevesi arıyorsanız, AutomaticCSS tam size göre. Hızlı, güvenilir ve arkasında harika bir topluluk var. Fiyatlandırma söz konusu olduğunda, çerçeve rakiplerine kıyasla çok uygun.

Anlaması basit ve hızlı kullanıma hazır bir şey arıyorsanız – AutomaticCSS akıllıca bir bahistir.

Umarız bu inceleme yardımcı olmuştur. Herhangi bir düşünceniz veya sorunuz varsa, aşağıya yorum yapmaktan çekinmeyin.