Sérgio Junior Sergioamjr

Front End Developer

Sergioamjr / grid.css

Last active December 9, 2018 23:40

Sistema de Grid com CSS Puro

	.container {
	margin: 0 auto; /* Centraliza o site na tela */
	padding: 0 15px; /* Espaçamento na lateral */
	max-width: 1200px; /* Largura máxima do container */
	}

	.grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px; /* Necessário para tirar o espaçamento na lateral do container e das grids */

Sergioamjr / grid.html

Created December 6, 2018 11:25

Usando as Grid no HTML

Sergioamjr / grid.scss

Last active December 10, 2018 14:56

Sistema de Grid com SCSS

Sergioamjr / grid.styl

Last active December 6, 2018 14:35

Sistema de Grid com Stylus

Sergioamjr / styled-component-grid.jsx

Last active December 9, 2018 22:22

Sistema de Grid com Styled-components

	import styled from 'styled-components'

	export const Container = styled.div`
	margin: 0 auto;
	padding: 0 15px;
	max-width: 1200px;
	`;

	export const Grid = styled.div`
	display: flex;

Sergioamjr / react.jsx

Last active December 6, 2018 11:37

Utilizando sistema de Grid com Styled Component no React

	import { Container, Grid, Column } from './PATH/styled-component-grid.jsx'

	class App extends Component {
	render() {
	return(
	<Container>
	<Grid>
	<Column xs={4} md={6} lg={3}>
	<Box />
	</Column>

Sergioamjr / grid.html

Created December 9, 2018 22:29

Usando sistema de grid no HTML

Sergioamjr / UseReducerComponent.js

Last active December 28, 2018 01:45

useReducer example from React Hooks

	import React, { useReducer } from "react";

	function reducer(state, action) {
	switch (action) {
	case "add":
	return { count: state.count + 1 };
	case "sub":
	return { count: state.count - 1 };
	default:
	return state;

Sergioamjr / ComponentWithUseState.js

Last active December 28, 2018 02:02

useState example from React Hooks

	import React, { useState } from "react";

	function ComponentWithUseState() {
	//states independentes
	const [name, setName] = useState('');
	const [age, setAge] = useState('');

	//único state com várias propriedades
	const [address, setAddress] = useState({street: '', city: ''})

Sergioamjr / ComponentWithUseEffect.js

Created December 28, 2018 02:12

useEffect example from React Hooks

	import React, { useState, useEffect } from "react";

	function ComponentWithUseEffect() {
	const [screenWidth, setScreenWidth] = useState(0);

	const updateScreenWidth = () => {
	const currentScreenWidth = window.innerWidth;
	setScreenWidth(currentScreenWidth);
	};