ZURB Foundation: Колдонуучу интерфейсинин CSS алкагы, жооп берүүчү фронт үчүн

2010-жылы ZURB долбоорлоо агенттиги CSS алкактарын түздү. прототиптерин түзүүгө көмөктөшөт e иштеп чыгуу мөөнөттөрүн кыскартат. Бул үчүн, 2011-жылы ачык булактуу долбоор катары басылып чыккан жана ошондон бери коомчулукка акысыз болуп келе жаткан Фонддун алкагында аларды бириктирүү үчүн эң мыкты үзүндүлөр, үлгүлөр жана шаблондор тандалды.

Foundation UI конфигурациялоо үчүн эффективдүү HTML жана CSS компоненттеринен турган жооп берүүчү алдыңкы алкак (Колдонуучу Interface), ар кандай үзүндүлөр жана шаблондор, ошондой эле көптөгөн кошумча JavaScript кеңейтүүлөрү. Веб алкагындагы бар модулдун структурасы жана ар кандай түзмөктөрдөн жеткиликтүү долбоорлорду конфигурациялоо үчүн иштелип чыккан; менен бөлүштүрүлөт MIT лицензиясы жана экөөнөн тең жүктөп алса болот расмий башкы бет болуу GitHub. Foundation 4.0 версиясынан жумушчу жай колдонулат "Биринчи мобилдик", ошондуктан биз алкакта иштөөнү оптималдаштыруу жана файлдардын өлчөмүн жеңилдетүү үчүн бир нече жаңы модулдардын жардамы менен иштеп жатабыз. Фонддун стандарттык версиясынан тышкары, ZURB электрондук каттарды иштеп чыгуунун башка варианттарын да жарыялады (Каттар үчүн Foundation) жана бир беттик сайттар (Колдонмолор үчүн негиз).

Фонд, анын модулдук түзүлүшү менен мүнөздөлгөн жооп берүүчү веб-алкак, баарынан мурда ийкемдүүлүккө ээ. Сиз жүктөө алдында кайсы компоненттерди тандоону жана кайсынысын тандоону чечүүгө мүмкүнчүлүгүңүз бар: ушундай жол менен сиз кереги жок модулдарды жүктөп алууга мажбурланбастан, веб-код жыйнагынын өзүңүздүн жекелештирилген вариантын түзө аласыз. Жана эгер сиз жүктөп алуу учурунда тандалбаган компонент керек экенин түшүнсөңүз, аны кийинчерээк алкакка оңой эле кошо аласыз. Ушул сыяктуу эле, сиз үчүн мындан ары кереги жок модулдарды алып салууга болот: ошондуктан сизге ар дайым сиз чындап керектүү деп эсептеген функцияларга ээ болуу мүмкүнчүлүгүнө кепилдик берилет. сиздин веб-долбооруңузду ишке ашыруу.

Foundation 6.0 үчүн сизде көбүрөөк тандоо бар 40 компоненттер төмөнкү жети секторго таандык:

• тор: Жооптуу веб-дизайн үчүн чечүүчү компонент болуп 1200 пикселдик стандартка ылайыктуу туурасы менен Тордун ийкемдүү жайгашуусу саналат. Сиз ошондой эле бул модулду тандоодон чыгарсаңыз болот, бирок система ар кандай түзмөктөрдөн жеткиликтүү жана ар кандай резолюция масштабында шайкеш келген веб-долбоорду иштеп чыгуу үчүн негиз түзөт. Мындан тышкары, 6.0 версиясынан баштап, CSS flexbox моделинин (мисалы, горизонталдык же вертикалдык) негизинде иштөө менен элементтерди дагы ийкемдүү жайгаштырууга мүмкүндүк берүүчү "Flex Grid" модулун тандоо мүмкүнчүлүгү да бар. объекттерди уюштуруу).

• жалпы: Жалпы модулдардын арасында (официалдуу түрдө Grid да бир бөлүгү болуп саналат) биринчи кезекте класстар бар сүзүү e көрүнүү, анын аркасында сиз мүмкүн defiжалгыз элементтердин жайгашуусуна жана көрүнүүгө карата жүрүм-турум эрежелерин аныктоо; Мындан тышкары, бул аймакта сиз формаларды түзүү үчүн компонентти, ошондой эле жазуу жана текст үчүн негизги форматтарды камтыган басмакананын модулун таба аласыз.

• башкаруу: Бул жерде сиздин веб-долбооруңуздун эң керектүү интерактивдүү элементтери камтылган. Мисалы, бул бир чыкылдатуу менен колдонуучуну башка жакка жетектөөчү же тандалган элементтерди жабуу баскычтары. Слайдерлерди бириктире турган модулдар да бар баскычтар күйгүзүү / өчүрүү режими менен.

• багыттоо: Фронттун конфигурациясында навигация элементтери, албетте, жок болушу мүмкүн эмес, ошондуктан сиздин долбоор ZURB Foundation менен ишке ашырылышы үчүн да сизде орнотуу үчүн көптөгөн модулдар бар. меню тилкелери жана менюлар (ылдый түшүүчү, ылдый түшүүчү тизме, жылма), навигация жолдорун (нан күкүмдөрү) кошуңуз же беттерге номерди кошуңуз.

• контейнер: Контейнерлер жалпы мейкиндикте текст, сүрөттөр же видеолор сыяктуу ар кандай элементтерди кошуу үчүн укмуштуудай мүмкүнчүлүк. Бул жерде сиз классикалык мазмун виджеттери үчүн стилдерди таба аласыз, мисалы, ачылуучу менюлар, өтмөктөр, каскаддуу секторлор же модалдык диалогдор.

• маалымат каражаттары: "Медиа" бөлүмүндө сиз мультимедиялык элементтерди киргизүү үчүн пайдалуу алкактык модулдарды табасыз. "Flex Video" компоненти, мисалы, сизди колдойтвидеолорду киргизүү жана мазмундун ар кандай дисплей өлчөмдөрүнө жана резолюциянын түрлөрүнө ылайыкташтырылганын текшерет. Мындан тышкары, сүрөттөрдү алдын ала көрүү үчүн компоненттер, ошондой эле куралдарды колдонуу боюнча пайдалуу кеңештер бар.

• Плагин: Акырында сиз ZURB Foundation үчүн веб алкак менен иштөөнү жеңилдеткен абдан пайдалуу кеңейтүүлөрдү тандай аласыз. "Motion UI" китепканасы менен, мисалы, сиз Sass варианты үчүн гана жеткиликтүү болсо дагы, абдан пайдалуу китепкананы жүктөп алуу мүмкүнчүлүгүңүз бар, бул UI үзүндүлөрүн жана анимацияларын түзүүнү жеңил кылат.

Ошондой эле, жүктөөдөн мурун, сиз тандай аласыз defiкээ бир бүтүрүү алкак үчүн стандарттык орнотуулар. Аларга мамычалардын санын же калыңдыгын жана Тор системасынын максималдуу туурасын, ошондой эле ар кандай түс орнотууларын жана тексттин багытын аныктоонун варианттары кирет (солдон оңго же оңдон солго). Эгер сиз алгач жеке модулдардын иштешин изилдебестен алкакты сынап көргүңүз келсе, Foundation программасын толук версиясы катары да жүктөп алсаңыз болот (аяктоо) же болбосо жеңилирээк негизги вариант катары (маанилүү).

Эгер сиз CSS сунуш кылган мүмкүнчүлүктөргө канааттансаңыз, анан жөн гана жүктөлүп алынган CSS файлындагы стилдерди транскрипциялап алсаңыз, анда сиз туура чечим кабыл алдыңыз. Бирок, Foundation алкагында дагы бир өзгөчөлүгү бар: CSS кодунун негизи Sass стилдер барагынын тилинде жазылган (Синтаксистик сонун стилдер жадыбалдары), бул CSS үчүн препроцессор деп аталган. Sass стилдер баракчаларында иштөөгө мүмкүндүк берет .scss кийинчерээк популярдуу .css файлдарына жыйналып же транскрипцияланышы мүмкүн жана алар браузерлер тарабынан окулат жана чечмеленет.

Эгерде сиз ZURB алкагынын Sass вариантын колдонсоңуз, сиз төмөнкү артыкчылыктарга ээ болосуз:

• Жөнөкөйлөштүрүлгөн синтаксис (Sass же CSS), бул стилдердин баракчаларын жазууну жеңилдетет

• Мүмкүнчүлүгү defiбүтүрүү Dei моделдер (Mixins) кайталануучу форматтарды борборлоштуруп сактоо жана аларды каалагандай бириктирүү

• Ар кандай стилдердин жөнөкөй айкалышы HTTP сурамдарын азайтуу үчүн

• Колдонуу өзгөрмөлөр жана функциялар борборлоштурулган түстөрдү, аралыктарды, шрифттерди жана башкалар менен алмашуу

• Код аркасында жөн гана түзүлүшү мүмкүн Уялоо иерархиялык тартипте, өтө көп код саптары жок таза иштөөгө мүмкүндүк берет

Sass компилятору алгач Ruby тилинде жазылган. Бирок, эгер сиз бул программалоо тилин колдонбосоңуз, анда аны Sass үчүн орнотууга мажбур болбойсуз, анткени LibSass менен сизде C тилинде жазылган альтернатива болот. LibSass колдонулуп жаткан бардык операциялык системалар менен иштейт жана аны Node.jsге оңой эле орнотсо болот. иш процесси, башкача айтканда, Sassдагы кодго өзгөртүүлөрдү киргизүү жана аларды автоматтык түрдө CSSге которуу.

5 версиясынан Foundation 6.0 версиясына өтүү менен ZURB дагы бир жолу бүт алкактын файлдын көлөмүн азайтты: 60 КБ CSS жана 84 КБ JavaScript менен Фонддун репутациясына ээ. эң жөнөкөйлөштүрүлгөн өнүктүрүү платформаларынын бири жана бар экенин оку. Жогоруда айтылган модулдук түзүлүштүн жана өзгөчөлөштүрүүнүн белгилүү бир эркиндигинин аркасында сиз алкактын көлөмүн андан ары азайта аласыз. ийкемдүү Grid жана ар түрдүү менен айкалышта касиеттериARIA (мисалы, эффективдүү клавиатуранын транспозициясы үчүн) ZURB тарабынан ишке ашырылган, ар кандай платформаларда жана түзмөктөрдө шайкеш келген веб-долбоорду ишке ашыруу үчүн зарыл болгон негизги шарттар толугу менен канааттандырылган деп эсептесе болот. ARIA атрибуттары эң жакшы документтештирилген жана сиз веб-сайтыңыздын жеткиликтүүлүгүн оптималдаштырууну каалаган жерде жеткиликтүү.

Эгер сиз алкактын Sass версиясы менен иштесеңиз, сиз киргизген дизайн элементтерин жана макеттерди конфигурациялоо үчүн параметрлериңизди кеңейткениңизди текшериңиз. Бул атайын стилдик баракчаларды колдонуу жаңы баштагандар үчүн оңой эмес жана белгилүү бир окуу мезгилин талап кылат, бул жалпысынан платформа үчүн да туура. Мен дагы'тышкы компоненттердин интеграциясы, ошондой эле башка алкагында же CMSде модулдар жана Foundation долбоорлору абдан татаал. ZURB Фондунун Twitter Bootstrap сыяктуу башка CSS алкактары менен салыштырганда көрсөткөн кичинекей алсыз жактары - бул шаблондордун ар түрдүүлүгү жана Internet Explorerдин эски версияларын колдоонун жоктугу.

ZURB Foundation иштеп чыгуучуларды биринчи прототиптен колдонууга даяр веб-сайтка чейин коштоп жүрөт жана баарынан мурда өзүнүн өзгөчөлүгү менен мүнөздөлөт. натыйжа. Эгер кээ бир компоненттер ашыкча деп тапсаңыз, башка элементтердин иштөөсүнө таасир этпестен, аларды тандоодон чыгаруу мүмкүнчүлүгүңүз бар. Жыйынтыктап айтканда, CSS алкагы ZURB "Mobile First" тарабынан шайланган лейтмотивди баса белгилеген өзгөчө ичке код менен мүнөздөлөт. менен бирге абдан ийкемдүү Grid системасы, сиз каалаган Sass менен ыңгайлаша аласыз, алкак иштеп чыгуу үчүн идеалдуу жооп берүүчү алдыңкы бөлүк маалыматтарды жүктөөдө жогорку ылдамдыкка жана чоң жеткиликтүүлүккө ээ болуу, ошондой эле ар кандай экран өлчөмдөрүнө ыңгайлашуу артыкчылыгы бар.

Сиз ошондой эле ZURB алкагын жекелештирилген жана балким татаалыраак веб-долбоорлорду түзүү үчүн колдонсоңуз болот, бирок бул энергиянын ашыкча жүктөлүшүнө байланыштуу жана үзүндүлөрдү жакшы түшүнүүнү талап кылат.