Դիզայն բրաուզերում

Բովանդակություն

• Կոդով նախագծման առավելությունները
• Տվյալները նախ
• Բջջային բարություն անվճար
• Ընդհանուր լեզու գտնելը
• Սովորեք ավելի արագ
• Արագ կրկնություն
• Գործարկման ավելի արագ ժամանակ
• Ինչու HTML5
• Կախարդական տվյալ- հատկանիշ
• CSS3 - դա նոր Photoshop է
• Sass + կողմնացույց. Կախարդականորեն համեղ
• jQuery. այո, այո, կարող եք
• Շրջանակներ
• Վերջնական մտքեր

Այս հոդվածը առաջին անգամ հայտնվեց .net ամսագրի 235 համարում ՝ աշխարհի ամենաշատ վաճառվող ամսագիրը վեբ դիզայներների և մշակողների համար:

Ես երբեք մեծ երկրպագու չեմ եղել `ավելի շատ աշխատանք կատարելու, քան անհրաժեշտ է: Ես հակված եմ գնահատել մեթոդներն ու գործիքները `հիմնվելով նրանց կամ իմ թիմի` ավելի արդյունավետ դարձնելու ունակության վրա: Որքա՞ն արագ են դրանք մեզ հասցնում գործող ապրանքի: Որքանո՞վ են նրանք արդյունավետ հաղորդակցվելու հարցում: Նրանք հեռու՞ են մեր ճանապարհից:

Այս տարիների ընթացքում ես հարմարեցրել եմ իմ նախագծման գործընթացն ու գործիքները: Պատկերացնում եմ, որ կշարունակեմ այդպես անել: Դա է տեխնոլոգիայի և ոստայնի նախագծման բնույթը: Այս արդյունաբերությունն անընդհատ զարգանում է. մեր գործընթացը և գործիքները նույնպես պետք է զարգանան:

HTML5- ը և CSS3- ը դյուրին են դարձնում դիզայնի գործընթացի ավելի մեծ հոսանքը դեպի վերևի հոսքը `հեռու Photoshop- ից և ավելին դեպի կենդանի, շնչառական դիզայն: Հիմնադրամը, Bootstrap- ը և jQuery- ի նման գործիքները ձեր նախագծման գործընթացի մեծ մասի տեղափոխումն ավելի մատչելի են դարձնում:

Կոդով նախագծման առավելությունները

Նախ, ես չեմ պաշտպանում Photoshop- ը կամ որևէ այլ տեսողական դիզայնի խմբագիր թողնել ձեր աշխատանքային հոսքից: Փոխարենը, ես կկենտրոնանամ այդ դիզայնը շուտով ծածկագրում տեղափոխելու առավելությունների վրա:

Տվյալները նախ

Այն, ինչ ինձ միշտ դուր է եկել HTML- ով նախագծելիս, այն է, որ այն խրախուսում է մտածել տվյալների առաջին տեսանկյունից: Ի հակադրություն, օգտագործելով նկարչական ծրագրեր, ինչպիսիք են Illustrator, OmniGraffle կամ Balsamiq, դուք սկսում եք տուփով և լրացնում այն ​​տվյալների հետ:

HTML- ում դուք կառուցում եք DOM (փաստաթղթի օբյեկտի մոդել), որը նման է բովանդակության աղյուսակի կառուցմանը: Դա վերադարձ է իրական տեղեկատվական ձևավորմանը ՝ բովանդակալից հիերարխիայով: HTML5- ը մի քայլ առաջ է տանում ՝ ավելացնելով նոր իմաստային տարրեր ՝ հոդված, բաժին, վերնագիր, մի կողմ, տողատակ և այլն: Այս տվյալների առաջին մոտեցումը լավ խառնվում է բջջայինի առաջին, պատասխանատու ձևավորումների հետ:

Բջջային բարություն անվճար

Եթե ​​կարդում եք սա, հավանաբար նախագծում եք բջջայինի համար: Եվ հավանականությունը մեծ է, որ դուք ստիպված կլինեք ձևավորել մեկ կամ երկու ձև: HTML5- ի հետ դուք հաջողակ եք: HTML5- ից առաջ ձեր մուտքագրման տեսակները գրեթե տեքստային կամ գաղտնաբառային դաշտ էին: HTML5- ը ներմուծեց մի շարք լրացուցիչ մուտքագրման տեսակներ, ներառյալ.

input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">

Իրականում զարմանալի է այս լրացուցիչ, եզակի մուտքագրման տեսակների մեջ այն է, որ iOS- ի և Android- ի բջջային զննարկիչները ճանաչում են դրանք և ավտոմատ կերպով փոխում համատեքստային ստեղնաշարը `առանց հատուկ jQuery հավելումների կամ կոտրումների: Օ Oh, և եթե ձեր զննարկիչը չգիտի ինչ է մուտքագրման տեսակը = "էլ. փոստ"> է, ապա այն պարզապես լռելյայնորեն մուտքագրում է տեքստ:

Ընդհանուր լեզու գտնելը

«Awարմանալի է, թե ինչպես մեր դիզայներները և մշակողները կարող են աշխատել նույն լեզվով». Johnոն Դրագո, Inflection- ի հավելվածի մշակող:

Տեսեք ՝ սա ծանոթ է թվում: Ես կոնֆերանսների դահլիճում եմ, որտեղ կան սերվերի կողմից կիրառվող կես տասնյակ ծրագրեր, որոնք կարող են ինձ շրջապատել կոդերը Ruby- ում, Python- ում, Java- ում կամ .NET- ում: Ես միակ դիզայներն եմ: Իմ առաջարկներից մի քանիսը ի սկզբանե մերժվում են ՝ իրագործելու համար չափազանց բարդ: Քայլում եմ դեպի գրատախտակը և տախտակին սկսում եմ գրել HTML և CSS, թե ինչպես կարող է իրականացվել դիզայնը: Հանկարծ խոսակցության տոնը փոխվում է, և մշակողներից մեկը դժկամությամբ ասում է. «Դե, այո, եթե այդպես անենք, կարող է աշխատել»:

Դիզայնի իմ գործընթացն ավելի շատ կոդ տեղափոխելը բարելավեց զրույցները մշակողների հետ: Հարգանքի ավելացված շերտ կա, որը վաստակում է ՝ իմանալով, թե ինչպես պատրաստել ձեր նմուշները ծածկագրով: Այդ հարգանքը վաստակելու համար անհրաժեշտ չէ փորձագետ լինել: Չնայած իմ HTML և CSS հմտությունները բավականին ուժեղ են, իմ JavaScript հմտությունները լավագույն դեպքում միջակ են: Եվ ես չեմ ամաչում դա ընդունելուց: Դեռևս, երբ աշխատում ենք frontend- ի կամ սերվերի կողմից մշակողների հետ, հսկայական առավելություն է այն փաստը, որ մենք կարող ենք խոսել ընդհանուր լեզվով, կամ հանդիպել ճանապարհի կեսին:

Սովորեք ավելի արագ

Չնայած մետաղալարերը և տեսողական կոմպոզիտները կարող են օգնել պլանավորմանը, այդ ստատիկ արտեֆակտները տեսական են: Քանի անգամ եք փորձել ինչ-որ մեկին բացատրել փոխազդեցությունը, որպեսզի միայն նա պատասխանի. «Կարծում եմ, որ ես ստիպված կլինեմ դա տեսնել»: Որքան շուտ հասնեք նախատիպին, մի բան, որի հետ մարդիկ կարող են փոխազդել, այնքան շուտ կկարողանաք փորձել դիզայնը և տեսնել ՝ արդյոք գաղափարներն աշխատում են:

Արագ կրկնություն

Վերջին անգամ ե՞րբ է արտադրության առաքված վերջնական դիզայնը համապատասխանեցվել հենց ձեր Photoshop համակարգչին: Գրեթե երբեք. Թվային արտադրանքի դիզայնի դեպքում փոփոխությունն անընդհատ տեղի է ունենում: Ավելին, մի քանի տասնյակ էկրաններում ձեր վերնագրերի չափը 22pt- ից 24pt ավելացնելը, ինչպիսիք են փոփոխությունները, կարող են տևել ժամեր Photoshop- ում: Smart Objects- ը Photoshop- ում ձեզ տալիս է օբյեկտիվ կողմնորոշման որոշ մակարդակ: Unfortunatelyավոք, ինձ հայտնի տեսողական դիզայներների մեծ մասը խելացի օբյեկտները բավարար չափով չեն օգտագործում: CSS- ի միջոցով, քանի որ այն խրախուսում է ավելի համակարգված մոտեցում ձևավորմանը, տպագրական փոփոխությունները տևում են րոպեների փոխարեն:

Ինչ վերաբերում է ձեր բոլոր կոճակների գծային գրադիենտները փոխելուն: Թե՞ սահմանի չափը: Ի՞նչ կասեք քառակուսի անկյուններից 2px կլորացված դարձնելու մասին: Photoshop- ում դա կարող է տևել ժամեր, և դուք դեռ պետք է այն կոդավորեք: Կոդով նախագծելու ունակությունն օգնում է խուսափել ֆոտոշոփ վերադառնալու երկկողմանի ուղևորությունից `վիզուալ դիզայնը կրկնելու համար: Երբ այդ փոփոխությունները վերին հոսանքի մեջ տեղափոխեք կոդ, օգտագործելով CSS3 և Sass (որոնք ես կանդրադառնամ այս հոդվածում), դրանք կարող են տեղի ունենալ իրական ժամանակում և տևել ընդամենը մի քանի րոպե:

Գործարկման ավելի արագ ժամանակ

Տարիներ շարունակ, երբ ես ավելի շատ դիզայնի իմ հոսքի հոսանքն ավարտում էի վերածում կոդի, ես իսկական բարելավում ապրեցի. Շուկա ժամանակի մոտ 20-30% կրճատում: Որքան շատ եմ դա անում, այնքան քիչ ժամանակ եմ ծախսում կրկնօրինակման ջանքերի վրա: Ես ավելի քիչ ցիկլեր եմ ծախսում ՝ գնալով Photoshop կամ Հրավառություն, և այնուհետև կրկնում եմ աշխատանքը ծածկագրով:

Ինչ-որ պահի դիզայնը պետք է փոխկապակցված լինի որոշ տեսակի հետադարձ կապի ՝ լինի դա CMS, Rails հավելված կամ այլ բան: Քանի որ իմ նախագծման աշխատանքների մեծ մասը ծածկագրված է կոդով, ինտեգրումը տեղի է ունենում ավելի շուտ, քան ավելի ուշ: Մի քանի տարի առաջ իմ հաճախորդներից մեկը ՝ PointRoll- ը, հինգ օրում նախատիպից անցավ արտադրության:

Ինչու HTML5

HTML5- ն ավելի հեշտ է, քան HTML- ի նախորդ տարբերակները: Օրինակ վերցնենք փաստաթղթի տեսակի հայտարարագիրը: HTML- ի նախորդ տարբերակներում ՊԱՇՏՊԱՆ նման էր այսպիսի մի բանի.

! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

Եվ կար վեց տարբեր վարկածներ: Բարեբախտաբար HTML5 ՊԱՇՏՊԱՆ կարծես սա:

! DOCTYPE HTML>

Լրջորեն Վերջ Ockնցող պարզ:

Ստանդարտ HTML էջ ստեղծելու ժամանակ կան մի շարք ընդհանուր տարրեր, ինչպիսիք են վերնագիր, հիմնական բովանդակության տարածք, կողային տող և տողատակ: Համոզված եմ, որ դուք նախկինում նման բան եք տեսել ՝

div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>

Այնտեղ ոչ մի արտառոց բան չկա: Բայց բովանդակությամբ լրացնելուց հետո այս ձևանմուշը վերածվում է div ապուրի: Ի հակադրություն, HTML5- ի նոր իմաստային տարրերի հետ միասին դուք կստանաք շատ ավելի պարզ և հեշտ սկանավորող մի բան, ինչպիսին է սա.

վերնագիր> nav> / nav> / վերնագիր> հոդված> մի կողմ> / մի կողմ> / հոդված> էջատակ> / էջատակ>

Նայեք դրան: Մի բան, որն իմաստ ունի:

Կախարդական տվյալ- հատկանիշ

HTML5- ը գալիս է ևս մեկ հիանալի որսալով, որը հնարավորություն է տալիս մշակել ձեր սեփական իմաստային իմաստը տվյալներ-, Նախկինում, եթե ցանկանում էիք որևէ նշանակալից բան նշանակել DOM տարրին, ապա սահմանափակվում էիք անձը հաստատող փաստաթղթերով, դասերով և դերերով:

Unfortunatelyավոք, անձը հաստատող փաստաթղթերը պետք է լինեն եզակի: Դասերը համընդհանուր են (yippee!), Բայց դրանց օգտագործումը կարող է արագ վերածվել խառնաշփոթի: Դերերը չօգտագործված ակտիվ են, որոնք զգալի նշանակություն են տալիս ARIA- ի համար: Վերջերս ես օգտագործում էի տվյալներ. Իրադարձությունների հետևման վերլուծական հարթակի համար, որը մենք զարգացնում ենք Inflection- ում:Մենք մեր նախագծերը փորձելու մեծ երկրպագուներ ենք: Երբ աշխատում ենք մեծ թվով ինտերակտիվություն ունեցող ծրագրերի կամ էջերի վրա, մենք կցանկանայինք ավելի մանրամասն պատկերացում կազմել հաճախորդի ներգրավվածության մասին էջի մեջ:

Մուտքագրեք տվյալներ-, Դրանով դուք կարող եք նշանակել, անցնել երկայնքով և որսալ «սահմանել ձեր սեփականը» իմաստի մոդելի մեջ: Այսպիսով, օրինակ, դուք կարող եք դա անել.

մուտքագրման տեսակ = "կոճակ" data-id = "facebook" dataregion = "հիմնական" data-event = "գրանցվել"> մուտքագրման տեսակ = "կոճակ" data-id = "twitter" dataregion = "հիմնական" data-event = "գրանցում "> մուտքագրման տեսակ =" կոճակ "data-id =" linkedin "dataregion =" հիմնական "data-event =" գրանցում ">

Կարող ենք JavaScript- ով ունկնդիր կցել էջին և ցանկացած պահի, երբ հաճախորդը սավառնում է այն կամ կտտացնում է այս կոճակը, մենք կարող ենք հետևել այդ գործողությանը: Փոխանակ միայն Twitter- ում OAuth- ով գրանցված մեկին հետևելու լինելը, մենք կարող ենք տեսնել, որ նա սավառնում է Facebook- ի, ապա Twitter- ի, ապա LinkedIn- ի և հետո, վերջապես, որոշեց ընտրել Twitter- ն իր OAuth մոդելի համար:

Պատկերացրեք սա տարածել Pinterest- ի նման կայքի կամ Myspace- ի նոր դիզայնի վրա, որտեղ հաճախորդները քաշում և գցում են սալիկներ `դրանք վերադասավորելու համար` հիմնվելով հետաքրքրության վրա: Կամ հնարավոր է թաքցնել սալիկները, որոնք իրենց չեն հետաքրքրում տվյալներ- հատկանիշը հնարավորություն է տալիս կցել կամ նշանակել իմաստային նշանակության լրացուցիչ շերտ այն բաների, որոնք կարող եք սահմանել: Կայքերի և հավելվածների համար, որոնք մեծապես ապավինում են Ajax- ին, դա անսահման հնարավորություններ է բացում:

CSS3 - դա նոր Photoshop է

CSS3- ը բերեց տեսքի և զգացման ձևավորման մի ամբողջ նոր մակարդակ, որը նախկինում պահանջում էր ֆոնային պատկերներ, կտորներ և տխրահռչակ «լոգարիթմական դռների» տեխնիկա: Բարեբախտաբար, այդ ամենը անցյալում է:

Եկեք նայենք շքեղ կոճակի պատրաստմանը ՝ գծային գրադիենտով, կլորացված անկյուններով, տեքստի ստվերով, որը դրան տալիս է հաճելի նամակի սեղմման էֆեկտ և հովանալու փայլ: Այս տեխնիկան սովորելը դեռ շատ առաջ կընթանա: Դրանցից յուրաքանչյուրը կարող է օգտագործվել ինքնուրույն կամ տարբեր համակցություններով `ներկայումս ցանցը գերակշռող ներկայիս տեսողական թեժությունից որևէ մեկի համար:

Նախ, եկեք մի քանի ճշգրտումներ կատարենք լռելյայնի համար կոճակ> և մուտքագրման տեսակ = "ներկայացնել"> տարրեր Ենթադրելով, որ դուք օգտագործում եք ստանդարտ CSS- ի վերագործարկումներից մեկը, մենք պարզապես կավելացնենք մի փոքր չափսերի և շնչառության սենյակ:

/ * Կոճակներ, որոնց կոճակները: ======================================== * * / կոճակը, մուտքագրումը [type = "ներկայացնել"] {բարձրությունը: 2.7em; լիցքավորում .4em .7em; գծի բարձրությունը `1,9; }

Protip: Ներկայացվող կոճակները և մուտքագրումները կարող են բարդ լինել վերաձեւակերպելու համար: Ես գտա, որ գծի բարձրությունը 1.6 կամ ավելի բարձր ճշգրտելով ՝ կարող եք խուսափել թալանից ՝ լրացուցիչ բաժանման կամ տարածության կարիք ունենալով կոճակ> պիտակ

Այժմ մենք «շտկեցինք» մեր կոճակի հարցը, կարող ենք ստեղծել a .btn դասը ՝ կլորացված անկյուններով, գծային գրադիենտով, ուրվագծով և այդ տառաթղթի տեսքով գեղեցիկ մաքուր կոճակ տալու համար:

.btn {ցուցադրում. inline-block; եզրագիծ ՝ 1px պինդ # d4d4cc; -moz- սահմանի շառավիղը `4px; -webkit-border-radius: 4px; սահման-շառավիղ `4px; լիցքավորում .4em .7em; ֆոն `# edeff2; ֆոն ՝ -webkit- գրադիենտ (գծային, 0% 0%, 0% 100%, սկսած (#fefefe), գույնի կանգառում (0.55, # edeff2), մինչև (# e4e6e9)); ֆոն `-moz- գծային-գրադիենտ (կենտրոնի վերև, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-ստվեր: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-ստվեր: rgba (160,172,187, .7) 0 0 .2em 0; տուփ-ստվեր ՝ rgba (160,172,187, .7) 0 0 .2em 0; գույնը `# 6c7786; տառատեսակի չափը ՝ 1.1em; text-shadow: #fefefe 1px 0 1px; գծի բարձրությունը `1,375em; կուրսորը ՝ ցուցիչ; }

Եվ հետո հաճելի սավառնող էֆեկտ ՝ նուրբ փայլով, օգտագործելով այն տուփ-ստվեր մեթոդ:

.btn: Հովեր, .btn: ուշադրության կենտրոնում {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; տուփ-ստվեր ՝ # 129ceb 0 0 2px; ֆոն `# e6e9eb; ֆոն. -webkit- գրադիենտ (գծային, 0% 0%, 0% 100%, սկսած (# f7f7f7), գույնի կանգառում (0.55, # f6f6f7), մինչև (# e6e9eb)); ֆոն ՝ -moz-lineargradient (կենտրոնի վերև, # f7f7f7, # f6f6f7 55%, # e6e9eb); գույնը `# 45484b; տեքստային ստվեր ՝ rgb (255,255,255) 1px 1px 0; եզրագույն-գույն ՝ # c9c9c0; }

Հիմա ես գծային գրադիենտ կոդ գրելու մեծ երկրպագու չեմ: Դա երկար է և շփոթեցնող: Ինչպես տեսնում եք, ես միայն ներառել եմ դրա տարբերակը -մոզ, -վեբկիտ, և ստանդարտ մոդելը: Եթե ​​ցանկանում եք ներառել -o և -ms տարբերակները, ապա ձեզ հարկավոր է կրկնապատկել կոդը:

Կա եւս երկու տարբերակ. Մեկը CSS3 գեներատոր է. համացանցում կան մի քանիսը, ներառյալ ColorZilla- ն: Բայց եթե ուզում եք մի փոքր ուժեղացնել ձեր խաղը, հաշվի առեք սուզվելը Sass- ում. Զուգորդված Compass- ի հետ, դա Աստծո պարգև է:

Sass + կողմնացույց. Կախարդականորեն համեղ

Կարող եք դադարեցնել CSS4 միաեղջյուրի թողարկման հույսը: Այն այստեղ է և կոչվում է Sass + կողմնացույց: Sass- ը նշանակում է շարահյուսականորեն զարմանալի ոճերի թերթեր. Դուք ժառանգում եք CSS3- ի բոլոր ավանդական առավելությունները `փոփոխականների, խառնուրդների, ընդարձակիչների և այլ բարիքների ավելացված ուրախություններով:

Վերջերս վերափոխեցի 5000 տողանոց CSS ֆայլ, որն ուներ ավելի քան 30 տատանումներ նույն կապույտ երանգի վրա: Sass- ով ես ցանկացած փոփոխություն փոխարինեցի այս կոդով.

գույնը ՝ $ կապույտ;

Սահմանելով $ կապույտ Իմ մեջ _ փոփոխականներ. scss ֆայլ, ես կարող եմ ստեղծել լռելյայն գույն, որը կարող է վկայակոչել յուրաքանչյուր CSS կամ SCSS ֆայլ: Յուրաքանչյուր ոք, ով գրում է CSS, կարող է օգտագործել $ կապույտ և չպետք է անհանգստանաք eyedropper օգտագործելու, վեցանկյուն կոդ կամ RGB, RGBA կամ HSL գույն գտնելու մասին:

Հիշո՞ւմ եք այդ գծային գրադիենտի կոդը: Մի քանի տող կոդ գրելու փոխարեն, ինչ կասեք այս մասին.

@ ներառել ֆոնը (գծային-գրադիենտ (# b1cfdc, # 7a9cac));

Թող Sass- ը և Compass- ը կատարեն ծանրաբեռնվածությունը և ստեղծեն ձեզ համար ճիշտ շարահյուսություն ՝ արված: Ասենք, որ ուզում եք գույնի ավելի մուգ կամ բաց տարբերակ: Կարող եք ականջի կաթիչը տեղաշարժել Photoshop- ում կամ պարզապես օգտագործել Sass- ի լուսավորող / մթող հրամանները.

@ ներառել ֆոնը (գծային-գրադիենտ (մթնել ($ litegray, 2%), մթնել ($ սպիտակ, 5%)));

Դա կստեղծի գծային գրադիենտ 2% -ով մթնեցվածով $ lite- մոխրագույն և 5% -ը խավարեց սպիտակ գույնի, Վոյլ Անգամ HEX կամ RGB կոդերը պետք չեն:

jQuery. այո, այո, կարող եք

Ես խոստովանություն ունեմ կատարելու: JavaScript- ն ինձ վախեցնում էր: Հետո գտա jQuery: Ես չեմ հավակնի JavaScript- ի գուրու լինել, բայց ես բավականին վստահ եմ, որ կարող եմ ցանկացած տեսակի անցում կատարել կամ գործառույթ, որը ինձ անհրաժեշտ է jQuery- ի միջոցով:

Վերցրեք, օրինակ, էկրանին երկրորդական հեռախոսահամարի մուտքագրումը ցուցադրելու հնարավորությունը `սեղմելով Ավելացնել նոր համարի հղմանը: Օգտագործելով jQuery, դուք պարզապես գրում եք սա.

// - Պրոգրեսիվ բացահայտում - // $ ('. Նոր-թիվ'): կտտացրեք (ֆունկցիան () {$ ('. Alt-number'): fadeIn ('արագ');});

Փնտրու՞մ եք ավելի առաջադեմ բան: Դրա համար, հավանաբար, կա լրացում: Հիմնական վարքագիծը հեշտ է, և բարդերը մատչելի են jQuery- ի հետ:

Շրջանակներ

Այսօրվա դրությամբ ամենաուժեղ շրջանակներից երկուսն են Foundation և Bootstrap: Հիմա, նախքան CSS- ի շրջանակները կհեռացնեք, մի բան հարցնեմ: Օգտագործու՞մ եք jQuery: Ruby on Rails? Angանգո Բոլոր շրջանակները:

Likeիշտ այնպես, ինչպես jQuery- ը և RoR- ը, Foundation- ը և Bootstrap- ը ծնվեցին այն բանի շնորհիվ, որ ճանաչեցին, որ կան մի շարք բաներ, որոնք մենք անում ենք անընդմեջ (օրինակ ՝ զրոյացումներ, տպագրություն, ցանցեր, ձևեր, կոճակներ, ներածություն և ցուցակներ): Հիմնադրամը և Bootstrap- ը երկուսն էլ առաջարկում են աջակցող պատասխանատու ձևեր `օգնական դասերի օգտագործման միջոցով: Երկուսն էլ լավ փաստաթղթավորված են և փորձարկվել են ճանապարհի վրա, այնպես որ կարող եք վստահորեն օգտագործել դրանք:

Մեկի հիմնական տարբերությունը երկուսի միջև. Bootstrap- ը հիմնված է CSS նախամշակման LESS համակարգի վրա, մինչդեռ Foundation- ը հիմնված է Sass- ի վրա: Ես նախընտրում եմ Sass- ը LESS- ին `իր լրացուցիչ հնարավորությունների շնորհիվ, բայց թե Sass- ը, և թե LESS- ը, squash ավանդական CSS- ն կտորների փոխարեն:

Վերջին միտքը շրջանակների մասին: Նրանց համար, ովքեր չեն ցանկանում ժառանգել ուրիշի շրջանակի լրացուցիչ փչոցը, մտածեք վերցնել գոյություն ունեցողը և մերկացնել այն մերկ ոսկորներին կամ բալ ընտրել մի քանիսից ՝ ձեր սեփականը գլորելու համար: Ամեն դեպքում, ամեն անգամ զրոյից սկսելու հիմք իսկապես չկա:

Վերջնական մտքեր

Greaterանկանո՞ւմ եք ավելի մեծ վերահսկողություն, թե ինչպես է վերջապես ստացվում ձեր դիզայնը Տեղափոխել հոսքի հոսանքն ի վեր ավելի շատ կոդ: HTML5- ը վերջապես որոշակի իմաստ է բերում DOM- ին: Լավ հեռացում անիմաստից ՊԱՇՏՊԱՆs և divitis. CSS3- ը նոր Photoshop- ն է. Գծային գրադիենտներ, սահմանային շառավիղ և տուփ-ստվերներ FTW: Եվ այնպիսի գործիքներով, ինչպիսիք են Bootstrap- ը, Foundation- ը, Sass- ը և jQuery- ն, հոսանքի հոսանքն ի վեր դեպի կոդ տեղափոխելը երբեք ավելի հեշտ չի եղել:

Բացահայտեք HTML5- ի 55 զարմանահրաշ օրինակներ Creative Bloq- ում: