frontend.lt » css

BoilerPlate HTML5 šablonas

Petras — Mon, 07 Mar 2011 10:52:11 +0000

Programuojant web HTML šablonus, prieš pradedant dažniausiai tenka atlikti nuobodų ir mechaninį darbą – pasiruošti šablonų išdėstymą, įtraukti skriptus, sudėlioti “fix’us”, bei daug kitų dalykų, kurie paprastai pasikartoja visuose projektuose. Turbūt nesuklysiu pasakydamas, jog dauguma web programuotojų turi pasiruošę vienokius ar kitokius bazinius šablonus, kuriuos naudoja.

Nesenai atradau vieną visiems prieinamą šabloną HTML5 BoilerPlate: http://html5boilerplate.com/, kurį čia norėjau pristatyti. Šio šablono esmė, priversti senesnes naršykles palaikyti HTML5 žymas. Nors kol kas tai nėra itin reikalinga funkcija, šiame šablone yra daug įvairių dalykų, dėl kurių jį verta naudoti:

Iš karto paruošta failų struktūra ir įtraukti reikalingi išoriniai skriptai, su “fallback’ais” į lokalius skriptus. (yra netgi Google Analytics :) )
Optimizavimas mobiliesiems įrenginiams
Senesnių naršyklių palaikymas ir visi reikalingi fixai (net IE6)
.htaccess direktyvos (www peradresavimas, duomenų kompresija)
Optimizuoti spausdinimo šablonai

Geriausias dalykas yra tai, jog iš šio šablono galima pasiimti tik funkcijas kurių reikia, bei papildyti savo paties naudojamą šabloną :)

Linksmai: You are the CSS to my HTML

andrius — Fri, 02 Oct 2009 06:00:28 +0000

Štai kaip jausmus išreiškia HTML ir CSS specialistai:

Et, kad visi taip sugebėtų :) Gero penktadienio, gero savaitgalio! Iliustracija rasta:

Šaltinis

Sprendimas kuris gelbsti: Firebug Lite

Petras — Tue, 04 Aug 2009 11:27:02 +0000

Turbūt nei vienas tinklapių kūrėjas neapsieitų be Galingiausio FireFox priedo – FireBug, kuris yra pripažintas pačiu naudingiausiu įskiepiu. Gaila, tačiau FireBug kol kas galima įsidiegti tik į FireFox, o kitų naršyklių Web-developer įrankiai negali jam prilygti. Tam, kad situacija būtų nors kiek geresnė FireBug Kūrėjai sukūrė pilnai JavaScript’u parašyta FireBug Lite versiją, kurią galima įsidėti į bet kokį tinklapį ir matyti visose naršyklėse (Juk JS palaiko visos naršyklės)

Paprasčiausias būdas naudotis šiuo įrankiu yra įsikelti jo kodo nuorodą į savo Bookmark’us – Tiesiog nutempkite FireBug Lite tinklapyje pateiktą nuorodą į savo BookMarko juostą ir turėsite nuorodą, kurią paspaudus FireBug Lite atsidarys bet kuriame tinklapyje.
Gaila tačiau ši FireBug’o versija dar negali redaguoti tinklapio turinio, bet manau pradžia jau padaryta :)
Taip atrodo FireBug Lite:

Svetainės centravimas su CSS

Paulius — Mon, 03 Aug 2009 08:47:15 +0000

Daugumą klasikinių interneto svetainių galima išskirti į dvi grupes pagal jų atvaizdavimo principą. Svetainė centruojama naršyklės lange arba ji yra prisiglaudusi prie kairiojo krašto. Žinoma, atsiranda ir kūrybingesnių žmonių sugalvojančių įmantrių atvaizdavimo būdų, bet dažniausiai naudojamas centruoto puslapio variantas.

Nusprendžiau trumpai ir aiškiai aprašyti kaip centruojama svetainė interneto naršyklėje. Viso labo tai kelios CSS kodo eilutės, tačiau net ir tokie dalykai kai kuriems žmonėms praverčia.

Norint svetainę centruoti, turime žinoti jos plotį. Vienintelis dalykas, kurio reikia iš HTML pusės, tai apsirašyti šakninį svetainės elementą, pavadinkime jį pvz.: site. Dabar CSS faile aprašome stilių site ir body žymoms.

Po Rimanto komentaro, išsiaiškinom, kad tai gali būti atlikta su dar mažiau kodo. O tam kad IE6 rodytų teisingai tiesiog turi būti nurodytas DOCTYPE. Nemanau, kad dabar yra svetainių, kuriose jis būtų praleistas. Liko tik dvi eilutės CSS.

body {margin: 0;}
#site {width: 998px; margin: 0 auto;}

Su paaiškinimu:

body {
margin: 0; /* Numušam automatinius marginus body elementui, kitaip bus tarpas */
}
#site {
width: 998px; /* Nurodom koks bus plotis, kitaip margin: 0 auto; bevertis */
margin: 0 auto; /* Pasakom, kad viršuje ir apačioje tarpo nepalikti, o atstumai tarp šonų būtų vienodi */
}

Kursoriai ir CSS

Paulius — Fri, 19 Jun 2009 07:26:56 +0000

Gana retai kas užsimano, kad puslapyje atvaizduojamas kursorius būtų koks nors įmantresnis, bet būna visko. Nieko tokio, kai tai tik kitokia rodyklė, kurią galima pasirinkti iš jau leistinų, tačiau kai prireikia kažko visiškai unikalaus, tenka gerokai paplušėti, kad viskas atrodytų gerai.

Pagal viską CSS parametras cursor turi nemažai numatytų reikšmių, kurios palaikomos pagrindinėse naršyklėse. Aprašomas ir parametras url(), kuriame nurodžius jūsų pasirinktą paveikslėlį, jis bus atvaizduotas vietoj kursoriaus.

Nors ir skelbiama, kad IE6+ puikiai atvaizduoja kursoriaus paveikslėlį jei jis .cur formato, man to pamatyti nepavyko. Bandant su FF, G Chrome bei Safari atvaizduojama tvarkingai. Išbandžius FF neprieštaravo net jei buvo naudojami .gif paveikslėliai. Verta paminėti, kad nenurodžius alternatyvaus kursoriaus po kablelio, nei vienoje naršyklėje nieko nepamatysite, taigi rekomenduotinas toks formatas:

cursor: url(cursor.cur), default;

Vietoj default gali būti pointer, text, help ir kiti numatyti kursoriai.

Objektiškai orentuotas CSS (OOCSS)

Paulius — Wed, 17 Jun 2009 09:14:41 +0000

Apie objektinį programavimą turbūt teko girdėti kiekvienam IT srityje besimokančiam ar dirbančiam. Sunku ir įsivaizduoti kaip seniau buvo galima dirbti be to. Tačiau objekto sąvoka HTML bei CSS srityje – naujas dalykas.

Tokios idėjos esmė CSS selektorių hierarchija. Kuriamos kuo bendresnės klasės, kurios tarsi išplečiamos pagal poreikį (sakau “tarsi”, nes css neturi tokio dalyko kaip extends). Taip susikūrę kelias pagrindines klases blokams, sritims ir kitiems dažnai pasikartojantiems ir mažai besiskiriantiems elementams, juo vėliau patiksliname pagal poreikį pridėdami konkretesnes klases. Pavyzdžiui turime bendrą klasę block, kurią prireikus dekoruojame ir pritaikome pridėję klasę side_block.

Objektinio mąstymo CSS/HTML srityje pradžia galime laikyti CSS framework’us – CSS klasių bibliotekas leidžiančias greitai ir struktūriškai kurti svetainės išdėstymą.

Kokia iš to nauda? Ogi tokia, kad prireikus kažkokį elementą panaudoti dar kartą nereikės jam rašyti naujų stilių grandinės, užteks atkartoti HTML kodą ir priskirti tą pačią klasę. Verta paminėti, kad tokiu būdu projektuojant CSS žymiai patogiau ankstesniuose projektuose sukurtas klases panaudoti naujuose, nes jos išdėstytos objektiškai ir nėra priklausomos nuo tėvinių elementų.

Susidomėjusiems įdėja siūlau pažiūrėti video prezentaciją apie OOCSS. Ji ilgoka (~45 min), bet įdomi.

Ką turi žinoti front-end architektas (Naudingos nuorodos)

andrius — Thu, 11 Jun 2009 08:19:22 +0000

Ilgą laiką įdomesnės nuorodos buvo žymimos įvairiose sistemose: uždedant žvaigždelę arba paspaudžiant mygtuką “Share” Google Reader kliente, įkeliant žymę į Deliciuos sistemą, išsaugant žymę naršyklės nuorodų saugykloje. Laikas bėga, nuorodos sensta, o jomis naudojuosi (beveik) aš vienas. Nesąžininga. Taisau klaidą ir dalinuosi geriausias (mano subjektyvia nuomone) nuorodas, kurios gali būti naudingos frontend.lt skaitytojui:

SEO

„Google“ paieškos sistemos optimizavimo pradedančiųjų vadovas – sukurtas naudoti kompanijos Google viduje, tačiau vėliau nuspręsta, jog ten surašytos mintys bus aktualios visiems. Rekomenduojame.

List of Best and Worst practices for designing a high traffic website – sąrašas svetainės savybių, įvertintų balais, pagal tai, kiek tai yra (ne)naudinga kuriant puslapio įvaizdį paieškos robotams (Google, Yahoo!, Microsoft).

Search Engine Ranking Factors – 47 geriausių Pasaulio SEO specialistų išrinkti ir balais įvertinti faktoriai, lemiantys Jūsų svetainės SEO įvertinimą. Straipsnyje pateikiama informacija gali būti kiek pasenusi, tačiau esminiai dalykai tikrai galioja ir galios dar ilgai.

HTML

10 HTML Tag Crimes You Really Shouldn’t Commit – pateikiama 10 dažniausiai pasitaikančių nusikaltimų HTML kalbai. Turėtų kas nors bausti nusikaltėlius!

10 HTML Tags that are Overlooked but Should be Used – iš div elemento, CSS pagalba sugebame padaryti bet ką, tačiau galbūt neverta išradinėti dviračio, o imti jau pagamintas žymes ir naudoti savo kode?

What Beutifull HTML Code Looks Like – pavyzdys, kaip turi atrodyti geras HTML kodas.

CSS

53 CSS-Techniques You Couldn’t Live Without – kasdien sutinkamos situacijos ir žavūs jų sprendimo būdai.

WordPress

40 Exceptional “CMS Enabling” WordPress Plugins – reikia papildyti standartinį WordPress funkcionalumą? Prieš einant “googlinti”, žvilgtelėkite čia.

10 WordPress Plugins Guaranteed to Save You Time – galbūt padės optimizuoti savo darbą su WP.

Apie viską

31 nuoroda, kuri padės sukurti bei plėtoti tobulą tinklapį – lietuviško blogo webdunulis surinktas sąrašas. Rasite tikrai gerų nuorodų!

15 Essential Checks Before Launching Your Website – esate pasiruošę “paleisti” svetainę? Minutėlę! Patikrinkit šitą sąrašą!

20 Websites That Made Me A Better Web Developer – 20 svetainių, kurių atnaujinimus verta sekti visiems tikriems, arba norintiems tokiais tapti, www programuotojams. Galbūt dar ne apie visas esate girdėję?

60 More Places to Get Design Inspiration – Online and Off – reikia įkvėpimo? Semkitės į sveikatą iš nuostabių pavyzdžių!

For Web Designers – nuorodų rinkinys visomis su svetainių kūrimu susijusiomis temomis.

Web-developer’s Handbook – dar vienas nuorodų rinkinys visomis temomis.

Ultimate Web Development Cheat Sheet Guide – dar nenaudojate paruoštukių (cheat sheet)? – Būtinai pabandykit! Jau naudojat? – gal rasit dar neturėtų!

Clearfix. Kam jis reikalingas.

Paulius — Thu, 02 Apr 2009 07:15:17 +0000

Lentelėmis formuojamo dizaino laikai pamažu praeina. Dabar struktūra dažniausiai formuojama div elementų pagalba. Juos karts nuo karto tenka pastumti ar į vieną ar į kitą pusę, o tam naudojamos css reikšmės float: left; ar float: right;. Tokiose situacijose dažniausiai ir prireikia clearfix.

Kai vaikiniams elementams yra priskirti float: left; ar float: right; atributai, o tėvinis elementas neturi fiksuoto aukščio, nutinka taip, kad tėvinis elementas vaizduojamas tarsi tuščias, arba tik teksto eilutės aukščio.

Mums norėtųsi, kad tėvinis elementas būtų bent jau tokio aukščio kaip vaikiniai elementai. Štai šią problemą ir išsprendžia clearfix metodas. Jis realizuojamas css faile aprašant klasę, kuri po to priskiriama tėviniam elementui.

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

Čia aprašyta daugiau klasių su skirtingomis pradžiomis todėl, kad skirtingos naršyklės kai kuriuos atributus supranta skirtingai.

Priskyrus šią klasę aukščio problema bus sutvarkyta ir tėvinis elementas atrodys taip kaip ir norėjome.