Home Bem vindo ao SWCSS

Introdução ao SwCss

Bem-vindo ao SwCss, um framework CSS puro, fácil de usar e altamente personalizável, desenvolvido para criar sites incríveis sem a necessidade de JavaScript ou outros frameworks CSS.

O que é o SwCss?

O SwCss é um framework CSS leve e eficiente, que não depende de JavaScript ou bibliotecas externas. Ele oferece uma ampla gama de componentes de UI em Português PT-BR, como barras de navegação, alertas e muito mais, facilitando o desenvolvimento de interfaces modernas e responsivas.

Desbloqueie o poder do flex e flexbox

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, tudo com CSS puro.

Paleta de cores completa

Nossa paleta de cores completa inclui opções de degradê 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

Reduzimos 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 (margem 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ão 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">

    - 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>
                                </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 PX 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!