Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


a UX cocktail with a southern twist

More information at

What is it about?


Sazerac is a cocktail of documents and files that can help you rapidly (and deliciously) develop a website. Sazerac is not just a straight-up CSS boilerplate, it is a hardcore concoction of the base ingredients: web target analysis, prototype and wireframing, and design creation in Fireworks. Finally, we mix this all together with CSS code generation, and voila, your Sazerac UX cocktail!

Design book

The Sazerac "Design Book" is your web site recipe: client and user analyses, definition of personas and scenarios, creation of task flow, and wireframing.

Design Templates

The Sazerac "Design Templates" are your base ingredients: various Fireworks templates that you can use straight-up or mix and match with your own personal designs. Don't be afraid to experiment. Do have fun.

CSS Boilerplate

Sazerac's CSS Boilerplate is the final, tasty twist: a collection of totally modifiable CSS files to finalize your design and publish your web, in any device imagineable. Bottoms up!

Who & why

-------------------------- The mixologist behind Sazerac is me, Alfonso Morcuende. I've worked as a graphic desinger in sunny Spain for 15+ years. I've been involved in dozens of web projects and in all phases of web site creation from initial client analysis to layout and coding for all sorts of devices. I have always been obsessed with finding a comprehensive method to neatly cover alll these initial aspects of a web project. This is exactly what Sazarec does. Sazerac is a collection of the best techniques I have found in years of searching. Everything you need to create a web site is here, all you have to do is shake it up to create your own Sazerac cocktail.

How do I get started

-------------------------- Sazerac is not a solution for every aspect of your web project, but I sincerely believe it offers a good start, no matter what your objectives, nor your design.

The structure of Sazerac is:

Sazerac Design Book:

  • Card-template.pdf: print this page if you are preparing a card shorting.
  • Sazerac-book.pdf: this docuemnt allows you to collect all the information necessary to jumpstart your project (analysis, application design and prototypes). Read it carefully and use the parts you find most useful.

Sazerac Templates:

Various PNG files you can open with Fireworks and use to get started creating your own delicious designs

Sazerac CSS Boilerplate:

Here is the CSS core of Sazerac. Open the file variables.less, modify it with the values you want. Next open sazerac.less and compile the file to get your personalized CSS cocktail.


-------------------------- Have feedback, questions or simply want to chat about UX? Write me at or call me on +34 667 451 601.

Sazerac is my personal vision and I don't expect it to suit everyone's tastes. At least you can't say I didn't try.

The CSS generated wtih Sazerac is based on the most popular and secure Frameworks in the market and have been proven in various devices such as

  • Chrome (Mac/PC)
  • Firefox (Mac/PC)
  • Safari
  • IE8, IE9
  • iPhone
  • iPad
  • Android


-------------------------- Sazerac would not be possible without the inspiration of sites including:
  • Bootstrap
  • Foundation
  • Less framework
  • Skeleton


-------------------------- Every file you find here in Sazarec is ready any modification, change or remix that you can dream up, all under the licence of Creative Commons, Licensed under Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)


a UX cocktail with a southern twist






No releases published


No packages published