search

okffi / labra

Paikka pienille avoimeen tietoon liittyville kokeiluille ja demoille
1 stars 0 forks source link

okffi design-systeemi-kokeilu #4

Open pe3 opened 10 years ago

pe3 commented 10 years ago

Samalla reveal.js-kokeilun #3 rinnalla voidaan ottaa käytännön tuntumaa viime aikojen design-systeemi-keskusteluun. Design systeemit ovat joidenkin suunnittelijoiden ehdottama strategia responsiivisten (erilaisiin päätelaitteisiin mukautuvien) käyttöliittymien suunnitteluun. Voisimme esimerkiksi kokeilla kuinka tyylin kierrättäminen reveal-presentaation ja responsiivisen HTML-sivun välillä sujuu.

taustalukemisto

refresh our brand and communications to reach out beyond existing open knowledge community, and to develop a communications toolkit for the community to make spreading the message easier

d2s commented 10 years ago

Mielenkiintoista, olet lueskellut samoja sivustoja / artikkeleita mitä itsekin tässä lähipäivinä. :)

Kiinnostaa tosiaan olla mukana.

pe3 commented 10 years ago

Jos lähdetään liikkeelle tolla Atomic design -idealla ja ruvetaan purkamaan OKF:n sivustoa, kalvopohjaa ja tyyliohjetta, niin mitä olisivat atomit, molekyylit, organismit, sivupohjat (template) ja sivut (page). Jos nuo saa eriteltyä, niin mitä hyötyä siitä olisi?

d2s commented 10 years ago

@pe3 Pääasiallinen hyöty pienempiin palasiin jakamisesta on tehokkaampi uudelleenkäytettävyys. Kun rakenteelliset komponentit ovat riittävän pieniä, niitä voidaan paremmin uudelleenkäyttää eri projektien välillä.

Jos CSS-tasolla määrittelyissä käytetään BEM-metodin http://bem.info/method/definitions/ tapaista rakennetta, voidaan tehdä uudelleenkäytettäviä komponetteja joiden perustason ulkoasu pystyy samana, vaikka ne liitettäisiin toiseen projektiin. Riippuu tietty tavoitteista että minkälaista lähtee hakemaan, mutta style guide driven development on todetty hyväksi lähestymistavaksi esim. Stonesoftin uusien web-pohjaisten käyttöliittymien kanssa.

pe3 commented 10 years ago

jos nyt vaikka haluaisin määritellä okf:n logon ja valmistautua kierrättämään sen sekä kalvopohjan alapalkkiin että jonkin hypoteettisen projektisivuston yläkulmaan, niin miten tekisin sen? voinko käyttää SASSia?

d2s commented 10 years ago

Mahdollista.

BEM –tyylisesti kirjoitetuissa tyylitiedostoissa CSS-rakenne menee näin: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

.block {}
.block__element {}
.block--modifier {}

Logo voisi olla määritelty esim. näin:

.okf-logo {}    /* Block */
.okf-logo__image {}    /* Element */
.okf-logo--top-left {}    /* Modifier */
.okf-logo--bottom-left {}    /* Modifier */

HTML-rakenne olisi siis käytännössä muuten sama, mutta lisäämällä elementtiin .okf-logo--top-left CSS-class, voi muokata perus-elementin sijaintia.

Something more: http://montagejs.org/blog/2013/10/24/BEM-syntax-with-ux-in-mind/

On Feb 11, 2014, at 3:15 PM, Petri Kola notifications@github.com wrote:

jos nyt vaikka haluaisin määritellä okf:n logon ja valmistautua kierrättämään sen sekä kalvopohjan alapalkkiin että jonkin hypoteettisen projektisivuston yläkulmaan, niin miten tekisin sen? voinko käyttää SASSia?

pe3 commented 10 years ago

@d2s kiitti. tää ja burrito ovat hyviä vinkkejä. täytyy opiskella ennenku pystyn tekemään tai sanomaan mitään :-)

d2s commented 10 years ago

@pe3 Kiva että pystyn olemaan jotenkin avuksi. Jos / kun tulee jotain vastaan missä tarvitset apua niin kysy. En ehkä osaa kaikkea, mutta on tullut kerättyä aika suuri arkisto aiheeseen liittyviä linkkejä joista voi jotain vastauksia löytyä.

pe3 commented 10 years ago

Mitä mieltä oot Code for American tyylioppaasta ja millähän filosofialla se on tehty?

Muutenkin ovat kunnostautuneet viestin paketoimisessa, paperillekin.