Bubblegum é uma biblioteca CSS feita pra ajudar os frontenders a encaixarem o layout com mais precisão e sem bagunçar o seu código. São simples classes com nomes como mt_10, que adiciona margin-top:10px!important ao seu elemento. Desta forma, os desenvolvedores tem sempre uma maneira mais refinada e menos suja de adaptar os recursos do seu framework ao layout proposto e sem haver necessidade de criar novas classes para cada elemento.
Importe a biblioteca copiando no header da sua página, a seguinte chamada:
Use o m para representar a margin ou o p para representar o padding. Para definir a posição, use o t para top, r para right, b para bottom, l para left ou deixe este parâmetro vazio para que aplique a configurção em todas as posições. A orientação é definida pelo _ para representar o acréscimo ou - para representar o decréscimo, lemrando que não se aplica medidas negativas à configuração de padding. O valor é o último parâmetro. Entre 1 e 5, sobem de 1 em 1. De 5 até 20, sobem de 5 em 5. De 20 até 50, sobem de 10 em 10. De 50 a 150, sobem de 50 em 50.
| Nome da classe | Propriedade |
|---|---|
| .m_0 | margin:0!important; |
| .mt_0 | margin-top:0!important; |
| .mb_0 | margin-bottom:0!important; |
| .ml_0 | margin-left:0!important; |
| .mr_0 | margin-right:0!important; |
| .p_0 | padding:0!important; |
| .pt_0 | padding-top:0!important; |
| .pb_0 | padding-bottom:0!important; |
| .pl_0 | padding-left:0!important; |
| .pr_0 | padding-right:0!important; |
| .m_1 | margin:1px!important; |
| .mt_1 | margin-top:1px!important; |
| .mb_1 | margin-bottom:1px!important; |
| .ml_1 | margin-left:1px!important; |
| .mr_1 | margin-right:1px!important; |
| .p_1 | padding:1px!important; |
| .pt_1 | padding-top:1px!important; |
| .pb_1 | padding-bottom:1px!important; |
| .pl_1 | padding-left:1px!important; |
| .pr_1 | padding-right:1px!important; |
| .m_2 | margin:2px!important; |
| .mt_2 | margin-top:2px!important; |
| .mb_2 | margin-bottom:2px!important; |
| .ml_2 | margin-left:2px!important; |
| .mr_2 | margin-right:2px!important; |
| .p_2 | padding:2px!important; |
| .pt_2 | padding-top:2px!important; |
| .pb_2 | padding-bottom:2px!important; |
| .pl_2 | padding-left:2px!important; |
| .pr_2 | padding-right:2px!important; |
| .m_3 | margin:3px!important; |
| .mt_3 | margin-top:3px!important; |
| .mb_3 | margin-bottom:3px!important; |
| .ml_3 | margin-left:3px!important; |
| .mr_3 | margin-right:3px!important; |
| .p_3 | padding:3px!important; |
| .pt_3 | padding-top:3px!important; |
| .pb_3 | padding-bottom:3px!important; |
| .pl_3 | padding-left:3px!important; |
| .pr_3 | padding-right:3px!important; |
| .m_4 | margin:4px!important; |
| .mt_4 | margin-top:4px!important; |
| .mb_4 | margin-bottom:4px!important; |
| .ml_4 | margin-left:4px!important; |
| .mr_4 | margin-right:4px!important; |
| .p_4 | padding:4px!important; |
| .pt_4 | padding-top:4px!important; |
| .pb_4 | padding-bottom:4px!important; |
| .pl_4 | padding-left:4px!important; |
| .pr_4 | padding-right:4px!important; |
| .m_5 | margin:5px!important; |
| .mt_5 | margin-top:5px!important; |
| .mb_5 | margin-bottom:5px!important; |
| .ml_5 | margin-left:5px!important; |
| .mr_5 | margin-right:5px!important; |
| .p_5 | padding:5px!important; |
| .pt_5 | padding-top:5px!important; |
| .pb_5 | padding-bottom:5px!important; |
| .pl_5 | padding-left:5px!important; |
| .pr_5 | padding-right:5px!important; |
| .m_10 | margin:10px!important; |
| .mt_10 | margin-top:10px!important; |
| .mb_10 | margin-bottom:10px!important; |
| .ml_10 | margin-left:10px!important; |
| .mr_10 | margin-right:10px!important; |
| .p_10 | padding:10px!important; |
| .pt_10 | padding-top:10px!important; |
| .pb_10 | padding-bottom:10px!important; |
| .pl_10 | padding-left:10px!important; |
| .pr_10 | padding-right:10px!important; |
| .m_15 | margin:15px!important; |
| .mt_15 | margin-top:15px!important; |
| .mb_15 | margin-bottom:15px!important; |
| .ml_15 | margin-left:15px!important; |
| .mr_15 | margin-right:15px!important; |
| .p_15 | padding:15px!important; |
| .pt_15 | padding-top:15px!important; |
| .pb_15 | padding-bottom:15px!important; |
| .pl_15 | padding-left:15px!important; |
| .pr_15 | padding-right:15px!important; |
| .m_20 | margin:20px!important; |
| .mt_20 | margin-top:20px!important; |
| .mb_20 | margin-bottom:20px!important; |
| .ml_20 | margin-left:20px!important; |
| .mr_20 | margin-right:20px!important; |
| .p_20 | padding:20px!important; |
| .pt_20 | padding-top:20px!important; |
| .pb_20 | padding-bottom:20px!important; |
| .pl_20 | padding-left:20px!important; |
| .pr_20 | padding-right:20px!important; |
| .m_30 | margin:30px!important; |
| .mt_30 | margin-top:30px!important; |
| .mb_30 | margin-bottom:30px!important; |
| .ml_30 | margin-left:30px!important; |
| .mr_30 | margin-right:30px!important; |
| .p_30 | padding:30px!important; |
| .pt_30 | padding-top:30px!important; |
| .pb_30 | padding-bottom:30px!important; |
| .pl_30 | padding-left:30px!important; |
| .pr_30 | padding-right:30px!important; |
| .m_40 | margin:40px!important; |
| .mt_40 | margin-top:40px!important; |
| .mb_40 | margin-bottom:40px!important; |
| .ml_40 | margin-left:40px!important; |
| .mr_40 | margin-right:40px!important; |
| .p_40 | padding:40px!important; |
| .pt_40 | padding-top:40px!important; |
| .pb_40 | padding-bottom:40px!important; |
| .pl_40 | padding-left:40px!important; |
| .pr_40 | padding-right:40px!important; |
| .m_50 | margin:50px!important; |
| .mt_50 | margin-top:50px!important; |
| .mb_50 | margin-bottom:50px!important; |
| .ml_50 | margin-left:50px!important; |
| .mr_50 | margin-right:50px!important; |
| .p_50 | padding:50px!important; |
| .pt_50 | padding-top:50px!important; |
| .pb_50 | padding-bottom:50px!important; |
| .pl_50 | padding-left:50px!important; |
| .pr_50 | padding-right:50px!important; |
| .m_100 | margin:100px!important; |
| .mt_100 | margin-top:100px!important; |
| .mb_100 | margin-bottom:100px!important; |
| .ml_100 | margin-left:100px!important; |
| .mr_100 | margin-right:100px!important; |
| .p_100 | padding:100px!important; |
| .pt_100 | padding-top:100px!important; |
| .pb_100 | padding-bottom:100px!important; |
| .pl_100 | padding-left:100px!important; |
| .pr_100 | padding-right:100px!important; |
| .m_150 | margin:150px!important; |
| .mt_150 | margin-top:150px!important; |
| .mb_150 | margin-bottom:150px!important; |
| .ml_150 | margin-left:150px!important; |
| .mr_150 | margin-right:150px!important; |
| .p_150 | padding:150px!important; |
| .pt_150 | padding-top:150px!important; |
| .pb_150 | padding-bottom:150px!important; |
| .pl_150 | padding-left:150px!important; |
| .pr_150 | padding-right:150px!important; |
| .m-1 | margin:-1px!important; |
| .mt-1 | margin-top:-1px!important; |
| .mb-1 | margin-bottom:-1px!important; |
| .ml-1 | margin-left:-1px!important; |
| .mr-1 | margin-right:-1px!important; |
| .m-2 | margin:-2px!important; |
| .mt-2 | margin-top:-2px!important; |
| .mb-2 | margin-bottom:-2px!important; |
| .ml-2 | margin-left:-2px!important; |
| .mr-2 | margin-right:-2px!important; |
| .m-3 | margin:-3px!important; |
| .mt-3 | margin-top:-3px!important; |
| .mb-3 | margin-bottom:-3px!important; |
| .ml-3 | margin-left:-3px!important; |
| .mr-3 | margin-right:-3px!important; |
| .m-4 | margin:-4px!important; |
| .mt-4 | margin-top:-4px!important; |
| .mb-4 | margin-bottom:-4px!important; |
| .ml-4 | margin-left:-4px!important; |
| .mr-4 | margin-right:-4px!important; |
| .m-5 | margin:-5px!important; |
| .mt-5 | margin-top:-5px!important; |
| .mb-5 | margin-bottom:-5px!important; |
| .ml-5 | margin-left:-5px!important; |
| .mr-5 | margin-right:-5px!important; |
| .m-10 | margin:-10px!important; |
| .mt-10 | margin-top:-10px!important; |
| .mb-10 | margin-bottom:-10px!important; |
| .ml-10 | margin-left:-10px!important; |
| .mr-10 | margin-right:-10px!important; |
| .m-15 | margin:-15px!important; |
| .mt-15 | margin-top:-15px!important; |
| .mb-15 | margin-bottom:-15px!important; |
| .ml-15 | margin-left:-15px!important; |
| .mr-15 | margin-right:-15px!important; |
| .m-20 | margin:-20px!important; |
| .mt-20 | margin-top:-20px!important; |
| .mb-20 | margin-bottom:-20px!important; |
| .ml-20 | margin-left:-20px!important; |
| .mr-20 | margin-right:-20px!important; |
| .m-30 | margin:-30px!important; |
| .mt-30 | margin-top:-30px!important; |
| .mb-30 | margin-bottom:-30px!important; |
| .ml-30 | margin-left:-30px!important; |
| .mr-30 | margin-right:-30px!important; |
| .m-40 | margin:-40px!important; |
| .mt-40 | margin-top:-40px!important; |
| .mb-40 | margin-bottom:-40px!important; |
| .ml-40 | margin-left:-40px!important; |
| .mr-40 | margin-right:-40px!important; |
| .m-50 | margin:-50px!important; |
| .mt-50 | margin-top:-50px!important; |
| .mb-50 | margin-bottom:-50px!important; |
| .ml-50 | margin-left:-50px!important; |
| .mr-50 | margin-right:-50px!important; |
| .m-100 | margin:-100px!important; |
| .mt-100 | margin-top:-100px!important; |
| .mb-100 | margin-bottom:-100px!important; |
| .ml-100 | margin-left:-100px!important; |
| .mr-100 | margin-right:-100px!important; |
| .m-150 | margin:-150px!important; |
| .mt-150 | margin-top:-150px!important; |
| .mb-150 | margin-bottom:-150px!important; |
| .ml-150 | margin-left:-150px!important; |
| .mr-150 | margin-right:-150px!important; |