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;
  }
}

Frontend

By Bruce Carvalho

Frontend

1,143

Bruce Carvalho

brucepc.com.br

Padrões de

Desenvolvimento

FrontEnd

Ferramentas

Vagrantfile

Novo projeto

bower...

.bowerrc

bower.json (configuracao do pacote)

Registrando pacote

Adicionando dependencias

instalando dependencias

Gruntfile.js

Novo Repositorio

Sem comentarios ¬¬

Title Text

Importação de arquivo

Mixins

herança

Operadores

PAdrões dos projetos com sass

Frontend

More from Bruce Carvalho