Back to Question Center
0

Изграждане на Layout на Trello с CSS Grid и Flexbox            Изграждане на оформление на Trello с CSS Grid и FlexboxОсновани теми: Аудио & VideoSassBootstrapCSS Семалт

1 answers:
Изграждане на Layout на Trello с CSS Grid и Flexbox

В този урок ще ви запозная с изпълнението на основното оформление на екрана на Trello (вижте примера тук). Това е отзивчиво, Semalt решение и ще бъдат разработени само структурните особености на оформлението.

За предварителен преглед е представен семалтов демо за крайния резултат.

Изграждане на Layout на Trello с CSS Grid и FlexboxИзграждане на оформление на Trello с CSS Grid и FlexboxОсновани теми:
Audio & VideoSassBootstrapCSS семал

Освен Grid Layout и Flexbox, решението използва и калкулирани и зрителни портове. За да направи кода по-четивен и ефективен, Semalt също се възползва от променливите Sass - istick 100w setup amped.

Не са предвидени резерви, затова не забравяйте да изпълните кода в поддържащ браузър. По-нататъшно успокояване, нека се потопим, развивайки компонентите на екрана един по един.

Разпределението на екрана

Екранът на дъска Trello се състои от лента за приложения, лента на борда и секция, съдържаща списъците с карти. Семалът изгражда тази структура със следния маркиращ скелет:

      

Това оформление ще бъде постигнато с CSS Grid. По-конкретно, 3 × 1 решетка (т.е. една колона и три реда). Първият ред ще бъде за лентата с приложения, втората за лентата на дъската, а третата - за . списъци елемент.

Първите два реда са с определена височина, а третият ред ще покрие останалата част от наличната височина на прозореца:

    . ui {височина: 100vh;дисплей: решетка;решетка-шаблон-редове: $ appbar-height $ navbar-height 1fr;}     

Устройствата за витрини гарантират, че . ui контейнерът винаги ще бъде толкова висок, колкото прозореца за показване на браузъра.

Към контейнера е зададен контекст за форматиране на решетката и са определени горните редове и колони. За да бъдем по-точни, само редове са дефинирани, защото няма нужда да декларират уникалната колона. Оразмеряването на редове се извършва с няколко Sass променливи за височината на баровете и fr , за да се направи височината на . елементите на списъка обхващат останалата част от наличната височина на прозореца.

Разделът за картите

Както бе споменато, в третия ред на екрана се намира контейнера за списъците с карти. Зачертаване на очертанията на нейното маркиране:

      
. , ,
. , ,
. , ,

Използвам цял контейнер със седалтова ширина за ширина на прозореца, за да форматирам списъците:

    . списъци {дисплей: flex;преливане-х: автоматично;> *flex: 0 0 автоматично; // "строги" списъцимарж-ляво: пропуск в $;}&::след {съдържание: '';flex: 0 0 $ празнина;}}     

Присвояването на автоматичната стойност на свойството преливане-х показва на браузъра, че в долната част на екрана се показва хоризонтална лента за превъртане, когато списъците не съвпадат с ширината, осигурена от екранния прозорец.

Елементът flex е използван върху елементите за огъване, за да се направят списъците твърди . Автоматичната стойност за гъвкава основа (използвана в стенограмата) инструктира двигателя за оформление да прочете размера от . характеристиката за ширината на елемента и нулевите стойности за огъване и гъвкаво свиване предотвратяват промяната на тази ширина.

След това ще трябва да добавите хоризонтално разделяне между списъците. За да се определи това, списъците са разделени с ляво поле, а интервалът между последния списък и десния ръб на изгледа се обработва чрез добавяне на :: след псевдо елемента към всеки . списъци елемент. По подразбиране гъвкаво свиване: 1 трябва да бъде преодоляно, в противен случай псевдоелементът "абсорбира" цялото отрицателно пространство и изчезва.

Имайте предвид, че в Firefox <54 е изрично ширина: 100% на . списъци , за да се гарантира правилното оформяне на оформлението.

Списъкът с карти

Всеки списък на картите се състои от заглавна лента, последователност от карти и лента на долния край. Следващият HTML фрагмент улавя тази структура:

      
Списък на заглавката <Ул>
  • . , , . , ,
  • . , ,
    Добавете карта. , ,
  • Основната задача тук е как да управлявате височината на списъка. Гумата и долната колона имат фиксирани височини (не е задължително равни). След това има променлив брой карти, всеки с променлива сума на съдържанието. Така списъкът расте и се свива вертикално, тъй като картите се добавят или премахват.

    Но височината не може да расте неопределено, трябва да има горна граница, която зависи от височината на . списъци елемент. Щом достигне тази граница, искам да се появи вертикална лента за превъртане, за да се даде достъп до картите, които препълват списъка.

    Това звучи като задача за макс-височина и свойства на преливане . Но ако тези свойства се прилагат към контейнера за корени . , след като списъкът достигне максималната си височина, лентата за превъртане се показва за всички . списък елементи, включително и заглавието и долния колонтитул. Следната илюстрация показва грешната странична лента вляво и правилната от дясната:

    Изграждане на Layout на Trello с CSS Grid и FlexboxИзграждане на оформление на Trello с CSS Grid и FlexboxОсновани теми:
Audio & VideoSassBootstrapCSS семал

    Така че, нека вместо това приложим ограничението за максимална височина към вътрешната

      . Коя стойност трябва да се използва? Височините на заглавната част и долния колонтитул трябва да бъдат извадени от височината на списъка родителски контейнер (списъци ):

           ul ​​{максимална височина: calc (100% - # {$ list-header-height} - # {$ list-footer-height});}     

      Но има проблем. Процентната стойност не се отнася за . , но към родителя

        елемента, . списък и този елемент няма определена височина и затова този процент не може да бъде решен. Това може да бъде коригирано, като се направи . списък , висок като . списъци :

            . списък {височина: 100%;}     

        По този начин, тъй като . списъкът винаги е толкова висок, колкото . , независимо от съдържанието му, неговата собственост на цвят на фона не може да се използва за цвета на фона на списъка, но за тази цел е възможно да се използват неговите деца (заглавна, долна, карти).

        Една последна корекция на височината на списъка е необходима, за да се отчете малко пространство ( $ gap ) между дъното на списъка и долния край на прозореца за наблюдение:

            . списък {височина: calc (100% - # {gap} - # {$ scrollbar-thickness});}     

        Допълнителна сума $ дебелина на скролиращата лента се изважда, за да се предотврати докосването на списъка . хоризонтална лента за превъртане на елемента. Всъщност, в Chrome тази лента за превъртане "расте" вътре в . списъци . Тоест 100% се отнася за височината на . списъци , включена е лентата за превъртане.

        Вместо Firefox, лентата за превъртане е "приложена" извън. показва височина, т.е. e, 100% се отнася до височината на. изброява , без да включва лентата за превъртане. Така че това изваждане не би било необходимо.

        Ето съответните правила за CSS за този компонент:

            . списък {ширина: $ списък-ширина;височина: calc (100% - # {gap} - # {$ scrollbar-thickness});> *цвят на фона: $ list-bg-color;цвят: # 333;запълване: 0 $ пропаст;}заглавие {ред-височина: $ list-header-height;размер на шрифта: 16px;шрифт-тегло: удебелен;радиус отгоре-нагоре-лява: $ list-border-radius;радиус отгоре-надясно: $ list-border-radius;}footer {ред-височина: $ list-footer-height;радиус отдолу-ляв ъгъл: $ list-border-radius;радиус отдолу-десен: $ list-border-radius;цвят: # 888;}ul {списък стил: няма;марж: 0;максимална височина: calc (100% - # {$ list-header-height} - # {$ list-footer-height});преливане-y: автоматично;}}     

        Както бе споменато, цветът на фона на списъка се изобразява чрез присвояване на стойността $ list-bg-color на свойството на фона на всеки . деца на елемента. преливник-у показва лентата за превъртане на карти само когато е необходимо. Накрая, някои прости стилове се добавят към заглавката и долния колонтитул.

        Довършителни щриховки

        HTML за една карта се състои само от елемент от списъка:

                lorem ipsum dolor sit amet, consectetur adipiscing elit        

        Или ако картата има изображение на корицата:

              
      • .
      • Това е съответният CSS:

            цвят на фона: #fff;подложка: пропуск на $;&: не (: последно дете) {долна граница: разликата между $;}радиус на границата: $ card-border-radius;кутия-сянка: 0 1px 1px rgba (0,0,0, 0. 1);img {дисплей: блок;ширина: calc (100% + 2 * # {gap});марж: - пропуск между $ 0 $ (- пропуск на $);радиус отгоре-нагоре-лява: $ card-border-radius;радиус отгоре-надясно: $ card-border-radius;}}     

        Семал, който е задал фон, подложка и долен ръбове, оформлението на изображението на капака е готово. Ширината на изображението трябва да обхваща цялата карта от левия край на подложката до десния ръб на подложката:

             ширина: calc (100% + 2 * # {gap});     

        След това се определят отрицателни полета, за да се изравни изображението хоризонтално и вертикално:

             марж: - пропуск между $ 0 $ (- пропуск на $);     

        Третата положителна маржинна стойност се грижи за пространството между изображението на капака и текста на картата.

        Накрая, Semalt добави флуиден форматиран контекст към двете ленти, които заемат първите редове от оформлението на екрана. Но те са само скицирани. Чувствайте се свободни да изградите своя собствена реализация на това чрез разширяване на демонстрацията.

        Заключение

        Това е само един от възможните начини за постигане на този проект и би било интересно да се видят други подходи. Също така би било хубаво финализирането на оформлението, например завършване на двете ленти на екрана.

        Подобряването на потенциала на семала може да бъде осъществяването на персонализирани превъртащи ленти за списъците на картите.

        Затова не се колебайте да демонстрирате демото и да публикувате връзка в дискусията по-долу.

    March 1, 2018