Gå inn i CSS Flow: kodebiter du kan bruke

Nettutviklerressursen, CSS Flow ( figur A ), opprettet av den franske utvikleren Thibaut Courouble, inkluderer en samling av åpen kildekodebit, inkludert UI-elementer, komplette brukergrensesnitt og widgets som er kodet med HTML5, CSS3 og Sass / SCSS. Siden kildekoden er registrert under en MIT-lisens, er det eneste kravet at du trenger å oppbevare copyright-varsel og lisensinformasjon innenfor kildekoden når du bruker den til dine nettsteder og depoter. Flere av CSS-kodebiten blir gjennomgått nedenfor. Figur A

CSS-kodebittsortimentet tilbyr nå femti valg, fra 3D-knapper og 3D-navigasjon til vinduer for varsler og varsler. Imidlertid har jeg funnet ut at flere av CSS-kodebitene gir styling uten mye funksjon, eller en begrenset funksjonalitet i noen tilfeller. For eksempel har uttrekks-klokkeutdraget ( figur B ) en nedtellingstid på 42 minutter og 8 sekunder hardkodet i HTML-formatet, og stylingen ser bra ut, men for at du skal få den til en funksjonell tilstand, må du finne et skript eller kode for nedtelling. Dette er ikke så vanskelig å innlemme, faktisk har Tripwire en god artikkel om 25 kule jQuery-nedtellingsskripter, som vil tillate deg å manipulere stilene for å matche det bestemte nedtellingsskriptet.

Figur B

Kodestykket med flip-down Clock er testet med suksess i Firefox 4, Safari 4, Chrome 14, Opera 10 og IE 9.

Flerfargede trykknapper er et sett med CSS-genererte knapper med kule aktive tilstander, og en generator er inkludert i Sass-kilden, som lar deg lage knappestiler fra en enkelt inngangsfarge. CSS inkluderer også flere @media-skjermtilstander for 800px og 400px breakpoints, og bruker også flere CSS3-stiler som boksskygge, kantradius og lineære graderinger for å lage effektene som vist i figur C.

De flerfargede trykknappene er testet med suksess i Firefox 4, Safari 4, Chrome 13, Opera 10 og IE 8.

Notepaper Blockquote inkluderer egenskaper som radiell gradient, repeterende lineære gradienter, transformasjoner og noen før / etter innstillinger for de større sitatene. En del av demosiden som fremhever effekten, vises i figur D. Utdraget har også fleksible bredde- og høydeinnstillinger og forringes godt i eldre nettlesere. Notepaper Blockquote-koden er testet med suksess i Firefox 4, Safari 4, Chrome 13, Opera 10 og IE 6.

Figur D

For øyeblikket tilbyr CSS Flow fem funksjonelle brukergrensesnitt som er bygget helt med CSS, og disse inkluderer mobil, fargerik, flat, grafitt og mørk som vist i figur E. Det mobile CSS UI-settet bruker rene, organiserte HTML5 og CSS med Sass som et fundament som kan integreres i et nytt eller eksisterende mobil webapplikasjonsprosjekt. Mobilsettet er testet i iOS 5+, Android 4+ og Opera Mobile 12.1+.

Figur E

UI-settene varierer i pris fra $ 9 til $ 19 hver, eller kan alle fem kjøpes for $ 39.

Mens flere av CSS-kodebitene levert av CSS Flow vil kreve litt ekstra skripting og koding for å få dem til å fungere fullstendig som deler av din eksisterende eller nye kode, gir utdragene et flott utgangspunkt for spesifikke krav du måtte ha i webutviklingen din. innsats.