/b--e-m

Block__element_modifer Grunt boilerplate

Primary LanguageCSSMIT LicenseMIT

Methodologies and Frameworks: BEM Build Status

Methodologies and Frameworks (BEM) [Home Assignment] (https://kb.epam.com/pages/viewpage.action?pageId=312433537) HTML/CSS Best practices [Home Assignment] (https://kb.epam.com/pages/viewpage.action?pageId=312433539) Responsive Design [Home Assignment] (https://kb.epam.com/display/GDOKB/Lecture23%3A+Responsive+Design)

EPAM Systems

System requirements:

  • Node.js -v 4.2.2
  • NPM -v 2.14.7

Running application:

$ git clone [git-repo-url] js_mentoring_kyiv_2015
$ cd js_mentoring_kyiv_2015/Module8/Hw21/b--e-m
$ npm start
$ node server.js

Check how application runs on localhost environment and on [heroku] (https://b--e-m.herokuapp.com/) platform as well

Application advantages:

  • Production-ready code
  • Easy way scalability
  • Modular file structure
  • Modular code structure
  • Adherence to the AIB concept
  • Adherence to the DRY approach
  • Seven mixins with fallbacks
  • Five types of main breakpoints
  • Five types of extra breakpoints

Implemented features:

  • Grunt for running tasks
  • SASS for CSS preprocessing
  • Autoprefixer for CSS postprocessing
  • Express for server-side development
  • EJS for server-side templating
  • Travis-CI for continuous integration
  • Heroku for deployment

Check list:

  • BEM methodology
  • Semantic tag names
  • WAI-ARIA attributes
  • CSS code styles
  • CSS preprocessor
  • CSS postprocessor
  • Responsive design
  • Responsive images

Configuration:

  • Create repository on GitHub and add remote:
$ git remote add origin git@github.com:stremann/b--e-m.git
  • Create repository on heroku:
$ heroku create b--e-m
  • Synchronize GitHub repository with Travis-CI
  • Allow to track b--e-m repository from GitHub on Travis-CI
  • Create encrypted token for heroku:
$ travis encrypt $(heroku auth:token) --add deploy.api_key
  • Push changes into GitHub repository
  • Open Travis-CI to see how build goes
  • After success build run:
$ heroku open

WAI-ARIA testing

  • Download and install ChromeVox
  • Check provided accessibility