Padrões de

Desenvolvimento

FrontEnd

Ferramentas

(PHP|WEB)Storm
Vagrant
Yeoman
Git
Nodejs
NPM (Node Packaged Modules)
Bower
Grunt
Compass com Sass (Syntactically Awesome StyleSheets)

Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :

# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|

  config.vm.box = "Anguis"

  config.vm.box_url = "http://10.0.0.250/vagrant/Anguis.box"

#  config.vm.box_url = "http://asconsultoriaeprojetos.com.br/vagrant/Anguis.box"

# REDIRECIONAMENTO DE PORTAS
  config.vm.network :forwarded_port, guest: 9000, host: 9000
  config.vm.network :forwarded_port, guest: 35729, host: 35729

# MONTANDO PASTAS NO SISTEMA
  config.vm.synced_folder "./", "/vagrant", owner: "www-data", group: "vagrant", create: true,
  mount_options: ["fmode=777","dmode=777"]

#  config.vm.synced_folder "./", "/www-data", owner: "www-data", group: "vagrant", create: true,
#  mount_options: ["fmode=777","dmode=777"]

end

Novo projeto

$> cd /vagrant

$> yo webapp

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like? 
 ◯ Bootstrap
❯◉ Sass
 ◯ Modernizr

? Would you like to use libsass? (y/N)

SSH Session (Vagrant)

$> ls -la
total 68
drwxrwxr-x  6 vagrant vagrant  4096 Out 14 11:25 .
drwxr-xr-x 16 vagrant vagrant  4096 Out 14 11:23 ..
drwxrwxr-x  5 vagrant vagrant  4096 Out 14 11:24 app
drwxrwxr-x  3 vagrant vagrant  4096 Out 14 11:25 bower_components
-rw-rw-r--  1 vagrant vagrant    89 Out 14 11:24 bower.json
-rw-r--r--  1 vagrant vagrant    38 Out  7 17:10 .bowerrc
-rw-r--r--  1 vagrant vagrant   415 Out  7 17:10 .editorconfig
-rw-r--r--  1 vagrant vagrant    11 Out  7 17:10 .gitattributes
-rw-r--r--  1 vagrant vagrant    52 Out 14 11:24 .gitignore
-rw-r--r--  1 vagrant vagrant 10100 Out 14 11:24 Gruntfile.js
-rw-r--r--  1 vagrant vagrant   353 Out  7 17:10 .jshintrc
drwxrwxr-x 26 vagrant vagrant  4096 Out 14 11:25 node_modules
-rw-r--r--  1 vagrant vagrant   913 Out 14 11:24 package.json
drwxrwxr-x  4 vagrant vagrant  4096 Out 14 11:25 test
-rw-rw-r--  1 vagrant vagrant    27 Out 14 11:24 .yo-rc.json

SSH Session (Vagrant)

$> sudo bower install && npm install

Em caso de error na criação do projeto

bower...

.bowerrc

{
    "registry": "http://10.0.0.250:5678",
    "directory": "bower_components"
}

bower.json (configuracao do pacote)

{
  "name": "Gaia",
  "version": "*",
    "main": [
        "app/styles/main.css",
        "app/scripts/main.js"
    ],
  "dependencies": {
    "angular": "~1.2.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "angular-resource": "~1.2.0",
    "angular-cookies": "~1.2.0",
    "angular-sanitize": "~1.2.0",
    "angular-animate": "~1.2.0",
    "angular-touch": "~1.2.0",
    "angular-route": "~1.2.0",
      "foundation": "~5.4.6"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0",
    "angular-scenario": "~1.2.0"
  },
  "homepage" : "http://agile.asconsultoriaeprojetos.com.br:7990/projects/AS/repos/gaia/browse",
  "appPath" : "app",
  "keywords": ["base", "ascp", "forms", "default", "padrao"]
}

Registrando pacote

$> bower register <nome-pacote> <url-repositorio>

Adicionando dependencias

{
  "name": "ascp-anguis",
  "private": true,
  "dependencies": {
    "ascp-gaia": "*"
  }
}

$> bower install

SSH Session (Vagrant)

instalando dependencias

Gruntfile.js


   // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },


   // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '0.0.0.0',
        livereload: 35729
      },

Depois

Antes

Novo Repositorio

Sem comentarios ¬¬

Title Text

$> git init

$> git add --all

$> git commit -m "Primeiro Commit"

$> git remote add origin ssh://git@agile.asconsultoriaeprojetos.com.br:7999/scm/as/sam.git

$> git push origin master

Adicionando aplicação ao repositorio

CSS With Superpowers

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

file.SCSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

file.CSS

Sintax

Importação de arquivo

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

_reset.scss

main.scss

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

main.css

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

arquivo.scss

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

arquivo.css

herança

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

arquivo.SCSS

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

arquivo.CSS

Operadores

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

arquivo.scss

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

arquivo.css

PAdrões dos projetos com sass

vendor.scss

// bower:scss
// endbower

//FOUNDATION
@import "vendor/foundation/foundation";

PSR-0 NO SCSS

Na pasta styles...

@import "normalize";
@import "settings";
@import "components";

vendor/foundation/_foundation.scss

<head>
    <meta charset="utf-8">
    <title>Gaia Templates</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/vendor.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
</head>

Na Pasta app...

// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 
$modules: () !default;
@mixin exports($name) {
  @if (index($modules, $name) == false) {
    $modules: append($modules, $name);
    @content;
  }
}