SWcss Framework CSS

Introdução ao SWcss

Bem-vindo ao SWcss, um framework CSS fácil de usar e personalizável, projetado para ajudá-lo a criar sites incríveis com facilidade.

O que é o SWcss?

O SWcss é construído sobre o popular framework de CSS Bootstrap, e estende sua funcionalidade com recursos e componentes adicionais. Em Português PT-BR, ele inclui uma ampla gama de componentes de UI, como barras de navegação, alertas e muito mais.

Desbloqueie o poder do flex e flexbox

Nós melhoramos o uso de flex e flexbox para que você possa criar layouts complexos e responsivos com facilidade. Com nosso framework, você pode criar designs flexíveis e adaptáveis para qualquer dispositivo.

Paleta de cores completa

Nossa paleta de cores completa inclui opções de degrade e opacidade, permitindo que você personalize seu site com facilidade. Escolha entre uma variedade de cores e estilos para criar um design único e atraente.

Código mais limpo e eficiente

Diminuímos o tamanho das classes para tornar o código mais fácil de ler e manter. Isso significa que você pode se concentrar em criar um site incrível, sem se preocupar com a complexidade do código.

Simplificando a sintaxe

  • ml (margin-left) agora é me (margin esquerda)
  • left, right, top, bottom agora são esquerda, direita, topo e fim
  • l, r, t, b agora são e, d, t, f
  • Cores padrões agora são principal, secundaria, sucesso, alerta, perigo, noturno e claro

Tamanhos de tela

  • Também simplificamos os tamanhos de tela, agora são pp, p, m, g, gg e xg, tornando a linguagem mais amigável em Português.

    • Instalação

    • Baixe o Pacote -
    • Abra e configure ao seu gosto ou inclua nossos links diretos.

    Para Ajustes adicionais o arquivo swcss ajuda a configurar detalhes. 

                          
                        
                        <link rel="stylesheet" href="//swcss.sandroweb.com.br/dist/css/swcss.css">

                        <script type="javascript" src="//swcss.sandroweb.com.br/dist/js/swcss.min.js"></script>

    - Com apenas com estes dois links vc já pode usar o SWCss.

                            
                            
                            <!DOCTYPE html>
                            <html lang="pt-br">
                                <head>
                                    <meta charset="UTF-8">
                                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                    <title>Document</title>
                                    <link rel="stylesheet" href="//swcss.sandroweb.com.br/dist/css/swcss.css">
                                </head>
                                <body>
                                    <script type="javascript" src="//swcss.sandroweb.com.br/dist/js/swcss.min.js"></script>
                                </body>
                            </html>

    Para modificação, altere o arquivo swcss.css. Nele tem o :root definido para modificação direto na raiz.


    Utilizamos o sistema de padronizações do REM em PIX para ajudar no melhor desempenho so sistema.

    Deixamos o fott-size com 62.5%, desta forma os rem fica mais facil de entender: 25px = 2.5rem, 158px = 15.8rem.


    Próximos passos

    Estamos trabalhando para melhorar a acessibilidade do nosso framework e adicionaremos novos recursos e melhorias em breve. Fique ligado para novidades!