Temos um modelo de como queremos que nossas zonas BuySellAds se pareçam, então vamos começar a construí-lo de verdade. O site BuySellAds fornece o código que precisamos colocar em nosso site para que os anúncios sejam exibidos. Nós copiamos e colamos isso.
Tentamos desligar o CSS que a BSA injeta no site para estilizá-lo (porque nós mesmos cuidaremos disso), mas, infelizmente, se desligarmos agora, ele afetará o site ao vivo também, então temos que lutar apenas contra o injetado CSS por enquanto.
Passamos o resto do tempo posicionando e estilizando os anúncios para que apareçam como queremos. É muito fácil, pois já temos tantas opções, como mixins para pilhas de fontes e cores e outros enfeites.
Nós nos deparamos com algo que encontramos várias vezes nesta série, onde seria legal @extend
uma classe que só existe em outro arquivo, o que infelizmente você não pode fazer. Neste exemplo, estamos tentando fazer um div injetado com BSA com o mesmo estilo .module
, que é um caso clássico para extend, mas, infelizmente, temos que copiar e colar alguns estilos.
Pensamos sobre o flexbox nos ajudar aqui, mas decidimos que é muito cedo para isso. Isso tornaria o layout mais fácil e também nos proporcionaria alturas iguais. Bem, vamos colocá-lo na lista de desejos do futuro.