Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Tem exemplos de páginas criadas nessa framework?
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.
@codercss, fico com a mesma sugestão do @AnthraxisBR
Usa o Bootstrap, muita gente usa, é quase referência de mercado, você vai encontrar muita ajuda e o "caminho da pedras" já foi trilhado
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.
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
@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](https://www.w3schools.com/bootstrap/) 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.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
Obrigado pessoal, são um espetáculo :)
Vou estudar e durante esta semana partilho mais dúvidas e análises com a comunidade!
Esse é muito bom também
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
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/](http://theme.typora.io/doc/Write-Custom-Theme/)@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.
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.
http://bulma.io/