Arhiva pentru tagul “CSS”

Maxmertkit: alt framework ca să începi rapid un sit

Am scris în ultimele săptămâni despre Twitter Bootstrap şi o voi mai face, pentru că e un “produs” excepţional. Şi când iei un sit de la zero… dar chiar şi când ai deja un sit şi doreşti să îl îmbunătăţeşti (desigur, există pericole de coliziune – CSS şi JavaScript – dar toate se pot rezolva… în cele din urmă). Am dat recent de Maxmertkit, care îmi pare similar cu Twitter Bootstrap… dar mamă ce diferit e totuşi. În bine sau în rău? Aici depinde mult de gusturi. Efectele sunt mai “artistice”, mai cu rotiri, animaţii şi altele asemenea.

imagine

Un lucru foarte atractiv este că de pe prima pagină poţi testa componentele bibliotecii, chiar şi configura, de la culoare la …


Responsive Boilerplate

Dacă vreţi să scrieţi o webaplicaţie care să fie cu design fluid (responsive) sunt tot felul de soluţii: de la a scrie manual codul, cu maaare atenţie, la a folosi biblioteci precum jQuery Mobile (şi altele similare) sau soluţii gen Twitter Bootstrap (şi aici lista e lungă). Dar dacă doriţi ceva minimalist puteţi încerca Responsive Boilerplate, care “cântăreşte” doar 2kb, deci foarte-foarte puţin. Ce câştigăm? Un fişier CSS care permite un container şi o arhitectură pe 12 coloane, gata imediat de folosit.

imagine

Cel mai bine este să mergeţi aici, unde veţi vedea o pagină foarte simpluţă – redimensionaţi navigatorul şi veţi observa minunile. Dacă faceţi lăţimea foarte mică veţi vedea ce se întâmplă cu meniul rudimentar din …


Twitter Bootstrap: tabele, formulare, imagini

Continuăm incursiunea-reclamă pentru Twitter Bootstrap cu alte câteva elemente foarte-foarte comune în mai orice pagină web: tabele, formulare şi imagini. Şi ca să începem cu sfârşitul, vă invit să vedeţi ceea ce mai jos este doar captură dând click aici. Vreţi şi un bonus? Redimensionaţi fereastra cu acea pagină şi observaţi cum elementele se adaptează lăţimii disponibile. Da, fără nici o bătaie de cap toate aceste structuri incluse se vor redimensiona corespunzător, sau vor trece una sub alta când nu mai există lăţimea necesară. Cool!

imagine

Să o luăm rapid la rând câte un element. Desigur, pe scurt. Despre tabele mai întâi (documentaţia oficială): totul porneşte de la a pune clasa table la un tabel şi …


Twitter Bootstrap: butoane, butoane, butoane

O să îmi permit să mai scriu despre Twitter Bootstrap dintr-un considerent cumva egoist: aşa îl descopăr şi eu mai bine :). Sper însă să fie o reclamă bună, care să prindă la webmasterii ce ar putea fi interesaţi de acest minunat proiect. Iar acum vă propun să vedem ce varietate de butoane arătoase, dar atât de simplu de implementat, ne oferă Bootstrap. Dacă vreţi să vedeţi exemplul live, deschideţi această pagină. Noi în cele ce urmează vom lua pe rând cele ilustrate în captură.

imagine

Şi pentru început să spunem că un buton poate fi implementat atât cu tagul button, cât şi cu tagul a folosit pentru linkuri. Totul e să punem class="btn" şi atunci vom avea …


Twitter Bootstrap: un dar pentru webmasteri

Despre Twitter sigur aţi auzit. Dar despre Twitter Bootstrap? Probabil mulţi – webmasterii în special – au auzit, dar poate nu toţi, aşa că haideţi să vedem despre ce este vorba. Cândva prin august 2011 doi angajaţi de la Twitter lansau prima versiune a acestei colecţii de instrumente pentru webmasteri, colecţie dezvoltată desigur mult înainte, ca instrument intern, căutându-se o uniformizare a elementelor de interfaţă. Cu alte cuvinte au luat ceva de la ei şi au dăruit lumii webmasterilor. Şi ce cadou minunat!

imagine

Ce permite pe scurt această colecţie de instrumente? Să porneşti mult mai rapid o webaplicaţie. Dacă veţi studia meniul din pagina proiectului veţi vedea tot felul de ingrediente pentru paginile web care sunt oferite de-a gata, …


Meniuri CSS simple, frumoase, uşor de folosit

Zilele acestea am avut nevoie de un meniu uşor de folosit. Am apelat la CSSMenuMaker.com, unde găsim câteva zeci de meniuri grupate pe câteva tipuri. Partea frumoasă este că vom găsi un buton Customize, dacă nu la toate atunci la cele mai multe, de unde putem cu uşurinţă să configurăm meniul, adăugând ce opţiuni dorim, ştergând ce nu vrem… ce mai: să arate aşa cum dorim noi (inclusiv linkurile spre care să conducă opţiunile din meniu). La final putem lua separat partea HTML şi CSS, sau mai bine descărcăm totul ca arhivă pentru cazurile unde se folosesc şi imagini.

imagine

Desigur, unele meniuri sunt pur şi simplu variaţie de culoare la altele, dar pe de altă parte, dacă …


TheCodePlayer.com şi minunăţiile CSS3

Pentru început voi semnala un sit: TheCodePlayer.com. Acum în colţ scrie mic de tot alpha, ceea ce dă de înţeles că proiectul e proaspăt şi s-ar mai putea schimba/îmbunătăţi. Dar aşa cum este acum pe mine mă uimeşte deja şi zic: jos pălăria! Nu mă aştept din captura de mai jos să înţelegeţi prea multe… şi nici din explicaţiile mele. Dar înainte să plecaţi pe respectivul sit iată cam despre ce este vorba. În principiu am putea să îl descriem ca un showcase de ce poţi face cu HTML5, CSS, JavaScript… Dar e mai mult decât atât.

imagine

În ce sens? De exemplu mai sus e vorba de un script tare, tare de tot, ce simulează o lupă peste o …


S/2: Pentru webmasteri

Sunt câteva articole pe care aş dori să le semnalez, e drept că în grabă, aşa că intră la S/2 (scurt pe doi). Şi am să încep cu cel care m-a interesat mai mult: Powerful New CSS- and JavaScript Techniques. Puteţi parcurge articolul ca spectator, admirând la ce culmi noi se poate ajunge cu CSS şi Javascrips, sau ca “actor” implicat, inspirându-vă pentru propriile proiecte. Veţi găsi în total cinci secţiuni: CSS Transitions and Animations Useful and Practical CSS Techniques; CSS Typography and Text Techniques; CSS Navigation Menus and Hover Effects; Visual Techniques With CSS.

imagine

Am spus “pe scurt”? Am spus. Aşa că trec mai departe. Chiar azi a apărut un alt articol interesant: …


JSDo.it: comunitate cu coduri

Vă amintiţi de JSFiddle? Rămâne un serviciu extraordinar şi poate tocmai de aceea nu lipsesc clonele. Dar aş fi răutăcios să numesc JSDo.it o simplă clonă. Este o comunitate care foarte probabil e predominant asiatică, precum autorii sitului. Membrii pot să scrie cod (HTML, JavaScript, CSS…) şi să îl ruleze spre verificare, iar apoi pot să îl facă public, comunităţii dar şi în afara ei. După cum vedeţi mai jos, interfaţa e aerisită. Scrii cod şi când apeşi Ctrl+S pentru salvare ţi se actualizează previzualizarea din dreapta. Se pot integra şi biblioteci JavaScript.

imagine

Puteţi răsfoi coduri ale altor membri ai comunităţii şi studia cum au realizat anumite lucruri (ex: simple jocuri JavaScript). Există şi o …


Layout-uri şi meniuri CSS

Pe TripwireMagazine au apărut recent (ieri şi azi) două articole legate de CSS şi care le vor fi utile webmasterilor. Am să încep cu 465+ Useful CSS Layouts for Download, care nu reuneşte în sine acest total impresionant ci prin sursele recomandate, fiecare cu câteva zeci de layout-uri. Mare, mare atenţie la data realizării lor. Unele se declară a fi testate sub IE 7 Preview, ceea ce spune ceva despre cât de vechi sunt (şi deci cât de riscante… în principiu… pentru versiunile mai noi de navigatoare).

imagine

Al doilea articol din aceeaşi sursă este 35 Impressive CSS Menu and Navigation Collection. Unele sunt CSS3, cu soluţii pentru versiuni mai mici. Important: majoritatea îmi par soluţii comerciale, deci …