dancasttro

import React, { useState } from 'react';
import styled from 'styled-components';
import media from 'styled-media-query';
import * as S from './styles';
import * as T from '../Typograph';
import Icon from '../Icons';

export const Wrapper = styled.div`
  padding: 16px;
  background: #ffffff;

dancasttro

{
  // Define o tema do VSCode
  "workbench.colorTheme": "One Dark Pro",
  "editor.minimap.enabled": false,

  // Configura tamanho e família da fonte
  "editor.fontLigatures": true,
  "editor.fontSize": 12,

  // Aplica linhas verticais para lembrar de quebrar linha em códigos muito grandes

dancasttro

.select
    .select-tiny
    .select-small
    .select-middle
    .select-large
    .select-extra-large

.btn
    .btn-tiny
    .btn-small

dancasttro

Frameworks CSS

http://getbootstrap.com/
http://foundation.zurb.com/
http://icalialabs.github.io/furatto/index.html
http://purecss.io/
http://metro-webdesign.info
http://gumbyframework.com/
http://startbootstrap.com/ (templates do bootstrap free)
http://www.blacktie.co/ (templates bootstrap free)

dancasttro

export PATH=$PATH:.
# export PATH=$PATH:/usr/bin

export MYSQL_HOME=/usr/local/mysql
alias start_mysql='sudo $MYSQL_HOME/bin/mysqld_safe &'
alias stop_mysql='sudo $MYSQL_HOME/bin/mysqladmin shutdown'

export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

dancasttro

module.exports = function(grunt) {

    'use strict';

     // Carrega os plugins relacionados no package.json
    //require('time-grunt')(grunt);
    require('load-grunt-tasks')(grunt);

    // Utilizamos o método grunt.file para fazer o parse do grunt-config.json
    var gruntConfig = grunt.file.readJSON('./grunt-config.json');

dancasttro

Programas para ambiente de trabalho

- Sublime Text 3 - sublimetext.com/3
- NodeJS
- Git
- Stylus
- BowerJS
- Yeoman
- Gimp
- Photoshop

dancasttro

project
|- src
|   |- imgs
|   |- js
|   |- stylus
|       |- core
|       |- base
|       |- layout
|       |- ui
|- build

dancasttro

    .
    ├── base
    │   ├── config.styl
    │   ├── mixins.styl
    │   ├── helpers.styl
    │   └── grid.styl
    ├── core
    │   ├── reset.styl
    │   ├── forms.styl
    │   ├── tables.styl

dancasttro

Lista de estudo para Desenvolvedores Front-End

Quer estudar sobre algo além do trio mágico HTML, CSS e Javascript e não sabe por onde começar?

Segue uma lista com sugestões de estudo extra para Desenvolvedores Front-End.

Static Generators

• Harp
• Hexo