Open source web-development productivity optimizer
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Easy Box Model (EBM) 3.1.0 - Gulp Optimized

Getting started

  • Install the framework of your preference
  • npm install easyboxmodel/ebm (make sure you have a package.json file)
  • sh ./node_modules/ebm/ebm-install <framework_src_directory> <fw_dest_directory>
  • gulp or gulp watch to watch for changes
  • Open the gulpfile.js and change srcFolder to match the framework assets source directory and publicFolder to match the destination directory


EBM is an MVC-CSS/JS frontend framework. It may sound verbose, but it is designed to follow modern frameworks MVC structure.


Let's assume that your FW has an Users module, a UserController and a profileAction() that renders a view. For this case, the sass folder may have the following structure:


The profile.scss file may import the global.scss which manages the shared styles and may import specific EBM control, elements or modules so only the profile view uses them:

@charset "UTF-8";

// Import the global styles and mixins for every template
@import "./SRC_FOLDER/sass/global";

// Module Controller group specific EBM Imports
@import "./SRC_FOLDER/scss/EBM/elements/ebm-custom-radio-checkbox";

// Additional classes
.profile-class {
  // ...

In order to have a css/users/user/profile.css file available for your HTML link tags, just do a gulp or gulp-styles. Choose gulp-watch instead to watch for changes.


The html folder will compile your html files to the surce destination directory and you can see your changes in the host you are working on


The same goes for javascript files except for the action folder which has always a main.js file:


The main.js has the require() code that uses node_modules packages and your view or component code:

let Vue = require('vue');

let Component = Vue.extend({
  template: '#name',
    return {}
  methods: {}

Vue.component('name', Component);

The code above will compile into a js/build/module/controller/action.js file minified in production and development enviroments.


The EBM is a structured set of frontend libraries and tools and a workflow proposal on how to use them to drastically increase web development productivity.

Thoughts about time

After having worked on at least 20 web projects throughout 18 months, we discovered that time tracking does not objectively measure productivity, instead, we prefer talking about time efficiency, where the ammount of time taken to complete a project in the stages of development, Q&A and production can be decreased if each individual inside the development team uses productivity resources.

Productivity resources

So, if time tracking does not objectively measure development productivity: How can we make sure that at least, we are taking less time on completing tasks and completing them well?

Taking less time on completing tasks

Habits. Development habits are systematic steps that individuals take to complete the given tasks.

Even the simplest tasks, add up to the overall development time of the project

Here is a list of how the EBM proposes to work on these habits:

  • Naming conventions in files, selectors and elements
  • Text editor shortcuts and tools
  • Browser shortcuts and tools
  • Computer shortcuts and tools
  • Size units value references
  • Command line aliases
  • Troubleshooting techniques
  • Aknowledgement of the available resources
  • Health and comfort considerations

Less time, but without compromising the product quality

Can we get a balance between time and quality?

Can we accomplish it on large teams?

What does quality mean?

  • Accessibility
  • Performance
  • Readibility
  • Compatibility
  • Scalability
  • Functionality

EBM aims to:

  • Create workflow consistency for frontend development teams
  • Define a standard set of development tools to ensure product quality
  • Help developers on building their time efficiency habits
  • Help on the development team communication process by specifying naming conventions and project structure
  • Document and automate processes
  • Output light CSS files for its use in CMS's and scalable web applications
  • Help frontend development teams to think in the Sass way

EBM expected outputs

  • Satisfy the customer through early and continuous delivery of valuable software
  • Welcome changing requirements, even late in development. Agile processes harness change for the customer’s competitive advantage
  • Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale
  • Working software is the primary measure of progress
  • Sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely
  • Continuous attention to technical excellence and good design enhances agility
  • Simplicity
  • Self-organizing teams
  • At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly