Skip to content

Instantly share code, notes, and snippets.

View clovisdasilvaneto's full-sized avatar
👋
Hey hey, nice to "git-meet" you

Clóvis Neto clovisdasilvaneto

👋
Hey hey, nice to "git-meet" you
View GitHub Profile
@clovisdasilvaneto
clovisdasilvaneto / react-stateless-component-template.js
Created December 31, 2017 19:14 — forked from jim-at-jibba/react-stateless-component-template.js
React Stateless Component Webstorm/PHPStorm File Template
import React, { PropTypes } from 'react';
const $NAME = (props) => {
return (
$END
);
}
$NAME .propTypes = {
// myProp: PropTypes.string.isRequired

Como escrever seu CSS para projetos mobile-first

Rápido e fácil (Garanto!)

Desenvolver sites responsivos hoje em dia é requisito para desenvolvedores front-end, quando falamos em responsivo você logo lembra em Mobile-first mesmo nunca tendo feito um projeto usando a abordagem. A algum tempo venho lendo, estudando e testando o conceito mobile-first, mas na grande maioria os artigos e exemplos que vejo, abordam como desenvolver site ou aplicação web em relação a planejamento e design, não falam sobre codificação para o mobile-first, mas agora este artigo vai mostra a você como pensar seu código CSS para mobile.

Conceito Mobile-first para CSS

Quando você usa o conceito mobile-first para fazer seu estilo CSS significa dizer que os estilos são aplicados primeiro para dispositivos moveis, só então são aplicados substituições, estilo avançados e consultas de media queries para telas maiores. No mobile-first styling você utiliza a propriedade min-width nas consultas de media queries. “Nos exemplos vou