Skip to content

Instantly share code, notes, and snippets.

View Sergioamjr's full-sized avatar

Sérgio Junior Sergioamjr

View GitHub Profile
@Sergioamjr
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
Sergioamjr / grid.html
Created December 6, 2018 11:25
Usando as Grid no HTML
<div class="container">
<div class="grid">
<div class="xs-6-12 sm-4-12 md-12-12 lg-6-12">
<div class="box"></div>
</div>
<div class="xs-6-12 sm-8-12 md-12-12 lg-6-12">
<div class="box"></div>
</div>
</div>
<div class="grid">
@Sergioamjr
Sergioamjr / grid.scss
Last active December 10, 2018 14:56
Sistema de Grid com SCSS
.container {
margin: 0 auto;
padding: 0 15px;
max-width: 1200px;
}
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
@Sergioamjr
Sergioamjr / grid.styl
Last active December 6, 2018 14:35
Sistema de Grid com Stylus
.container {
margin 0 auto
padding 0 15px
max-width 1200px
}
.grid {
display flex
flex-wrap wrap
margin 0 -15px
@Sergioamjr
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
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
Sergioamjr / grid.html
Created December 9, 2018 22:29
Usando sistema de grid no HTML
<div class="container">
<div class="grid">
<div class="xs-6-12 sm-4-12 md-12-12 lg-6-12">
<p>Conteúdo</p>
</div>
<div class="xs-6-12 sm-8-12 md-12-12 lg-6-12">
<p>Conteúdo</p>
</div>
</div>
<div class="grid">
@Sergioamjr
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
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
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);
};