bygge et modulopbygget instrumentbræt grænseflade med ren,,,,,,, i dag, vil det være en smuk, lille instrumentbræt ved hjælp af ren (se projekt om github), den nye mini - css modul bibliotek fra juhu!vi vil tale om, og ved hjælp af nogle af de principper, smacss (dimensionerbare og modulære struktur for css).vi skal også bruge billeder fra weloveiconfonts. kom.,,,,, note:, før vi går videre, der er et minimum, vægt på figurerne i instrumentbrættet, vi vil skabe.figurerne er bedst gennemføres med noget mere javascript tung og for at holde fokus på css og minimal javascript, denne forelæsning generelt vil undgå figur tegning teknikker.,,, lidt om ren, ren blev bygget af holdet i juhu!og yui være meget lette sæt moduler (mindre end 6 km).tænk på det som en udvidet normalisering, som også omfatter former for meget almindelige ting som net, formularer, knapper, tabeller og menuer.,,,,,, yui team bygget ren til et udgangspunkt, ikke en komplet løsning.fra dette udgangspunkt, de forventer at ekspandere og opbygge deres skik udviklere css som en forlængelse af denne base.,. det er grunden til, at meget af det, vi lærer i denne lektion er teknikker for at udvide en grundlæggende grundlæggende biblioteket som ren til anvendelse interaktion, som, når de anvender instrumentbrættet.,,, en smule om smacss,, smacss kort for dimensionerbare og modulære struktur for ccs, og hjernen barn af jonathan snook, er en fremgangsmåde, der er konstrueret til bygning af css, som er let forståelig, let at udvide, og undgår at css specificitet krig.,,,,,, det er yderligere bistået af ikke at bruge id for design og begrænsning af russisk af selektorer så meget som muligt.den grundlæggende idé er, at css kan betegnes som base, layout, moduler, lande og temaer.strukturering af css omkring disse kategorier, og efter at konventioner, der henviser til disse kategorier giver smacss læsbare og umiddelbart anvendelige.derved undgår man klasse navne, der er vilkårlig stilarter, der er forbundet med dem.den grundlæggende idé om kategorisering, følger den navngivningskonvention.,,, base: ingen navn (default elementer, ingen undervisning), layout:,. layout,. nettet. nettet kolonne. grid-column.five.columns, moduler:,. btn (modul navn). btn misligholdelse. btn calltoaction;. modal,. modal header,,.,. der er skjult, er aktiv (dvs. javascript udløser klasse ændringer), tema:,. tema baggrund. tema grænse. font-1,. font-2, disse typer af klasser, beskrive deres funktionalitet og kategori.reglerne for smacss er mere "retningslinjer" og måder at tænke og se gennem kilde til ren css for at se eksempler på smacss i aktion.,,, dykning, lad os skabe et enkelt projekt fortegnelse med html5 boilerplate, og smid ren i i stedet for normalize.css.for resten, vi vil bruge ren er yui cdn link, < forbindelse rel = "stylesheet" href = "http: //yui. yahooapis. kom /en /0.1.0 /pure-min.css" >,.vi vil også falde i skrifttype, fedt, twitter er ikon skrifttype indsamling, og tilføje en linje til vores css (instrukser fra weloveiconfonts).i tillægget, vil du se ikoner defineret med klasser som "fontawesome kalender.,, /* i main.css * /[klasse * =" fontawesome - "]: før {skrifttype familie:" fontawesome, uden serif;}, <!i. i stedet for at normalisere - > < forbindelse rel = "stylesheet" href = "http: //yui. yahooapis. kom /en /0.1.0 /pure-min.css" > < forbindelse rel = "stylesheet" href = "http://weloveiconfonts.com/api/?familie = fontawesome ">,, vi er klar til at begynde at anvende disse redskaber i udformningen.lad os starte med at definere et skelet css for at holde vores elementer.lad os sætte dette i vores krop.,, < header > < nav > < /nav > <!- det er her vores nav - menuen vil gå... > < /header > < afsnit klasse = "resultattavle" > <!- vores instrumentbræt stykker vil gå her... > < /afsnit > < fod > <!- ophavsret oplysninger kan komme her... > < /fod >, har vi besluttet at anvende en farve palette, vi fandt på colourlovers kaldet gul træ frø af brugeren ljk.,,,,,, for nu skal vi henvise dem til en bemærkning i toppen af css fil.,, /* red:&#e73f3f orange:&#f76c27 gule:&#e7e737 blå:d9dd1 lilla:e45d3 * /,,, tip: du kan drage fordel af ud ved hjælp af css farve nøgleord og finde /erstatte hex kode senere, så du ikke behøver at kopiere og pasta de hex - kode konstant.,,, fastlæggelse af menuen, purecss giver os et fald i menu - modul, som vi kan bruge til at definere en menu til vores instrumentbræt.vi begynder ved hjælp af ren klasse baseret modul navngivning, efter retningslinjerne i smacss.,, < nav klasse = "ren menu ren menu åbne rene menu horisontale" > < en href = "#" klasse = "ren menu med overskriften" > webdesigntuts < /a > < ul > < li klasse = "ren menu udvalgt" > < en href = "#" > instrumentbræt < /a > < /li > <!- andre ting...- > < /ul > < /nav >, bemærke, at denne plan, vil ikke være funktionelle for denne forelæsning.se side, kan vi se vores menu er blevet skabt med tillæg af horisontale stil.lad os gå videre og ændre den baggrund af menuen til et delvist gennemskuelige sort.,,. ren menu {skrifttype vægt: lettere.}. pure-menu.pure-menu-fixed {holdning: faste;}. pure-menu.pure-menu-blackbg {baggrund:Þ.}. pure-menu.pure-menu-blackbg. ren menu position: den (farve:&#efefef.}. pure-menu.pure-menu-blackbg en (farve:&#fff.}. pure-menu.pure-menu-blackbg a: den {baggrund:ʚ.}. pure-menu.pure-menu-blackbg. ren menu udvalgt en {baggrund:e45d3.}. pure-menu.pure-menu-blackbg. ren menu udvalgt en: svæv (farve:&#efefef;}, her ser vi, at en vedtagelse af de konventioner, der anvendes af smacss og ren.vi definerer to nye klasser, ren menu blackbg "og" ren menu fast, og så de former, der er nødvendige for at støtte denne klasse.vi ser også en tilsidesættelse af grundlæggende kategorier (som det eksisterende "rene menu" klasse til at skifte til en mindre skrifttype vægt).,,,,,,, at skabe et instrumentbræt modul, næste, vil vi skabe et instrumentbræt modul.vi skal bruge nogle grundlæggende former for vores base niveau. "blokke" stykke.,,. instrumentbræt stykke (min. højde: 300px; - webkit rubrik størrelsessortering: grænse boks - - box størrelsessortering: grænse boks; rubrik størrelsessortering: grænse boks; farve:&#fff; tekst tilpasse: center; holdning: relativ; polstring nederst: 40px;}, nu, hvor vi har denne base modul, vi vil udvide dette ved at skabe nye klasser med "instrumentbræt stykke" præfiks.først vil vi skabe baggrund farve klasser,.,,. instrumentbræt stykke redbg {baggrund farve:&#e73f3f;} instrumentbræt stykke orangebg {baggrund farve:&#f76c27;} instrumentbræt stykke yellowbg {baggrund farve:&#e7e737;} instrumentbræt stykke bluebg {baggrund farve:d9dd1;} instrumentbræt stykke purplebg {baggrund farve:e45d3;} instrumentbræt stykke graybg {baggrund farve:}, næste, vi vil definere tillægget for de forskellige instrumentbræt stykker.vi medtager en itråd perspektivgruppen af envato logo, der vil strække sig hele bredden af nettet.,,,,,, < afsnit klasse = "instrumentbræt pure-g-r clearfix" > < div klasse = "pure-u-1 instrumentbræt stykke instrumentbræt stykke redbg instrumentbræt stykke logo" > < h1 > < perspektivgruppen x = "0px" y = "0px" bredde = "132.89669167px" højde = "120px" viewbox = 0 0 73.351 82.791 "give baggrund =" nye 0 0 73.351 82.791 "xml: rummet =" bevare "> < g > < vej fylde ="&#ffffff "d =" m7.372,27.487c-1.903,39.206-2.261,55.13,5.369,67.05c6.858-17.611,15.499-37.423, 26.14-55.114 c21.514,16.159,12.19,21.405,7.372, 27.487z m73.333,2.971c-0.11-0.924-0.589-1.7-1.276-2.216c71.4,0.204,70.53-0.084,69.612, 0, 021 c0,0-2.738,0.589-7.093,1.704C41.722,21.698,24.654,48.459,11.43,74.155c0.492,0.427,0.991,0.857,1.512,1.268 c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g> </svg> </h1> </div> <div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg"> <div class="dashboard-content"> <h2><i class="fontawesome-twitter"></i></h2> <p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p> </div> </div> <div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg"> <div class="dashboard-content"> <h2><i class="fontawesome-github"></i></h2> <p class="dashboard-metric"> 142 Commits <div class="light bar-horizontal"> <div class="bar-horizontal-bar" style="width:57%"> 57% Capacity </div> </div> </p> </div> </div> <div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg"> <div class="dashboard-content"> <p class="dashboard-metric"> <h2><i class="fontawesome-c- "> < jeg > < /h2 > < div klasse =" instrumentbræt. "> < stærk > 63 /90 < /stærk > < br > < små og gt opgaver fuldstændig < /små > < /div > < /p > < /div > < div klasse =" vertikale "stil =" højde: 70%; "> < /div > < /div > < /afsnit >,, der er mange aspekter i dette tillæg.først skal vi bruge pure-u-1-3 (og andre pure-u - klasser) i et kvadratnet række element, pure-g-r ".disse klasser er en del af den rene forsyningsnettet.for at forstå disse helt, tjek den fulde yui grid dokumentation; den grundlæggende idé er, at nettet klasse pure-u-1-3 er 1 /3. bredden af den fuldstændige net; en klasse af pure-u-3-4 er 3 /4. bredden af nettet.modul med logoet i den klasse pure-u-1, som gør det muligt at justere fulde bredde på nettet.,, de andre elementer i instrumentbrættet stykker anvendes til at vise de forskellige typer af målesystemer.følgende css regler anvendes til at forelægge disse måleenheder og andre indre dele af instrumentbrættet stykker.,,. instrumentbræt stykke logo h1 {linje højde: 100px;} instrumentbræt stykke logo perspektivgruppen {margen top: 80px;} instrumentbræt stykke h1 {linje højde: 300px; skriftstørrelsen: 3.6em; margen: 0;} instrumentbræt indhold {holdning: relativ; z-index: 999.}. instrumentbræt indhold p {skrifttype vægt: lettere;} instrumentbræt indhold. lys (uklarhed: 0, 4; display: blok.}. instrumentbræt indhold h2 - (skriftstørrelse: 4em; uklarhed: 0, 4;} instrumentbræt. {tekst omdanne: store; skriftstørrelsen: 1.6em; linje højde: 1}. instrumentbræt. jeg {margen: 0.6em;},,,,,, er vi ogsådefinere den horisontale og vertikale bar klasser adskilt fra instrumentbrættet indhold moduler,.,,. bar horisontale (højde: 36px; baggrund farve: rgba (255255255,0.4); position: relativ; display: blok; margen top: 20px;}. bar horisontale bar {baggrund:&#fff. højde: 36px; linje højde: 36px; farve:Ƽ tekst omdanne: store; skrifttype vægt: dristige og skriftstørrelse: 0.8em; brev afstand: 0.2em. position: absolut; top: 0; tilbage: 0}. bar vertikale {holdning: absolutte og nederst: 0px; tilbage: 0px; bredde: 100%; baggrund: rgba (200200200,0.5)), og, endelig, bruger vi mere ren er indbygget moduler for at skabe et såkaldt bord til en "begivenheder".modul, og vi genbruger de horisontale bar klasse for vejr - modul.vi udvider disse klasser med tilpassede css så godt.her er tillægget for de sidste to moduler.,, < afsnit klasse = "instrumentbræt pure-g-r clearfix" > < div klasse = "pure-u-2-3 instrumentbræt stykke instrumentbræt stykke graybg instrumentbræt stykke begivenheder" > < div klasse = "instrumentbræt indhold" > < p - klassen = "instrumentbræt." > < h2 > < - klasse = "fontawesome kalender" > < jeg > < /h2 > < h3 > kommende begivenheder < /h3 > < tabel klasse = "rent bord rent bord center rent bord horisontale rent bord mørke" > < thead > < tr > < t >: < /t > < t > hvor: < /. >< t > når: < /t > < /tr > < /thead > < tbody > < tr > < td > john smith < /td > < td > wdtuts kontor < /td > < td > jun 20, 9:30am < /td > < /tr > < tr - klasse = "rent bord mærkeligt" > < td > og george bluth < /td > < td > pludselig valley < /td > < td > jun 23. < /td > < /tr > < tr > <td>Michael Scott</td> <td>Scranton, PA</td> <td>Jun 24, 2:45PM</td> </tr> </tbody> </table> </p> </div> </div> <div class="pure-u-1-3 dashboard-piece dashboard-piece-purplebg weather weather-rain"> <div class="dashboard-content"> <p class="dashboard-metric"> <h2><i class="fontawesome-umbrella"></i></h2> <div class="dashboard-metric"> <strong>80% Chance</strong><br><small>of Precipitation</small> <div class="light bar-horizontal"> <div class="bar-horizontal-bar" style="width:80%">80%</div> </div> </div> </p> </div> </div> </section> <footer> © 2013 Envato </footer>, ,And the extended Pure table classes., ,.pure-table-center { margin: 0 auto; } .pure-table-dark { color: #ddd; } .pure-table-dark .pure-table-odd { color: #444; }, ,Lastly, we want to slightly pad the top of the weather module so that it fits more in line with the events module. vi gør det ved at bruge de ekstra "vejr" klasse og om tilpasning af den øverste polstring.sammen med de sidste brikker, vil vi tilføje en enkelt fod - svarer til den øverste nav menu.,,. vejr (polstring top: 60px;} fod {baggrund: rgb (20,20,20); farve:&#aaa, polstring: 10px; skriftstørrelsen: 0.6em; skrifttype vægt: dristigt.},,, udvidelse af tilpasningsevne, ren kommer med indbygget lydhøre over nettet elementer.de er defineret med følgende vælgeren.,,. pure-g-r > [klasse ^ = "pure-u"], er dette en vanskelig at vælgeren (se på 30 css udvælgere, du må lære for nærmere forklaringer), der viser, at direkte børn ". pure-g-r" elementer.børnene skal have en klasse attribut, der begynder med "pure-u" præfiks.pyha. det punkt, for eksempel, at denne div:,, < afsnit klasse = "instrumentbræt pure-g-r clearfix" > < div klasse = "pure-u-2-3 instrumentbræt stykke instrumentbræt stykke graybg instrumentbræt stykke begivenheder" >,, det vælger, anvendes i @ medier forespørgsler til sammenbrud i nettet.men disse enhed elementer sammenbrud til 100% under 767px.vi ønsker at ændre dette, således at de elementer, der skal falde ned til 50% mellem 480 og 767.We do so with the following @media queries., ,@media only screen and (max-width:767px) { .pure-g-r>[class ^="pure-u"]{width:50%; float: left;} } @media only screen and (max-width:480px) { .pure-g-r>[class ^="pure-u"]{width:100%; } }, , ,A Splash of JavaScript, ,In 'main.js', we will write some JavaScript to make sure all of the modules on a single row are the same height., ,(function(){ var to; \tfunction pieceHeights(){ \t\tto = setTimeout(function(){ \t\t\t$(".pure-g-r").each(function(i,el){ \t\t\t\tvar contentPieces = $(el).find(".dashboard-piece"); \t\t\t\tvar max = 0; \t\t\t\tcontentPieces.css("min-height",""); \t\t\t\t$.grep(contentPieces, function(el,i){ \t\t\t\t\tmax = Math.max($(el).outerHeight(),max); \t\t\t\t}); \t\t\t\tcontentpieces. css ("min højde", max.})} 400)} $(vindue). ("resize", function() {cleartimeout (at); pieceheights().}). udløser ("resize");} (), det javascript definerer en funktion, der loops gennem hvert af de elementer, med en klasse "instrumentbræt stykke" i hver række, og derefter finder de højeste modul i den række.det sætter alle elementer i den række af højden af det højeste element i rækken.,,, konklusion, denne forelæsning kun viser nogle af de moduler, der er fastlagt i ren.med de mønstre, som dem, der anvendes i denne forelæsning, du kan skabe let pålidelige, læsbare, og skalerbare ccs.med en lille biblioteket som ren tillader dig at gearing, en stærk, testet og veldokumenteret, løsning af fælles problemer. hvad ville du gøre rent?lad os vide, i bemærkningerne.,
