Get Skeleton. Boilerplate for Responsive, Mobile-Friendly Development

Transkript

1 Get Skeleton Boilerplate for Responsive, Mobile-Friendly Development

2 Hvad er Get Skeleton?!? Get Skeleton er en lille samling af små CSS og JS filer, som giver dig adgang til ultra hurtig udvikling af responsive hjemmesider. Direkte link til: Get Skeleton

3 Bygger på 3 principper (1) Responsivt grid ned til mobiltelefoner 960px bredde Kan skalere direkte ned til alle mobile enheder og store skærme Både landscape og portrait

4 Bygger på 3 principper (2) Køre super hurtigt Er et hurtigt værtøj til udvikling af hjemmesider Godt struktureret UI standart elementer styles til hurtig brug forms, buttons, tabs og mere

5 Bygger på 3 principper (3) Hjulet Get Skeleton er ikke et framework, men en masse hjul klar til at blive brugt, med mulighed for at udvikle direkte ned til det, til evt. udvidelser. Parat til at bruge dine styles

6 Media Queries inkluderet Smaller than 960: Smaller than the standard base grid Tablet Portrait: Between 768px and 959px All Mobile Sizes: Less than 767px Just Mobile Landscape: Between 480px and 767px Just Mobile Portrait: Less than 479px

7 Support til skeleton?!? Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, IE8, IE7 iphone (Retina) Droid (Charge/Original) ipad

8 Fil Strukturen index.html: The base html page that includes the necessary initial markup stylesheets (folder) base.css: Basic styles of Skeleton skeleton.css: The glorious Skeleton grid layout.css: File with no specific styles, but a variety of useful media queries javascripts (folder) tabs.js: Contains code for activating tabs and should house your site's JS/jQuery (using Google's CDN to pull in jquery as well) plugins (folder): An empty directory for your jquery plugins images (folder): favicon.ico: Standard 16x16 favicon apple-touch-icon (x3): All three sizes of Apple touch icons for iphone 3, ipad and iphone 4 with retina. robots.txt: SEO, search-crawler file. Don't need to touch it, just there for your own good 404.html: Placeholder 404 page just to get you started

9 Downloads Skeleton direkte download link Til designeren: Photoshop PSD grid fil

10 At bruge eller ikke at bruge? Det er 100% op til dig. Skeleton er gratis, og virker super nemt. Vil du udvikle direkte meget hurtigt til alle platforme, er Get Skeleton en vej at gå. Findes der andre? Ja, men dette er super nemt og hurtigt at komme i gang med.

11 Krav til brug? At komme kode HTML/CSS og Javascript. At have forståelse for hvordan Media Queries fungere. At kunne læse et CSS dokument og forstå hvilke class/id d der er til designeren.

12 En hurtig intro.container 960px.column eller.columns giver float left og noget space imellem dine blocks..row dette er bare til en row giver bottom space.

13 /* Base Grid */.container.one.column,.container.one.columns { width: 40px; }.container.two.columns { width: 100px; }.container.three.columns { width: 160px; }.container.four.columns { width: 220px; }.container.five.columns { width: 280px; }.container.six.columns { width: 340px; }.container.seven.columns { width: 400px; }.container.eight.columns { width: 460px; }.container.nine.columns { width: 520px; }.container.ten.columns { width: 580px; }.container.eleven.columns { width: 640px; }.container.twelve.columns { width: 700px; }.container.thirteen.columns { width: 760px; }.container.fourteen.columns { width: 820px; }.container.fifteen.columns { width: 880px; }.container.sixteen.columns { width: 940px; }.container.one-third.column { width: 300px; }.container.two-thirds.column { width: 620px; }

14 /* Offsets */.container.offset-by-one { padding-left: 60px; }.container.offset-by-two { padding-left: 120px; }.container.offset-by-three { padding-left: 180px; }.container.offset-by-four { padding-left: 240px; }.container.offset-by-five { padding-left: 300px; }.container.offset-by-six { padding-left: 360px; }.container.offset-by-seven { padding-left: 420px; }.container.offset-by-eight { padding-left: 480px; }.container.offset-by-nine { padding-left: 540px; }.container.offset-by-ten { padding-left: 600px; }.container.offset-by-eleven { padding-left: 660px; }.container.offset-by-twelve { padding-left: 720px; }.container.offset-by-thirteen { padding-left: 780px; }.container.offset-by-fourteen { padding-left: 840px; }.container.offset-by-fifteen { padding-left: 900px; }

15 Dagens opgave Leg med Get Skeleton. Prøv at udvikle et site, det kommer til at gå super hurtigt. Gør dig bekendt med de forskellige styles.