My framework of choice has always been Zend, Its what I use at work and feed the most comfortable in, however some may argue that there are bigger, better and meaner solutions out there. To those people I say leave me alone I like Zend.
My second weapon in the shahmirj.com arsenal is the less framework, this framework is a CSS template designed to reset your HTML and give you a perfect responsive layout template. I like to mix my less framework with SASS (Syntatically Awsome Stylesheet) to build effective compressed CSS.
To begin we can now create a directory structure as follows, Below shows the Zend Framework created using
zf create project MyProject zf create layout mkdir -p sass/css closure/js touch views/scripts/navigation.phtml touch views/scripts/credits.phtml touch sass/makefile touch js/makefile
Which should output the following
├── application/ │ ├── Bootstrap.php │ ├── configs/ │ │ └── application.ini │ ├── controllers/ │ │ ├── ErrorController.php │ │ └── IndexController.php │ ├── layouts/ │ │ └── scripts/ │ │ └── layout.phtml │ ├── models/ │ └── views/ │ ├── helpers/ │ └── scripts/ │ ├── credits.phtml │ ├── error/ │ │ └── error.phtml │ ├── index/ │ │ └── index.phtml │ └── navigation.phtml ├── closure/ │ ├── js/ │ └── makefile ├── library/ ├── public/ │ ├── @css -> ../sass/css │ ├── favicon.ico │ ├── index.php │ └── @js -> ../closure/js └── sass/ ├── css/ ├── default.scss └── makefile
I prefer using sass with make files rather than its watch function. the main command I use is
sass -C --style compressed index.scss css/index.css
You can download sass from the site or using
gem install sass. To start with I like to change
pretty for debugging just to make sure all is working well, to do this a
makefile comes in very handy
#Default calls SASS=sass -C RM=rm -Rvf MKDIR=mkdir -p #Target dependant variables all: STYLE=--style compressed pretty: STYLE=--style pretty #Directories CSSDIR=css #The css files to build CSS := $(addprefix $(CSSDIR)/, index.css contact.css) all: $(CSSDIR) $(CSS) pretty: $(CSSDIR) $(CSS) $(CSSDIR): mkdir css $(CSSDIR)/%.css: %.scss $(SASS) $(STYLE) $^ $@ clean: $(RM) $(CSSDIR)
make in the
sass folder will rebuild all your css files and note the
public/css folder points to
sass/css which our make file populates. Also when you edit files, and call make, only the new modified files will be made.
scss files to generate
css files is easy, just by appending to the $(CSS) variable
For debugging you can use
I use closure with an advanced options which actually morphs your code, however I do like using jQuery; but using advance options with jQuery is not as straight forward. We first have to get an extern file for jQuery.
The extern file tells closure what variables are to be left alone while it does goes through its compression. To compress I use:
java -jar closure.jar \ --compilation_level ADVANCED_OPTIMIZATIONS \ --externs externs/jquery-externs.js \ --externs externs/ganalytics_externs.js \ --js main.js ganalytics.js \ --js_output_file js/main.js
the trailing slash represent a fake next line the above command is mostly a one liner, you will see this further in our makefile
--compilation_level ADVANCED_OPTIMIZATIONS sets closure to do advance pruning of the
--js files provided, in our case the
ganalytics.js. We also provide the
--externs externs/ganalytic_externs.js and the
--externs/jquery-externs.js which can be found in the closure repository
--js_output_file main.js represents the output file of the compressed process.
Now that we have a compressed file, we still have one problem, We have to make two calls before our page can work properly, the first being to jQuery and the second to our main.js script. However what if we can combine the two files. It would change it to one call. Note with jQuery (minimum) we dont need to compress it as it already comes compressed we just need to stitch the files together. so we can use
cat jquery-min.js main.js > main-production.js.
I like building a make script around this process to make my life easier.
MKDIR=mkdir -p #VARIABLES JSDIR = js JS := $(addprefix $(JSDIR)/, main.js contact.js) #EXTERNS EXT_JQUERY = --externs externs/jquery-externs.js EXT_GANALYTICS = --externs externs/ganalytics_externs.js all: $(JSDIR) $(JS) $(JSDIR): $(MKDIR) $(JSDIR) $(JSDIR)/main-production.js: ganalytics.js main.js $(CLOSURE) $(CLOSURE_OPTS) $(EXT_JQUERY) $(EXT_GANALYTICS) --js $^ --js_output_file .main.js @cat thirdpartyjs/jquery-min.js main.js > $@ $(RM) main.js $(JSDIR)/contact-production.js: ganalytics.js main.js contact.js $(CLOSURE) $(CLOSURE_OPTS) $(EXT_JQUERY) $(EXT_GANALYTICS) --externs externs/google_maps_api_externs.js --js $^ --js_output_file .contact.js @cat thirdpartyjs/jquery-min.js contact.js > $@ $(RM) contact.js clean: @$(RM) $(JSDIR)/*.js @$(RM) $(JSDIR)
It's all well and good having a hammer, but knowing how to use it can make a very big difference. This is where less framework comes in. This provides the perfect blueprint CSS. I recommend you download this, and call it
default.scss. The less framework template can be downloaded here.
Once downloaded and renamed to
default.scss, it can be included into other scss files by using.
@import "default" //Page specific styles
In your default.scss you can define your main elements, such as headers, footer and other paddings as required.
What we have achieved is creating a process in making our website building process very elegant and simple. You can further add to this by creating a master
makefile which calls
sass/makefile accordingly. I usually use vim short-cut
make on the current directory that I'm in, to make my life easier.
Hopefully this helps
I present you the dashee project, allowing you to control servo's using an Android or other device