Experis Web Framework 2, or EWF 2, is a front-end web development framework that provides organization and structure without adding a lot of file bloat. It makes use of many popular technologies, such as Compass and Sass, RequireJS, Grunt, and more. If you aren’t familiar with these useful tools, don’t worry – setup is simple, and before long, you’ll be wondering how you lived without them.
So, let’s get started. Here are the applications you need:
Installation is easy. Just click the “Install” button on the home page. You can’t miss it. Run the installer when it finishes downloading, and keep clicking “Next” until you’re done.
Ruby is an open source programming language used by Sass/Compass. Therefore, we need to make sure it is installed and working. If you’re on a Windows machine, you can download the installer from http://rubyinstaller.org/. OS X and Linux users can find instructions at https://www.ruby-lang.org/en/downloads/.
The installation defaults should be fine, but make sure to select the option to add the Ruby executable to your environment path variable.
You can’t talk about Compass without understanding Sass first. Sass is basically CSS on steroids. It allows you to make use of variables, nested CSS selectors, and programmatic features that save time and effort. But what’s really amazing is that you don’t need to know anything more than standard CSS to start using it. That’s right – just start writing plain, vanilla CSS, and start gradually mixing in some of the Sass extras as you learn them.
linear-gradient() mixin that Compass provides (a mixin outputs CSS when called). In case you’re wondering, the
linear-gradient() mixin allows you to easily specify the conditions of a background gradient. The browser-specific vendor prefixes and syntax differences will be taken care of automatically.
Compass installation relies on the command line, but it’s only a couple lines of typing. On Windows, press the Windows key on your keyboard and the letter R. Then type “cmd” (without quotes) and press Enter. This will open the command prompt. You can use the Terminal application on OS X and Linux or other similar command line applications.
Next we need to make sure your Ruby gems are up to date. A gem is an application written in Ruby. By telling Ruby to update its gems, we can be sure we’re getting the latest version of Compass. Type the following and press Enter.
gem update --system
After a short while, the update should complete. To install Compass, type:
gem install compass
Hopefully, there weren’t any issues, and you’re good to go.
That’s it! No more software required. But… You should also consider installing LiveReload.
This free browser extension is available for Chrome, Firefox, and Safari, and can be downloaded at http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions- or by searching for it in your browser extension store/gallery.
LiveReload makes it possible to write code and have it immediately update in your browser without the need to refresh. This is really amazing when used with Sass, RequireJS, and Grunt.
Downloading EWF 2
The framework files can be downloaded from GitHub at https://github.com/thomashigginbotham/ExperisWebFramework2. If you aren’t familiar with Git, feel free to click the “Download ZIP” button on the page for a simple ZIP file. The advantage to using Git is that you can easily pull in the latest updates and even contribute to EWF 2 if you so desire.
Either way you go about getting the files is fine. Just remember to unzip the files if you went that route. Now, open the folder in your editor of choice, and let’s take a look at what we have available.
About the File Structure
- .gitattributes and .gitignore: These files are specific to Git and can be ignored or deleted if you aren’t interested in contributing to EWF 2.
- config.rb: This is a settings file for Compass. It tells Compass where to find directories and how to output the final CSS. Learn more about the available settings at http://compass-style.org/help/tutorials/configuration-reference/.
- Gruntfile.js: This file is used by Grunt to tell it what tasks it needs to run. We’ll talk more about Grunt later.
- index.htm: EWF 2 includes this starter HTML page. Modify it to meet your needs when you’re ready to start.
- package.json: Grunt uses this to tell it what packages it will need to download.
- readme.htm: Here we have a quick tutorial as well as a self-serving example of something built with EWF 2. If you open it now, you’ll notice that there isn’t a CSS file for it to use. We need to compile the Sass first.
- README.md: This file is a basic readme file in Markdown format. It is used by GitHub for a description. Go ahead and delete it.
While this is the recommended directory structure for working with EWF 2, you may change it to your liking, moving or deleting files as you find necessary. If you aren’t familiar with Compass and RequireJS, you should probably keep the files as they are, since the configuration for these technologies is tied to the directory structure.
As you should be aware, it is best practice to minify and combine your CSS and JS files. Unfortunately, this process takes time and has to be done every time you make an update. If you’ve worked with Compass before, you’re familiar with the compass watch command, which tells Compass to look for changes to your Sass files while you update them. And if you’re familiar with RequireJS, you may have used the r.js optimizer. There are many other tools – such as image optimizers and sprite generators – that are essential to building great websites, but they add time and complexity.
Fortunately, Grunt makes it possible to run all of these tools at one time, and only when they need to run. So if I make a Sass update, Compass will compile the CSS, and if I update one of my jQuery plugins, the RequireJS optimizer will kick in and generate a minified JS file. Additionally, if I’m using the LiveReload browser plugin, my browser will automatically refresh as I make these changes, showing my updates as I make them.
So how does all this magic happen? It only takes a few simple commands. Open your command prompt, and navigate to your project’s root directory. This is done with a command such as the following.
Now, run the following command to download all the packages we’ll be using:
The previous command reads your packages.json file and pulls in all the other files that you need for Grunt to work correctly. When it’s done, you need to install the Grunt CLI (Command Line Interface). You can do that with one more command:
npm install -g grunt-cli
That’s all. Now we can use Grunt to automate our tasks for us. Let’s start by compiling the CSS and JS that we need to view the readme.htm file in our browser. Run the following command:
When finished, you should get a “Done, without errors” message. Now open the readme.htm file in your browser. It should now appear as expected.
Working with EWF 2 in Real Time
We’ve seen how we can use the grunt command to compile our CSS and JS in one step, but it would be even better if Grunt automatically ran when we updated our files. If you look at the bottom of the Gruntfile.js file in the root directory, you’ll see three
grunt.registerTask() calls. These are profiles that can be used to run certain tasks. The first profile, “default,” is the one used when we use the grunt command by itself. As you can see, it runs compass:dev and requirejs. Further up in the file, you can see the settings associated with these tasks.
Let’s run the “server” profile, which makes use of the “watch” and “connect” packages. The “watch” package causes Grunt to continue running and watches for file changes. The “connect” package creates a very basic web server for us so that we can take advantage of things like paths that don’t work well on file systems or Selectivizr, a script that allows older versions of Internet Explorer to use CSS 3 selectors. To start this profile, type the following in your command prompt:
When it finishes compiling the CSS/JS and starts up the web server, it should say, “Waiting…” In the “connect” settings, we’re using port 9001, but you can change it to whatever you want. Open the index.htm file in your browser, but do it by navigating to http://localhost:9001/index.htm. If that doesn’t work, try http://127.0.0.1:9001/index.htm.
If you have the LiveReload plugin installed in your browser, go ahead and activate it. If you didn’t install it, you’ll still need to refresh your browser after making updates. Go ahead and make some updates in the index.htm file, Sass files, and JS files. Notice that after saving your changes, Grunt will automatically detect the changes and run the appropriate tasks.
When you’re finished, press Ctrl+C in the command prompt. Then press Y and Enter to confirm that you want to quit.
I hope that this was useful to you and that you’ve found a new, convenient way to work on front-end Web projects. As this was a “getting started” tutorial, I didn’t go in depth with my descriptions of the technologies, but please post in the comments if you have any questions or issues that you ran into.
We only scratched the surface of what you can do with EWF 2, and I plan on creating more tutorials to showcase some of its incredible features.