andrexduarte

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "  ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "single",

andrexduarte

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
  FB.init({appId: 'xxxxxxxxxx', status: true, cookie: true, xfbml: true});
  FB.Canvas.setSize({height: XXXX});
</script>

andrexduarte

module.exports = {
    debugInfo: true,
    open: false,
    proxy: "localhost.dev",
    files: [
        'css/*.css',
        '*.php'
    ],
    ghostMode: {
        clicks: true,

andrexduarte

# Require any additional compass plugins here.
  require 'sass-globbing'

# Set this to the root of your project when deployed:
  http_path = "/"
  css_dir = "css"
  fonts_dir = "css/fonts"
  sass_dir = "sass"
  images_dir = "images"
  javascripts_dir = "js"

andrexduarte

browser-sync: browser-sync start --config browser-sync.js
guard: bundle exec guard --group frontend concat linter

andrexduarte

source "https://rubygems.org"

gem 'uglifier'
gem 'compass'
gem 'guard'
gem 'guard-shell'
gem 'sass-globbing'
gem 'compass-normalize'
gem 'juicer'
gem 'scss-lint', '~> 0.27.0'

andrexduarte

Meu Sublime Text

Instale o package control.

Pacotes

• Alignment
• All Autocomplete
• Emmet

andrexduarte

// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {

andrexduarte

group :frontend do

  guard 'shell' do
   watch %r{.+\.(scss|sass)} do |file|
   n file[0], "#{file[0]} changed"
   `compass compile --sourcemap`
   end
  end

  # Image optimization

andrexduarte

@mixin before-after-background($height, $side-width, $before, $after) {
    height: $height;
  position: relative;
   z-index: 1;

  &:before, &:after {
     content: '';
     display: block;
      height: $height;
    position: absolute;