ITCSS

@dielduarte

Inverted Triangle CSS.

DIEL DUARTE ?Comecei como backend (delphi, php)

3+ anos trabalhando com front end

Apesar de ser front ainda brinco com back (node e php) em projetos próprios.

Aprendi e aprendo muito no github

Atualmente sou desenvolvedor Front end na HotMart.

Style.css

settings

_Variables.scss/* * Colors */$white: #FFF;$black: #000;

_modules.scss/* * Bootstrap Modules */

@import 'bootstrap';

tools

_mixins.scss/* * box-shadow mixins */

@mixin box-shadow ($arguments) {-webkit-box-shadow: $arguments;-moz-box-shadow: $arguments;box-shadow: $arguments;

}

GENERIC

_reset.scss/* * Bootstrap Modules */

@import ‘normalize’;

*.scss/* * Box sizing */

* { box-sizing: border-box; }

BASE

_links.scss/* * Default styles for links */

a { text-decoration: none; }

_images.scss/* * Default styles for img */

img { width: 100%; }

OBJECTS

_list.scss/* * .lists object */

.list { > li {

display: inline-block; padding: 10px;

}}

COMPONENTS

_sidebar.scss/* * .sidebar component*/

.sidebar { background-color: $black;

.list { color: $yellow; }}

Evite sobescrever

regras

TRUMPS

_aux.scss/* * trumps*/

.hide { display: none; }

.clear { clear: both; }

.navbar { padding: 5px; }

main.scss@import "_settings/**/*";

@import "_tools/mixins/*";

@import "_tools/placeholders/*";

@import "_generic/**/*";

@import "_base/**/*";

@import "_objects/**/*";

@import "_components/**/*";

@import "_trumps/**/*";

DicasSempre escolha pelo mais simples para outros desenvolvedores

Pratique, pratique e pratique…

Slush-itcss (https://github.com/dielduarte/slush-itcss)

Perguntas?