Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

codercss

Base boa de CSS para início de projecto

Recommended Posts

Olá a todos,

 

Ainda estou a dar os primeiro passos no CSS...ainda! :P

Procuro uma base de trabalho, forte, em grid (responsive). Algo onde eu posso estar descansado que essa base vai funcionar no maior número de browsers e telefones possíveis. Assim vou criando o meu ambiente css em cima dessa base!

 

A primeira coisa que penso é no bootstrap. Mas para iniciantes, é o melhor? Existirão outras?

 

Qual base aconselham?

Consegui explicar bem a minha necessidade?

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na minha opinião bootstrap é o mais simples que existe, muito fácil de aprender usar, compatibilidade alta com browsers, responsabilidade nativa também alta (se não 100% ?), é compatível com todos os browsers que eu testei até hoje inclusive mobile.

 

Boostrap -> Site oficial

 

W3Schools -> Tutorias mais fáceis do mundo kk

 

E uma dica de como eu estudei quando comecei a mexer com ele:

 

1 - Baixar templates free (Só nesse link tem vários).

2 - Instalar vários templates com o mesmo projeto.

3 - E verificar um por um quais eram as mudanças que ocorriam no estilo e porque elas ocorriam.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uma coisa que deixa confuso. Por exemplo, neste template: https://startbootstrap.com/template-overviews/new-age/

 

Já tem um monte de coisas...coisas que nunca ouvi falar.

 

https://snag.gy/VxaJWe.jpg

 

Percebo que coisas como less e gulp seja para automatizar trabalho, mas como isso vai influenciar o meu css?

As minha bases são html, css, js e um pouco de php. E git, claro está :) Amo o git!

 

Como faço em relação ao resto?

Não quero que fique a ideia que sou preguiçoso, mas para um iniciante como eu, levar com uma estrutura destas, é dose! :/ (Vejam o anexo s.f. - https://we.tl/HPrISQnxO8 )

 

Obrigado pelas dicas

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@codercss você ja sabe o básico de como incluir dependências via composer em seu projeto ?

 

Caso não saiba como, basta pesquisar no google "como inicar o composer em um projeto". (Pessoalmente acho o composer a melhor coisa pra quem trabalha com PHP)

 

Mas caso queira incluir diretamente, siga esses passos para adicionar o Bootstrap:

 

1 - Baixa o pacote  -> Recomendo essa versão pois ela vem apenas com o esencial(Bootstrap)

 

2 - Crie uma pasta no diretório raiz com o nome 'vendor' (pode ser qualquer outro nome)

 

3 - Abre seu index, e aponte para os arquivos essenciais

 

    JS      ->  <script src="bootstrap/js/bootstrap.min.js"></script>

 

   CSS   -> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 

-----

 

Com esses passos o bootstrap ja vai ser carregado no seu projeto, só verifique corretamente os apontamentos.

 

Agora, a respeito dos outros arquivos do bootstrap, você teoricamente, não precisa deles pra nada, a não ser que queira entender mais a fundo como bootstrap funciona, mas a base total roda somente com os arquivos principais .css e .js.

 

Por fim, pra você entender o template, primeiro entenda os elementos básicos e como funciona a estrutura do bootstrap, você pode por exemplo, entrar no W3Schools e seguir o tutorial elemento por elemento, depois disso você vai entender muito mais fácil o funcionamento dos templates.

 

PS:

Pra você instalar um template, abra o arquivo 'index.html', e verifique no head quais são os arquivos .css inclusos, e verifique (geralmente no footer) quais são os .js incluídos, carregue os arquivos do template no diretório do seu projeto, e aponte para eles com as tags que eu indiquei acima.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Somente complementando,

 

O que você vai precisar são os arquivos do bootstrap, normalmente como o próprio bootstrap fala para instalar e esses arquivos do template, que devem ser incluídos após os arquivos do bootstrap, já que os arquivos do template vão alterar algumas coisas dele.

 

Sobre os arquivos que são disponibilizados no template:

- O que estão nas pastas JS/CSS vão ser usados(são esses que eu falei para colocar depois dos arquivos do bootstrap), para ficar mais fácil, dá uma olhada no arquivo index.html ( https://github.com/BlackrockDigital/startbootstrap-new-age/blob/master/index.html ), ele é a página inicial do modelo do template, tem a estrutura do html com todas as referencias aos .css, .js, divs usadas, etc, muito importante olhar essa página.

 

- O que está na pasta IMG são as imagens

 

- O que está na pasta LIB normalmente são coisas que você vai precisar, mas muito provavelmente você já fez referencia antes, por exemplo jQuery, outros plugins js/css, arquivos de fontes, etc

 

- A pasta LESS, muito provavelmente você não utilizará, a não ser que esteja utilizando algum preprocessador, esses arquivos tem o estilo em um formato que os preprocessadores reconhecem.

 

O que normalmente eu faço é, depois de referenciar todas as coisas de bootstrap, template, jquery, plugin, etc, eu adiciono um arquivo de estilo e de script para alterar alguma coisa que eu ache necessário.

 

Acho que é isso

Compartilhar este post


Link para o post
Compartilhar em outros sites

Também já conhecia o foundation.

Sei que isto é um pouco complidado de responder...mas na vossa opinião, qual framework tem uma comunidade (também em BR) mais forte?

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá!

Recentemente comecei a trabalhar com este editor: https://typora.io/

Adorei o editor, simples, leve e rápido na criação de ficheiros de texto. Utilizo ele no ambiente Linux e estou a gostar bastante da experiência, principalmente na importação de imagens e escrita de código. Uma das coisas que me chateava era o facto de não conseguir escrever código no word.

 

Acontece que este editor também permite exportar para html. Que bom! :)

Existe alguma framework para o typora? Consegui criar um css para todos os ficheiros que crio via o typora. O processo é criar o ficheiro no typora, exportar para html e depois copiar apenas o que está na tag body, pois o resto eu já tenho predefenido.

Este é o melhor caminho?

 

Perceberam o que eu expliquei?

Obrigado

 

[UPDATE ]

Será que isto serve? http://theme.typora.io/doc/Write-Custom-Theme/

Compartilhar este post


Link para o post
Compartilhar em outros sites

@codercss

Na minha opinião usar uma IDE como Netbeans ou Eclipse pra controlar projeto/criar biblioetca/ integrar com framework é uma opção melhor que editores de texto básicos ou minimalistas como o typora ou notepad ++.

 

Esse 'write custom theme' parece ser apenas um estilo de texto pro typora.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não me consigo pronunciar sobre esse tema, pois não tenho expirência em fazer integrações com o netbeans ou eclipse. Já utilizei ambos para java mas nunca para projectos web. Para este tipo de projecto prefiro o sublime text, por sem minimalista!

 

Já testou o typora? Gosta da opção dele de exportar o artigo para html. Estava a pensar integrar esse ficheiro, que ele exporta para html no site! Procuro um backend bonito e prático para escrever artigos. Já pensei no wordpress mas chateia ter que instalar um monte de coisas apenas para escrever 1500 letras e adicionar umas imagens.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por FabianoSouza
      Gente, tenho as TRs da minha tabele já com os cantos arredondados (através das TDs first-child e last-child). Fiz dessa forma porque desconheço uma maneira de aplicar radius diretamente na TR.
       
      O problema é que ao colorir a TR com o over do CSS, perde-se a formatação do border radius das TDs e exibe a TR com os cantos quadrados.
       
      Preciso que os cantos fiquem arredondados mesmo ao passar o mouse sobre a TR.
       
      Como resolvo isso?
    • Por viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.