Template com CSS Grid - #6 Responsividade II

Nesse tutorial continuaremos a trabalhar com responsividade usando CSS Grid para adequar a nossa aplicação as diferentes resoluções.

Como usar CSS Grid para responsividade?

lib/css/style.css

Vamos continuar incrementando a nossa media-query de 480px:

.slide{
    display:grid;
    position:relative;
    grid-template-columns: 100%;
    grid-template-areas:
            "slide__foto"
    ;
}
.slide__foto{grid-area:slide__foto;}
.slide__foto img{vertical-align: middle; border-radius: 10px;}
.slide__text {position:absolute;width:100%;padding: 15px 10px;bottom:0;font-weight: 900;color:#fff;font-size: 22px;background: rgba(0,0,0,0.7);}
.slide__text p{display:none;}
.slide__thumb{display:none;}

.container-news{display:grid;margin-top: 30px;grid-row-gap: 30px;}

.news {
    display: grid;
    grid-template-columns: 30% 65%;
    justify-content: space-between;
    line-height: 30px;
    align-items: center;
    grid-template-areas:
        "news__img news__text"
        "news__img news__comment"
    ;
}
.news__img{grid-area: news__img;}
.news__text{grid-area: news__text;}
.news__text strong{font-weight: 900;}
.news__text p{display:none;}
.news__comment{grid-area: news__comment; text-align: center;}

aside{display:none;}

footer{
    grid-area: footer;
    box-shadow: 0 10px 20px #ccc;
    background: #eee;
    padding: 20px 0;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    margin: 30px -5% -10px -5%;
}

lib/js/javascript.js

Iremos criar o arquivo javascript.js dentro de lib/js. Esse arquivo será responsável pelo código de acionamento do botão mobile:

(function(win,doc){
    "use strict";

    let button=doc.querySelector('.button');
    function toggleMenu()
    {
        if(this.dataset.action == 'close'){
           this.removeAttribute('data-action');
            doc.querySelector('nav').style.display='none';
        }else{
            this.dataset.action='close';
            doc.querySelector('nav').style.display='block';
        }
    }
    button.addEventListener('click',toggleMenu,false);
})(window, document);

index.html

No nosso arquivo de marcação index.html vamos linkar o javascript recém criado:

<script src="./lib/js/javascript.js"></script>

Por hoje é só! Sucesso nos códigos e na vida!

Está cheio de dúvidas? Aulas particulares: webdesignemfoco@gmail.com