Post on 13-Apr-2017
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?