CSS Pra Gente Grande

CSSpra gente grande

www.shankarcabus.com.br

Shankar Cabus

Shankar Cabusde Teive

Shankar Cabusde Teive e Argollo

JusBrasil

CSSpra gente

pequena

Sobrinho

JAVASCRIPT

informação e estrutura

JAVASCRIPT

ação e comportamento

JAVASCRIPT

ação e comportamento

estilo e formatação

CSS embeleza e

facilita o uso

CSS é simples

CSS é simplesde entender!

CSS é simplesde entender!mas difícil de

usar e manter!

TUNEL DO

65000000 a.c.

DINOSSÁUROS

17-02-1987

Shankarzinho

17-02-1987

Shankarzinho Isinha

Tim Berners-Lee

HTML 1.0

Seleção Brasileira

Tetra!!!

HTML 2.0imagens

Håkon Lie

HTML 3.0tabelas

CSS 1.0

HTML 3.5

HTML 4.0

Firefox

css 2.0

Chrome

html 5

CSS 3.0

linguagem retardada, armengada

e desorganizada

DIFÍCIL DE MANTER E ESCALAR

Todo CSS começa bem mas você

nunca sabe como vai terminar acabar

COMEÇAR E CONTINUAR

organizado Legível

Componentizado

COMO???

calma…

broken window

disciplina

Chibata

ChibataLei da

bala de prata

SMACSS

BEM DRY CSS

CSS Guidelines

GitHub

CodePen

Medium

TrelloSUIT CSS

bala de prata

SMACSS

BEM DRY CSS

CSS Guidelines

GitHub

CodePen

Medium

TrelloSUIT CSS

Mensagem

Enviar

<div id=“contato”>!! <input id="nome" type=“text”>! <input id="email" type=“text">! <textarea id=“mensagem"></textarea>! <button>Enviar</button>!</div>

Mensagem

Enviar

#contact {! width: 500px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#contact input,!#contact textarea {!! width: 100%;!! border: 1px solid #999;!}!#contact button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: green;!}

Cuidado com os nomes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat?

<div id=“warning”>! <h1>Cuidado com os nomes</h1>! <p>…</p>! <button>OK</button>!</div>

#warning {! width: 400px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#warning h1 {!! font-size: 14px;!! font-weight: bold;!}!#warning button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: blue;!}

Mensagem

EnviarOK

#contact {! width: 500px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#contact input, !#contact textarea {!! width: 100%;!! border: 1px solid #999;!}!#contact button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: green;!}

#warning {! width: 400px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#warning h1 {!! font-size: 14px;!! font-weight: bold;!}!#warning button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: blue;!}

.box {! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!!.button {! float: right;! padding: 5px;! border-radius: 5px;!}

#warning {! width: 400px;!}!#warning h1 {! font-size: 14px;! font-weight: bold;!}!#warning button {! background: blue;!}!!#contact {! width: 500px;!}!#contact input, !#contact textarea {! width: 100%;! border: 1px solid #999;!}!#contact button {! background: green;!}

<div id="contact" class=“box”>!! <input id="nome" type=“text”>! <input id="email" type=“text">! <textarea id=“mensagem"></textarea>! <button class="button">Enviar</button>!</div>

<div id="warning" class=“box”>! <h1>Cuidado com os nomes</h1>! <p>…</p>! <button class="button">OK</button>!</div>

.box {! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!!.button {! float: right;! padding: 5px;! border-radius: 5px;!}

#warning {! width: 400px;!}!#warning h1 {! font-size: 14px;! font-weight: bold;!}!#warning button {! background: blue;!}!!#contact {! width: 500px;!}!#contact input, !#contact textarea {! width: 100%;! border: 1px solid #999;!}!#contact button {! background: green;!}

Definindo Padrões e regras

Dona Norma

.foo, .bar!{! padding:15px;! margin:0px 0px 15px;! box-shadow:0px 1px 2px #CCC;! background: #DDDDDD;!}

.foo, !

.bar {! padding: 15px;! margin-bottom: 15px;! box-shadow: 0 1px 2px #ccc;! background: #ddd;!}

use reset

nunca use !important

nunca use #id {…}

não use element {…}

cuidado com classes utilitárias

.clear-float { clear: both; }

.is-hide { display: none; }

.float-left { float: left; }!

.mt-20 { margin-top: 20px; }

.float-left { float: left; }!

.mt-20 { margin-top: 20px; }

Preprocessor

Pedindo Ajuda

.bar {! color: #bada55;! background: #f00;! border: #bada55;!}

@my-green: #bada55;!@my-red: #f00;!!.bar {! color: @my-green;! background: @my-red;! border: @my-green;!}

Modularize

// General Dependencies!@import "mixins";!@import "variables";!!// Base!@import "reset";!@import "layout";!!// Components!@import "typography";!@import "forms";!@import "toolbox";!@import "buttons";!@import "modals";!@import "messages";!@import “badges";!!// Areas!@import "header";!@import "footer";

Use espaço

e identação

.foo {!width: 20px;!height: 150px;!} !.foo .inner-foo {!width: 10px;!height: 10px;!} !.bar {!width: 5px;!height: 5px;!border-radius: 50%;!} !.bar .foo {!background: blue;!}

.foo {! width: 20px;! height: 150px;!}!! .foo .inner-foo {! width: 10px;! height: 10px;! }!!!.bar {! width: 5px;! height: 5px;! border-radius: 50%;!}!! .bar .foo {! background: blue;! }

Comente

/**! * The site’s main page-head can have two different states:! *! * 1) Regular page-head with no backgrounds or extra treatments; it just! * contains the logo and nav.! * 2) A masthead that has a fluid-height (becoming fixed after a certain point)! * which has a large background image, and some supporting text.! *! * The regular page-head is incredibly simple, but the masthead version has some! * slightly intermingled dependency with the wrapper that lives inside it.! */

/**! * 1. Default icon size is 16px.! * 2. Squash down the retina sprite to display ! * at the correct size.! */!!.sprite {! width: 16px; /* [@1x] */! height: 16px; /* [@1x] */! background-image: url(/img/sprites/main.png);!}

Dando um nome pro seu filho

Tia Jamile

.componentName

.guardaRoupa

.componentName

.componentName-member

.guardaRoupa

.componentName

.guardaRoupa

.guardaRoupa-gaveta

.componentName

.guardaRoupa

.guardaRoupa-gaveta

.guardaRoupa-gaveta-puxador

.componentName

.componentName-member--modifier

.guardaRoupa

.guardaRoupa-gaveta

.componentName

.componentName-member--modifier

.guardaRoupa

.guardaRoupa-gaveta

.guardaRoupa-gaveta--aberta

.baby {! width: 20px;! height: 150px;! background: white;!}

.baby-head {!! width: 10px;!! height: 10px;! }

.baby-head-eyes {!! width: 5px;!! height: 5px;!! border-radius: 50%;! background: brown;! }

.baby-head-eyes--blue {!! ! background: blue;! }

.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}

.button--big {!! padding: 15px 25px;!! font-size: 15px;!}

.button--small {!! padding: 5px 10px;!! font-size: 11px;!}

.button--blue {!! background: #008fed;!}!.button--green {!! background: #79b439;!}!.button--yellow {!! background: #ffb400;!}!.button--orange {!! background: #fe8b00;!}!.button--red {!! background: #ff5604;!}

button--big

button--small

button--blue

button--green

button--yellow

button--orange

button--red

button

class=“button button--big button--blue“

.dropdown {!! padding-right: 50px;!! &:after {!! ! content: " ";!! }!}

^.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}

.button, .dropdown {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}

.dropdown {!! padding-right: 50px;!! &:after {!! ! content: " ";!! }!}

Manutenível

Escalável

Manutenível

Escalável

Organizado

Manutenível

Escalável

OrganizadoLegível

Manutenível

Escalável

Reaproveitável

OrganizadoLegível

Manutenível

Escalável

Reaproveitável

OrganizadoLegível

Manutenível

ModularizadoPadronizado

Escalável

Reaproveitável

OrganizadoLegível

Manutenível

EspaçadoIdentadoComentado

Escalável

Reaproveitável

OrganizadoLegível

Manutenível

EspaçadoIdentadoComentado

Componentizado

Não quebre janela

Disciplina

Chibaaaaaaaaata!!

Obrigado!shankarcabus.com.br

_github.com/shankarcabus/scalable-css-reading-list

CSS Pra Gente Grande

Technology

Transcript of CSS Pra Gente Grande

341gina inteira) - fabicorderodesign.files.wordpress.com · dá pra fazer pra festa de criança I Lembranças, doces enfeitados convites e tudo ... /Decoração é o que a gente ama

W O O menino que sonhava em contar histórias pra gente ...

Livro Bola pra Frente, Educação pra Gente - 2ª edição

CSS CURSO W3C ESCRITÓRIO BRASIL · CSS - Curso W3C Escritório Brasil 5 1. CSS O que é CSS? O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer

Slides CSS

Acho legal a gente tirar uma foto e se apresentar pra todos os colegas do PET!

Laboratório de Informática CSS Seletores Fontes em CSS

empepsic.bvsalud.org/pdf/tp/v1n1/v1n1a03.pdf · bichos pra gente saber quantos tem ... Você vai usando seu dedo pra orientar a ... bichos separados, assim: 41eõr.s, ai pra niío

CSS estudos

HTML&CSS 4 - Intermediate CSS (1/2)

Motoboy, um ‘intruso’ nas cidades - unicamp.br · queria aproveitá pra lançá um dilema pra vocês: o que a gente ... Motoboy trafega na avenida Sumaré, em São Paulo: para

CSS: Conceptos básicosrua.ua.es › dspace › bitstream › 10045 › 26458 › 1 › CSS... · CSS Introducción al desarrollo web CSS Cascading Style Sheets

Css Página 1 - Max Pezzin · Css Página 2 CSS Sumário Introdução ao CSS ..... 4

CONTE PRA GENTE, TRABALHADOR, CONTE COM A GENTE. …€¦ · Conte pra gente, Conte com a gente. Se você suspeita que o ambiente em que você trabalha pode estar prejudicando sua

Acho legal a gente tirar uma foto e se apresentar pra todos os colegas do PET! Acho legal a gente tirar uma foto e se apresentar pra todos os colegas.

EXEMPLAR DO PROFESSOR - detran.pr.gov.br · pra evitar um grande acidente, pra nÃo machucar gente como a ... andar em mim. levo-as para vÁrios lugares: escola, parque, mercado.

Formato CSS

Gente é pra Brilhar!

FICHA SOCIAL DOS COLABORADORES. Regina e aí... conta pra gente onde que você nasceu... como que foi um pouco da sua infância... alguma história... pra gente... comé que foi? Inf.

Jornal 11 "Santos pra Frente é Beto com a gente"