Jak wiecie, to nie jest czas narodzin internetu, a ludzie prawie zapomnieli o stronach internetowych z tekstem pojedynczego akapitu i hiperłączami. Jeśli chcesz przejść dalej z obecnymi standardami sieciowymi, musisz sprawić, by Twoja witryna była przyjemna, a nie szczerze widoczna. Niezależnie od języka kodowania, takiego jak HTML or PHP używany do budowania interfejsu użytkownika, CSS będzie Twoim narzędziem, dzięki któremu strona internetowa będzie wyglądać stylowo. Kiedy porównujemy stronę internetową do ludzkiego ciała, HTML działa jak kości, podczas gdy CSS jest czymś zbliżonym do skóry i mięśni, stworzonym w celu nadawania kształtu i struktury.
Podobnie jak wszystkie inne rzeczy w świecie projektowania i rozwoju, CSS również otrzymał drobne i większe aktualizacje, dzięki czemu jest w stanie osiągnąć CSS3, który jest najlepszą parą, gdy HTML5 towarzyszy podróży. Jednak gwiazdą gry jest trend lub wzorzec CSS, którego zdecydujesz się użyć! Jak wiesz, dostępne są różne frameworki CSS o różnym wyglądzie i funkcjach, takich jak Bootstrap, Zurb itp. To, co dzisiaj przedstawiamy, to Czysty CSS, po prostu oparty na coolgrid framework CSS firmy Yahoo!, wiodącego giganta internetowego. Na szczęście możesz korzystać z tego frameworka bez płacenia ani grosza.
Czysty CSS
Być może używałeś innych frameworków, takich jak Zurb Foundation, do tworzenia atrakcyjnych stron i witryn internetowych. Używanie frameworka CSS jest bardzo przydatne, ponieważ możesz uzyskać szablony dla różnych elementów na stronie, takich jak podziały, formularze, menu itp. Jest to ta sama funkcja co Czysty CSS od Yahoo! Zamiast pobierać i dodawać pliki do folderu „CSS”, Pure CSS może działać jak Google Fonts, gdzie musisz dodać jedną linię kodu, aby zintegrować framework z HTML. Ponieważ framework jest najnowszy, jest całkowicie responsywny. Co więcej, Pure CSS jest jednym z najprostszych frameworków, jakie można znaleźć w sieci. Możesz użyć frameworka do zasilania swojej witryny lub pobrać określone moduły do stylizacji sekcji, takich jak formularze, menu itp. Dostępnych jest sześć pojedynczych modułów za darmo. Moduły Pure CSS są następujące, które po wyodrębnieniu wydają się być niewielkie (mniej niż 2 KB).
- Base: Podstawowe elementy strony internetowej, takie jak nagłówki, akapity, typografia
- Przyciski: Różne przyciski z efektami, takimi jak aktywne, po najechaniu itp.
- Tabele: Dostępne stoły podstawowe z obramowaniem itp.
- Menu: Poziomy, pionowy, rozwijany.
- Siatki: Responsywne siatki.
- Formularze: Zgrupowane dane wejściowe, wielokolumnowe itp.
ZOBACZ TEŻ: Subtelne wzory Bookmarklet: Podgląd wzorów tła na swojej stronie.
Dlaczego warto korzystać z czystego CSS
- Mniej niewykorzystany kod: Bardzo często można zobaczyć dużą liczbę nieużywanego kodu podczas korzystania z innych frameworków css. Z drugiej strony w przypadku Pure CSS nigdy nie spotkasz się z tym problemem, ponieważ możesz użyć konkretnej wersji frameworka i użyć go do stylizacji określonych sekcji strony. Oczywiście mniej kodu wydaje się nawet świetne!
- Wszystko w środku: Przynajmniej w niektórych innych frameworkach używają wtyczek i kodów JavaScript innych firm, aby poprawić efekt wizualny. Jednak Pure CSS nie używa żadnych wtyczek JS, z wyjątkiem tego, który został użyty w efekcie rozwijania. Mniej kodu stron trzecich może zapewnić szybsze ładowanie strony i schludność kodu.
- Szablony: Jeśli nie jesteś ekspertem w projektowaniu własnego układu witryny, Pure CSS może pomóc w tej sekcji. Witryna zawiera szereg przykładowych układów, pasujących do witryn o różnych intencjach, takich jak marketing, landing page itp.
- Kreator skóry: Jeśli szablony i style mogą zadowolić kreatywnego projektanta, możesz skorzystać z konstruktora skórek Pure CSS do zbudowania własnej skórki. Jak można się domyślić, twórca skórek nie bierze pod uwagę twojego doświadczenia na poziomie kodowania.
ZOBACZ TEŻ: Czcionki ikon: zalety i wady generatora czcionek.
Korzystanie z czystego CSS
Jak wspomniano wcześniej, Pure CSS ma wiele korzystnych funkcji w porównaniu z innymi frameworkami. Przypominając to, co powiedzieliśmy wcześniej, możesz użyć Pure CSS za pomocą tej samej metody, co Google Fonts. Musisz dodać pojedynczy wiersz linku do pliku zewnętrznego, aby nadać styl swojej stronie internetowej. Ta funkcja jest bardzo przydatna, gdy musisz budować strony internetowe z jednym plikiem i gdy nie masz wystarczająco dużo miejsca na umieszczenie wszystkich plików css (przypuszczam, że nigdy się to nie zdarzy). Jako Yahoo! kręci kołem projektu projektu, nie chcesz się stresować błędami wczytywania lub awariami technicznymi.
Jeśli chcesz korzystać z pełnych szablonów CSS Pure CSS, możesz dodać następujący kod do głównej strony internetowej. Możesz także kliknąć link do pliku CSS i pobrać plik CSS, aby z niego skorzystać.
[html]
[/ html]
W przypadku, gdy chcesz po prostu skorzystać z określonych wersji CSS, takich jak menu, formularze itp., dostępne są specjalne kody wraz z dedykowanymi plikami CSS. Lista adresów URL jest następująca:
Korzystanie z kreatora skórek Pure CSS jest również łatwiejszym zadaniem, ponieważ możesz kontrolować właściwości elementów za pomocą intuicyjnych przycisków sterujących strony kreatora skórek. Radzimy jednak pobrać pliki CSS, aby zrozumieć nazwy elementów. Jak powiedzieliśmy, umieszczenie tych mniej niż 2 KB plików nie zajmie miejsca na dysku.
Strona internetowa Pure CSS jest skonfigurowana w taki sposób, że nawet nowicjusz może wstawiać elementy oparte na Pure CSS na swoich stronach internetowych. Możesz zobaczyć prosty pasek boczny po lewej stronie, wyszczególniający sekcje, takie jak formularze, przyciski itp. Na każdej stronie dostępne są podglądy wraz z kodem HTML, aby wprowadzić ten efekt do Twojej witryny. Dlatego bardzo łatwo jest wstawić takie elementy na swoją stronę internetową. Poniżej przedstawiono podgląd i kod formularza pojedynczego typu logowania.
Wnioski
Analizując wszystkie funkcje Pure CSS, jest to jeden z optymalnych wkładów Yahoo! do świata designu. Wieśniak! Interfejs użytkownika, powszechnie znany jako YUI, obsługuje wszystkie łańcuchy dołączone do Pure CSS, dzięki czemu framework jest najlepszy, gdy istnieje porównanie. Oprócz korzystania z gotowych elementów, możesz także dostosować Pure CSS. Musisz wejść na stronę Pure CSS, aby używać i dowiedzieć się więcej o prostym, kompaktowym frameworku. Przekaż nam swoją opinię na temat tego frameworka po zapoznaniu się z przykładami i użyciu go w swoim projekcie.
rakesz kumar
Dziękujemy za opublikowanie tej wspaniałej recenzji czystego CSS. Ponieważ próbuję tworzyć własne motywy wordpress dla społeczności, myślę, że ten nowy css z yahoo.com może mi bardzo pomóc.
Hari
Uważam to za bardzo przydatne. Zbadam każdy z nich później.
Cassie
Łał. To naprawdę interesujące. Dziękujemy za udostępnienie tych informacji.
Rajmund Sam
Czy poleciłbyś w tym momencie Pure zamiast Bootstrap lub Foundation? Jako pierwszy raz zauważyłem, że Bootstrap jest nieco mniej niż optymalnie udokumentowany.
Sajesz
Witaj Abhijith N Arjunan, muszę ci powiedzieć, że wykonałeś świetną robotę i dziękuję za oświecenie mojej wiedzy i umiejętności.
Santosh
Świetny artykuł Abhijit. Użyłem PureCSS do stworzenia motywu dla nowego systemu zarządzania treścią o nazwie PyroCMS. Spójrz na [PyroPure]).
Rozwijanie tematu było świetną zabawą. Myślę, że był znacznie lżejszy niż inne frameworki. Stylizacja jest również bardzo konfigurowalna.
Erwin
Wow .. Jest to coś, czego można się nauczyć, wiem, że nie mam talentu do programowania i projektowania, ale było to interesujące do zrobienia. PureCSS to chyba coś, czego bardzo potrzebuję.
Adam
Witam, używam czystości (PureCss) z Yahoo w projektach 3 i jest to naprawdę niesamowity lekki framework, że tak powiem, w porównaniu do Bootstrap lub fundacji, skupia się na tym, aby był lekki i przywracał projekt programiście i polegał na zestawie UI 300kb że i tak nie używasz 70% elementów, a jeśli wyjmiesz części z Bootstrapa, to nadal potrzebuje Javy, to nadal jest w sekcji 200kb. Nie wspominając już o tym, że każda strona internetowa wygląda na Bootstrappy, dlatego nigdy nie użyję Bootstrap do zbudowania strony internetowej lub fundamentu Zurb, wszystkie są ciężkie i musisz użyć ich 12-kolumnowej siatki, która stała się naprawdę nudna. Widzę strony internetowe, wszystkie wyglądają ładnie i fajnie, ale po prostu wyglądają tak pudełkowo i dobrze Podstawa Bootstrap, Yahoo PureCss to niesamowity zestaw interfejsu użytkownika, szybki, łatwy w użyciu, modyfikować, a co najważniejsze, działa bardzo szybko z WordPress jako motywem! Użyłem go do 4 projektów WordPress z YUI PureCss i klient był zdumiony po przejściu z Bootstrap, pierwsze zauważenie to szybkość strony, drugie piękny projekt FLAT domyślnie.