Otomatikccss’i inceleyin: Oksijen ve WP için Profesyonel CSS yardımcı Çerçevesi
Bu makalede, oksijen üreticisi için CSS yardımcı programı AutomaticCSS çerçevesini gözden geçireceğiz. Bunun yapımcısı için eklenti araç setinize iyi bir katkı olup olmadığını görmek için özellikleri, fiyatları, somut olmayan ve rakipleri inceleyeceğiz. İlk ve en önemli otomatik CSS özelliği olan AutomaticCCSS, CSS çerçevesidir. Oksijen üreticisinde HTML elemanları düzenlemek için CSS kullanıyoruz. Bu nedenle, bu araç oluşturucudaki başlık, metin ve div gibi bileşenlerin rengini, boyutunu, alanı ve diğer görsel öğelerini değiştirmek için kullanılır.
Diğer oksijen odaklı CSS çerçeveleri gibi, üreticisine dahil edilen olağanüstü bir sınıf sistemi kullanabilir ve bu çerçeveden sınıflar eklemek için UI ile elementleri manuel olarak düzenlemekten çok daha verimli olacak şekilde ekleyebiliriz. İşte çerçeveyi neden gerçekten sevdiğimiz iyi bir örnek.
İmleciyi yönlendirirken DIV’in arka planını web sitesi aksanımızın rengine değiştirmek istediğimizi varsayalım. Bunun gibi bir şey:
Bana gidiyorum
AutomaticCSSS ile bu tek sınıfı bunu yapmak için kullanıyoruz: .bg-aksan-hover aksan rengi Yönetici ayar panelinde ayarlanmıştır. Kullanıcı imleci bu sınıfa sahip olan öğeye yönlendirdiğinde, arka plan bir aksana dönüşür. AutomaticCCSS olmadan, bunlar aynı etkiyi elde etmek için gereken adımlardır: İlk olarak, oksijen üzerinde küresel bir renk yapacağız ve aksanı adlandıracağız. Sonra, Hover etkisini uygulamak istediğimiz div’e gideceğiz. Devam -> arka plana gidin ve varsayılan rengi ayarlayın. Şimdi devam eden -> efektine gidin ve geçişi yaklaşık 1 saniyeye ayarlayın. Ardından Sınıf Girişine gidin, “Durum” u tıklayın ve noktayı seçin. Gelişmiş -> arka plana gidin ve vurgunun rengini aksan olarak ayarlayın. Aynı etkiyi bir çerçeve olmadan elde etmeye çalışırsanız birçok tıklama ve adım olduğunu göreceksiniz. Ve kimliği düzenlerseniz ve sınıf kullanmazsanız, bu efekti oluşturmak için her gittiğinizde bunu yapmanız gerekir. Umarım bu, çerçevenin neden otomatikccss gibi olduğunu gösterir ve bir web sitesi oluştururken çok zaman kazandırır … saniye ve artan düğmeyi tıklayın! Çerçeve de işleri tutarlı tutar – aynı sınıfı, bazı unsurları renklendirmek ve renklendirmek, tüm temiz ve profesyonel görünümü vermek için kullanırsınız. Merkezi stil nedeniyle sınıf kullanırken küresel değişiklikler yapmak kolaydır.
Çerçeveyi neden kullanmanız gerektiği hakkında daha fazla bilgi için bunu okuyun:
Yayın sırasında, AutomaticCCSS, çita sayfasına bakarak keşfedebileceğiniz 903 sınıfa sahiptir. Bu sınıflar, renklendirme, alan, yazı tipi boyutu, CSS ızgarası, esnek düzen, vb. Özel özellikleri yönetecek ve sitenizde tekrar kullanacaksınız.
Bunun iyi bir örneği renktir. CSS’de bir on oluşturarak bir tema oluşturabilirsiniz: root {-main-bg-color: gri;}. Daha sonra bunu belirli bir öğeye koyabilirsiniz: arka plan-color: var (-ain-bg-color);
İmleciyi yönlendirirken DIV’in arka planını web sitesi aksanımızın rengine değiştirmek istediğimizi varsayalım. Bunun gibi bir şey:
Bana gidiyorum
AutomaticCSSS ile bu tek sınıfı bunu yapmak için kullanıyoruz: .bg-aksan-hover aksan rengi Yönetici ayar panelinde ayarlanmıştır. Kullanıcı imleci bu sınıfa sahip olan öğeye yönlendirdiğinde, arka plan bir aksana dönüşür. AutomaticCCSS olmadan, bunlar aynı etkiyi elde etmek için gereken adımlardır: İlk olarak, oksijen üzerinde küresel bir renk yapacağız ve aksanı adlandıracağız. Sonra, Hover etkisini uygulamak istediğimiz div’e gideceğiz. Devam -> arka plana gidin ve varsayılan rengi ayarlayın. Şimdi devam eden -> efektine gidin ve geçişi yaklaşık 1 saniyeye ayarlayın. Ardından Sınıf Girişine gidin, “Durum” u tıklayın ve noktayı seçin. Gelişmiş -> arka plana gidin ve vurgunun rengini aksan olarak ayarlayın. Aynı etkiyi bir çerçeve olmadan elde etmeye çalışırsanız birçok tıklama ve adım olduğunu göreceksiniz. Ve kimliği düzenlerseniz ve sınıf kullanmazsanız, bu efekti oluşturmak için her gittiğinizde bunu yapmanız gerekir. Umarım bu, çerçevenin neden otomatikccss gibi olduğunu gösterir ve bir web sitesi oluştururken çok zaman kazandırır … saniye ve artan düğmeyi tıklayın! Çerçeve de işleri tutarlı tutar – aynı sınıfı, bazı unsurları renklendirmek ve renklendirmek, tüm temiz ve profesyonel görünümü vermek için kullanırsınız. Merkezi stil nedeniyle sınıf kullanırken küresel değişiklikler yapmak kolaydır.
Çerçeveyi neden kullanmanız gerektiği hakkında daha fazla bilgi için bunu okuyun:
Yayın sırasında, AutomaticCCSS, çita sayfasına bakarak keşfedebileceğiniz 903 sınıfa sahiptir. Bu sınıflar, renklendirme, alan, yazı tipi boyutu, CSS ızgarası, esnek düzen, vb. Özel özellikleri yönetecek ve sitenizde tekrar kullanacaksınız.
Bunun iyi bir örneği renktir. CSS’de bir on oluşturarak bir tema oluşturabilirsiniz: root {-main-bg-color: gri;}. Daha sonra bunu belirli bir öğeye koyabilirsiniz: arka plan-color: var (-ain-bg-color);
Küresel değişiklikler yapmak istiyorsanız, değişkenler olağanüstü. AutomaticCSSS’de, renginizi yönetici panelinde (aşağıda belirtilen) ayarlayacaksınız ve yardımcı sınıfla, aynı zamanda değişkenle de ekleyebilirsiniz. Oksijen ayarları doğrudan CSS’ye çevrildiğinden, giriş alanına birçok değişken ekleyebilirsiniz:
Yönetici Paneli Temel boyutlar, geri dönüş ve arka uçtaki WordPress’teki yönetici panelinde düzenlenen renkler gibi küresel ayarları değiştirmek için.
Web sitenizdeki tüm renkleri saniyeler içinde değiştirebilirsiniz. “Renk temasını” istediğiniz kadar deneyin! Bu ayarın küresel doğası çok havalı, özellikle boyut seçeneği.
Yönetici Paneli Temel boyutlar, geri dönüş ve arka uçtaki WordPress’teki yönetici panelinde düzenlenen renkler gibi küresel ayarları değiştirmek için.
Web sitenizdeki tüm renkleri saniyeler içinde değiştirebilirsiniz. “Renk temasını” istediğiniz kadar deneyin! Bu ayarın küresel doğası çok havalı, özellikle boyut seçeneği.
Düğmenin çok büyük olduğunu düşünüyorsanız, burada ayarları değiştirin ve sitedeki tüm düğmeler düzenlenecektir. Sitedeki her şeyin birbirine yakın olması gerektiğini düşünüyorsanız, taban mesafesini 30 pikselden 40 piksele değiştirmek aynı anda biraz daha fazla alan ekleyecektir. Adından da anlaşılacağı gibi her şey otomatiktir, boyut ve mesafe otomatiktir. Renk tonları temel renginizden otomatik olarak üretilir ve yazı tipinin boyutu/boyutu/boyutu, görüntüleme alanının genişliğine bağlı olarak değişir. Bu, CLAMP () ‘den karmaşık bir kombinasyon kullanılarak, geri dönüş – calc () ve frenler kullanılarak yapılır. Aşağıda bir alt küçük marj sınıfına bir örnektir. Marj-Bawah: Calc (2,2492970947rem + (-0.2492970947 * ((100VW-32REM) / 96))); Marj-Bawah: Kelepçe (2,2492970947rem, Kalk (-0.2596844736vw + 2,3323961262rem), 2Rem); } Bu, görünüm alanına göre bu ölçeği otomatik olarak yapmak için hesaplamanın yanındaki geri dönüşün karmaşıklığını gösterir. Ayrıca şaşırtıcı olan, bu değerlerin yönetici panelindeki temel ayarlardan hesaplanmasıdır. Değiştirirseniz, site boyunca bunun gibi tüm değerler de değişecektir. Flex ve CSS ızgarası da ekran boyutuna otomatik olarak yanıt verir.
Bu çok zamandan tasarruf edecektir, çünkü oksijen üreticisindeki her kesme noktası için boyut ve mesafeyi manuel olarak düzenlemenize gerek yoktur.
Bununla birlikte, bu kitin çok hafif bir parçasıdır, sizi kimlik yoluyla stil ihtiyacından kurtaracağı veya birçok özel sınıf yapacağı düşünülür. Bu aynı zamanda izotropik gövdedeki geliştiriciler tarafından çok keyif alan bir şeydir, çünkü fayda çerçevesinden yararlanırsınız, ancak birçok yön otomatik olarak yapılır. Bu da oksijen için mükemmeldir. (Not şu ki, bir sonraki ile yapılan özel projelerde kuyruk rüzgarı kullanmaktan gerçekten keyif alıyoruz, ancak çerçeveyi oksijende kullanamıyoruz, çünkü “veya”/”(diğer problemlerle) karakterini desteklemiyor. Bu nedenle ” yapabiliriz. Belirli bir kesme noktası stilini belirlemez, bu yüzden kuyruk rüzgarı kullanamayız. Oxymade (diğer çerçeve) kuyruk rüzgarından esinlenir, ancak duyarlı sınıf açısından başarısız olur.
AutomaticCCSS, tanımlayıcı -l -m -sm ile böyle bir şeyi destekler. Sayfa Yapımcıları / Diğer Eklenti Desteği Bu çerçeve, sistem inşaatçıları ve destek oluşturma için gelecek planlarını gösteren bir kamu yol haritasına sahiptir. Tuğlaları (incelemeler), Zion (incelemeler), Gutenberg, WooCommerce, North Commerce ve hatta gelecekte WordPress olmayan platformları destekleyecekler (Tailwind gibi NPM paketleri olağanüstü olacak!).
AutomaticCCSS, tanımlayıcı -l -m -sm ile böyle bir şeyi destekler. Sayfa Yapımcıları / Diğer Eklenti Desteği Bu çerçeve, sistem inşaatçıları ve destek oluşturma için gelecek planlarını gösteren bir kamu yol haritasına sahiptir. Tuğlaları (incelemeler), Zion (incelemeler), Gutenberg, WooCommerce, North Commerce ve hatta gelecekte WordPress olmayan platformları destekleyecekler (Tailwind gibi NPM paketleri olağanüstü olacak!).
Ayrıca, pürüzsüz form ve yerçekimi formuna ek olarak en sevdiğimiz form üreticimiz WSForm’u (burada ayrıntılı inceleme) destekleyecekler. Bu genel yol haritası nispeten yeni bir üründür ve yol haritası çok umut verici görünüyor. Oksijen üreticisi ve diğer yardımcı programlar için inşaatçılarda pano gibi özellikler çok ilginç.
Araç uçları, gradyan arka planı, Ikon sınıfı ve diğer benzersiz yönler de yakında mevcut olacak ve özel kodlar veya ek eklentiler ihtiyacını ortadan kaldıracaktır. Kullanım kolaylığı (yeni başlayanlar kullanabilir mi?) Sınıf yönetimi olan inşaatçıları kullanan herkesin bir çerçeve kullanmasını öneririz. Bu, GUI kullanmaktan çok daha hızlı ve daha verimlidir. Yeni başlayanlar çerçeveyi hızlı bir şekilde inceleyecek ve otomatikccss çılgın bir şey değil. Otomatikccsss’in söylediği şey bu … ve yanlış değiller. Tek yapmanız gereken genel kavramları anlamak için yeterli çerçeve kullanmaktır. Tüm sınıfları listeleyen hızlandırmak için bir hile sayfası kullanabilirsiniz. Ayaklarınız ıslak olduktan sonra inanılmaz sezgisel.
Otomatik CSS AutomaticCSS Fiyat, kişisel lisanslar için 69 $ ve ajans lisansları için 99 $/yıl girer. Bir site için kişisel ve sınırsız siteler için ajans.
30 günlük para garantisi var. Ödemeyi bırakırsanız, hala çerçeveye erişiminiz vardır (hiçbir şey hasar görmez), yalnızca gelecekte güncellemeler almayı bırakacaksınız. Bu fiyat ayar modeli, bu ürünle alacağınız özelliklere, değerlere ve zaman tasarruflarına ek olarak, geliştiricinin aktif olduğu ve serbest bırakma programı olduğu göz önüne alındığında çok adildir. Otomatik CSS Circle Community Automiccss satın aldığınızda, soru sorabileceğiniz ve soruları cevaplayabileceğiniz, destek alabileceğiniz ve özellik isteyebileceğiniz dinamik bir topluluğa erişirsiniz. Bu çok aktif ve gördüğüm her soru hızlı bir şekilde cevaplandı.
Bu çok reklamı yapılmayan bir şey, ancak çok büyük bir katma değer. İnsanlar ürünler hakkında konuşuyor, aynı zamanda diğer harika kavramlar (ekran görüntüsünün altındaki yayınlara bakın). Olağanüstü bir platform olarak çevreler (topluluğun inşa edildiği yer). Kullanıcı arayüzü kolaydır, tasarım basittir ve belirli içerik arayışı çok kolaydır. OtomatikCCSS yarışmasını görmek, oksijen üreticisi için sağlam bir CSS çerçevesi açısından tek seçenek değildir. Görmeye değer iki yarışmacı var; Oxyninja ve Oxymade. Üçü de “çerçeveler” olsa da, AutomaticCCSS kendini biraz farklı konumlandırıyor (farkla ilgili bu resmi yazıyı okuyun).
Bu, başlığı, bölümü ve diğerlerini varsayılan olarak düzenler ve her şeyi daha hızlı hale getirir.
Daha otomatik olmaya odaklanarak, Tailwind ve Tailwind’den esinlenen Oxymade’de gördüğümüz MT-10 gibi granüler yardımcı sınıflara olan ihtiyacı ortadan kaldırıyor. Bu nedenle ezberlenmesi daha basit ve daha kolaydır.
Yönetici paneli üzerinden küresel olarak çeşitli şeyler düzenleyeceksiniz ve ayarlar (boyut ve alan gibi) onu ayarlayacaktır. Bu nedenle aynı sınıfı farklı sitelerde kullanabilir ve farklı sonuçlar elde edebilirsiniz.
Yönetici paneli üzerinden küresel olarak çeşitli şeyler düzenleyeceksiniz ve ayarlar (boyut ve alan gibi) onu ayarlayacaktır. Bu nedenle aynı sınıfı farklı sitelerde kullanabilir ve farklı sonuçlar elde edebilirsiniz.
Yukarıda belirtilen güçlü bir tip ve sistem türü vardır. Oxymade iyi bir renk sistemi vardır, ancak ACSS daha ayrıntılıdır.
Clamp () desteklenmezse kullanılır bir geri dönüş – calc () vardır. Calc () desteklenmezse, frenler kullanılır.
