CSS Framework, WordPress theme gyűjtemény és CSS okosságok


Jöjjön pár gyorshír az elmúlt hétről, amikről legalább említés szintjén szeretnék szót/linket ejteni:

css Framework és grid

A CSS framework-ökről már volt szó korábban is, alapvetően jó dolognak tartom őket egyes feladatoknál, mert gyorsítanak a sitebuild folyamatán (cross-browser kód, egységes kódolási stílus, ismétlődő feladatok csökkentése stb.)

Bár nálam a 2 favorit a 960 és a Blueprint (és inkább utóbbi), van pár új(abb) játékos akikre most felhívnám a figyelmedet:

The Square Grid

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css framework 01

Egyszerűen kezelhető CSS Framework, mely 35 egyenlő oszlopra bontja fel a területet, 28px-es távokkal.

FEM CSS Framework

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css framework 02

A FEM CSS Framork kicsit hasonlít a 960-as rendszerhez, ami nem csoda, mert arra épül. 12 oszlopos elrendezést biztosít, ígérete szerint kicsit könnyebb kezelni és rugalmasabb, mint az eredeti 960-as.

Forrás:  http://designreviver.com/inspiration/three-fresh-css-frameworks/

Grid Generator

Testreszabott CSS grid generálás online. Kiválaszthatod az oszlopok számától kezdve a margók távolságáig, az oszlopok szélességéig mindazt, ami alapján generálni fogja a kívánt gridrendszert.

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 382

Baseline framework

Ezt a framework-t nem ismerem, de alapvetően nem vagyok ellenére az egyszerűbb dolgoknak. :) Nem kínál sokkal másabbat mint amit a többi is (egyszerű, kicsi, jó typo, a html5 újdonság stb…), egy próbát mindenképp megér, ha valaki ilyen jellegű framework-t keres.

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 426

Gridulator

Grid calculator, ehhez túl sokat nem lehet hozzáfűzni … beállítod mit szeretnél, aztán generál egy PNG-t amit használhatsz pl. a photoshop-ban a honlap tervezése közben.

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 309

wordpress theme ajánló

Már egy ideje nem volt WP theme ajánló, most megtetszett ez a gyűjtemény: 15 Fresh, Unique and Free WordPress Themes

Ennek oka, hogy mostanában kevesebb olyan gyűjtést láttam, ahol portfolio theme-ket szedtek volna össze, ebben pedig volt pár.

Háttérkép

Egy jópofa háttér webfejlesztőknek:

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok accessibility2560x1600

Hasznos eszközök webes fejlesztésekhez

frame box

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok frame box

Egyszerű és ingyenes online mockup cucc, amit itt érsz el: http://framebox.org/

Jo – HTML5 Mobile App Framework

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok jo html5 mobile app framework

Forrás: http://designreviver.com/freebies/4-more-free-web-design-tools-and-resources/

Instant Blueprint

Komplett csomag a gyors kezdéshez. Ha ez tetszik, nézd meg ezt is, hasonló:  http://projectdeploy.org/

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 418

HTML5 Boilerplate

HTML5 + CSS + JS template csomag, ami egyben cross-browser, sebesség optimalizált (nincs teleszórva minden szar kóddal), @font-face, .htaccess konfig fájl, HTML5 reset stb….

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 421

HTML5 Starter Pack

Egyszerű HTML5 kezdőcsomag, általános könyvtárstruktúrával, HTML/CSS/JS fájlokkal + Photoshop template-ekkel.

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 419

Modernizr

A régi gyengusz böngészőket turbósítja, JS.

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css 149

Turbine

A Sass-hoz és a Scaffold-hoz tudnám hasonlítani én is (a lapon a fejlesztők is nyilván ezt hozzák fel mintának), mindenképp ki fogom próbálni, mert nagyon szeretném a CSS-t így írni:

	#foo
	    color:red
	    div.foo, div.bar
	        margin, padding:4px
	        border-radius:4px

Hogy aztán a Turbine ebből ezt generálja:

	#foo {
	    color: red;
	}
	#foo div.foo, #foo div.bar {
	    margin: 4px;
	    padding: 4px;
	    -moz-border-radius: 4px;
	    -khtml-border-radius: 4px;
	    -webkit-border-radius: 4px;
	    border-radius: 4px;
	}

CSS Framework, Wordpress theme gyűjtemény és CSS okosságok css technique 338

További hasznos, a CSS-hez kapcsoldó ajánlókat még itt találsz: http://www.smashingmagazine.com/2010/10/12/50-new-useful-css-techniques-tutorials-and-tools/

Kapcsolódó bejegyzések:
  • CSS Framework, Wordpress theme gyűjtemény és CSS okosságok

    A sztárok sem olyan szépek és tökéletesek, mint azt a média állítja. Jöjjön pár kép “előtte és utána”, ahol bal oldalon a Photoshop előtti állapotot, az eredeti …

  • CSS Framework, Wordpress theme gyűjtemény és CSS okosságok

    Jöjjön most a 2. kör, ahol szintén Photoshop retusálásaként feljavított jobb oldali képek vannak, balra meg természetesen a manipulálás előtti állapot látható. …

  • CSS Framework, Wordpress theme gyűjtemény és CSS okosságok

    Pár napja jött ki a népszerű szinkronizáló szoftver legújabb, 1.0-ás változata, szerintem érdemes frissíteni a klienseket akár Windows, akár Mac alatt. Aki esetl …

  • CSS Framework, Wordpress theme gyűjtemény és CSS okosságok

    Megjelent a népszerű front-end template rendszerének legújabb verziója, érdemes szedni és frissíteni aki használja.letöltés: http://html5boilerplate. …

  • CSS Framework, Wordpress theme gyűjtemény és CSS okosságok

    Tervezéskor “kicsit” meg lehet gyorsítani a folyamatokat akkor, ha a munkához rendelkezésedre áll 1-1 sabloncsomag, melyekben már mások megrajzolták a (leg)fonto …

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a CSS Framework, WordPress theme gyűjtemény és CSS okosságok c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>