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_01.jpg

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

FEM CSS Framework

css_framework_02.jpg

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-technique-382.jpg

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-technique-426.jpg

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-technique-309.jpg

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:

accessibility2560x1600.jpg

Hasznos eszközök webes fejlesztésekhez

frame box

Frame box - egyszerű mockup cucc tervezéshez

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

Jo – HTML5 Mobile App Framework

HTML5 framework mobilhoz

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-technique-418.jpg

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-technique-421.jpg

HTML5 Starter Pack

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

css-technique-419.jpg

Modernizr

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

css-149.jpg

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-technique-338.jpg

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:
  • 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 …

  • 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ó. …

  • 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 …

  • 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. …

  • 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>