Sitebuild

Yeoman install

npm install -g git://github.com/menthainternet/yeoman-cli.git

Install with nvm:

nvm install v0.8.28 && npm install -g npm@2 && npm install -g git://github.com/menthainternet/yeoman-cli.git

• OS X, Linux (curl -L https://raw.githubusercontent.com/menthainternet/yeoman/mentha/setup/install.sh | bash)
• Windows
• Windows issues

Install

Checkout vagy yeoman init (ha majd kész lesz a generátor).

Post install

$ bundle install
$ npm install

composer.json-ban át kell írni a projekt nevét (project-name és Project name)

Fejlesztés könyvtár kiszolgálása

$ yeoman server

Build

$ yeoman build

Build könyvtár kiszolgálása

$ yeoman server:dist

Projectbe ágyazott sitebuild kiszolgálása

$ yeoman server:prj

Használat közben folyamatosan másol mindent a dist könyvárba is, erre például Symfony projecten belül van szükség.

Konfig

• composer.json: Composer konfig
• package.json: npm és Node.js konfig (Grunt taskok függőségei)
• Gruntfile.js: Grunt taskok
• Gemfile, Gemfile.lock: Bundler konfig (Compass és pluginjei)
• compass.rb: Compass konfig
• .editorconfig: EditorConfig (Sublime Text 2 plugin)

app/components

Ide kerülnek a package-nek tekinthető third party összetevők.

A package-ben előre tömörített .js és .css fájlok legyenek. *

* egyelőre pont az ellenkezője igaz: [yeoman/grunt-usemin#24]

Könyvtár név: [package név]-[verzió]

• app/components/compass_twitter_bootstrap-2.3.2: Compass Twitter Bootstrap assetek
• app/components/css3pie-1.0.0: CSS3 PIE stable
• app/components/css3pie-2.0beta1: CSS3 PIE beta
• app/components/html5-boilerplate-4.3.0: HTML5 Boilerplate assetek
• app/components/iconic-4af32d470e: Iconic
• app/components/jquery-1.8.3: jQuery (release notes)
• app/components/jquery-1.9.1: jQuery (release notes)
• app/components/jquery-1.11.1: jQuery (release notes)
• app/components/jquery-placeholder-2.0.7: HTML5 Placeholder jQuery Plugin
• app/components/jquery-ui-1.10.0: jQuery UI release notes
• app/components/modernizr-2.6.2: Modernizr custom build
• app/components/selectivizr-1.0.2: Selectivizr

Asset könyvtárak

Minden könyvtár alatt a következő bontás található:

• backend
• frontend
• shared
• sitebuild

A shared alá mennek az alkalmazások által közösen használt assetek, minden más a megfelelő alkalmazás könyvtárába kerül.

app/fonts

Fontok helye.

app/images

Képek helye.

app/multimedia

Multimédia alkalmazások helye (pl. Flash, Silverlight).

app/scripts

Saját szkriptek helye. .coffee fájlok lefordulnak JavaScriptre.

app/scripts/frontend alatt jQuery DOM ready template található JavaScriptben (main.js) és CoffeeScriptben (main.coffee). Amelyik nem kell, az törölhető.

app/styles

Saját stylesheetek helye.

.scss és .sass fájlok lefordulnak CSS-re.

Minden alkalmazás könyvtára alatt található egy lib könyvtár, benne a következő fájlokkal:

• _definitions.scss: pluginek betöltése, változók és mixinek definíciói
• _helpers.scss: utility-, state- és helper class-ok

Alkalmazás stylesheetekben a következő az import hierarchia:

• shared/lib
• [alkalmazás]/lib
• helyi definíciók / helperek

A definíciók a stylesheetek elején, a helperek a végén szerepelnek.

app/styles/shared/lib/_definitions.scss

Compass import, így mindenhol elérhető.

Ugyanitt a következő Compass plugineket importáljuk:

• HTML5 Boilerplate
• Font Stacks (opcionális)
• 960 Grid System (opcionális)
• Susy (opcionális)

Mixinek:

• css3pie: CSS3 PIE, választható stable és beta verziók

app/styles/shared/lib/_helpers.scss

H5BP helper classok h- (ir, clearfix) és is- (hidden, visuallyhidden, invisible) namespace alatt.

app/styles/frontend/main.scss

Frontend stylesheet template SMACSS támogatással.

A stylesheet karakter kódolása UTF-8.

shared és frontend definíció importok után helyi plugin importok és definíciók.

H5BP normalize.css include

H5BP print styles include (opcionális)

Compass Twitter Bootstrap import. Alap, reszponzív és Font Awesome verziók, melyekből csak egyet kell választani. (opcionális)

Iconic import. Használat: @include iconic(lightbulb);. (opcionális)

Sprite import példa kód.

SMACSS szerinti bontás

• app/styles/frontend/main/base.scss - base class-ok, H5BP defaults include (Chrome Frame prompt kivételével, opcionális)
• app/styles/frontend/main/layout.scss - layout class-ok l- namespace alatt
• app/styles/frontend/main/modules/[moduleName].scss - modul class-ok a modulok neveivel megegyező nevű fájlokban
• app/styles/frontend/main/state.scss - state class-ok is- namespace alatt

Végül shared és frontend helperek betöltése, saját helperek definiálása.

#####Class nevek struktúrája:

[classCategory-]className[-childName][--modifierName]

######Layout példák

• l-layoutName
• l-layoutName--modifierName

######Modul példák

• modulName
• modulName-childName
• modulName--modifierName
• modulName-childName--modifierName
• modulName-childName-childName

######State példa

• is-stateName

app/styles/backend/editor.scss

CKEditor stylesheet template.

A stylesheet karakter kódolása UTF-8.

app/templates

', include sor elején, .html nem kell, abszolút hivatkozások, partialök behúzása

app/uploads

Egyéb fájlok

.htaccess

channel_hu_HU.html

crossdomain.xml

favicon.ico

robots.txt

Build

dist

.gitignore, .buildignore, .ignore

Felhasznált összetevők

TODO

• deployment
• yeoman generator