About me Arrr, lads! Raise the black!

If I need to describe myself in a single sentence, it would be: ~~innovator, motivator, philosopher, inventor, forward-looker, smooth-tongued speaker and charmer with win-win attitude and proactive approach. Yeah, all that.~~ a bloodthirsty pirate with special flair for aged rum, cigars, space and 20^-th century sports cars.

It so happened that I began my creative career right after I finished high school in 1995 but actually it all started couple of years before that, when I got my first PC and had all the time in the world to learn by trial and error. Which is still my favourite way of learning things. While these days I take time to properly plan my approach in advance, I'd rather try out different scenarios, as there is always an easter egg or hidden gem along the way.

My years as young professional were absolutely explosive and allowed me to go through various fields that added up to my areas of expertise and helped me immensely widen my professional horizons and knowledge right from the start. I didn't limit myself to just visual representations, as I wanted to see these take shape and function. And in the end I became

a designer who knows how to code.

And I believe this is the way a designer should operate. At least when web is involved. Unlike other design professionals, who tend to lean towards the artistic side,

I believe design should fulfil a purpose.

And I also do believe form follows function is probably the best principle there is. In this day and age, everything should be streamlined and captivating. I focus around user-centric design that speaks clearly and is easy to comprehend. Design that does not spark controversy. Design that does its intended job. Because that's what it's all about and that's what I get paid for. And it is up to my skills and knowledge to do what needs to be done but it is also up to my integrity to do it as effectively as possible. So whether it is a logo, web site, promo clip or just about anything, I proudly stand by the end result with my name.

With that said, there are few paths you can move on to:

A) get to know me better by reading some funky stories;
B) skip this and see samples of my work
C) just contact me;
D) Check me out on LinkedIn.

How I wrote two books instead of taking on a venture capitalist offer

It was 2009. I was doing an elevator pitch on the first ever startup conference in Bulgaria. Few minutes later a man silently approached me. "Good day", he said and handed me his business card. "Call me one of these days", he continued and walked away while I was still reading what was written on the card. Then it hit me. "Venture capitalist", that's what was written. I nearly shat my pants.

We met few days later. And we talked. And I was so naive at the time to believe it's ideas that matter. Silly me. Ideas do not matter, as I learned later on. They are just random thoughts that make sense to someone at specific time, under specific conditions. And most of the time remain just that.

I would have realised that earlier but the thing is I was not desperate to make this work under someone else's terms and I backed up. I thought yeah, that door's open, will come back later, things might be different then. In the meantime, let's do something different. Say, let's write a book. Just like that. An year later the book was complete and in the spring of 2011 it got awarded the most prestigious fiction debut award in Bulgaria — a 10-kilo bronze Pegasus and I got the "laureate" title stuck next to my name for eternity. Another year and a half later my second book, a sequel to the first one came out. Sadly, it was not such a commercial success to justify writing another one. Still, the Pegasus works great as book stopper to this day.

By the way, the door was not left open and I should have known better. Тried to come back few years later with a completely different mindset. It didn't work out. Which brings us to the story of...

... How I failed developing a computer game

I've been fascinated with games since my early years when I took every opportunity to spend time in front of computers at public locations, for the lack of one at home. I tried to code basic games even then, in the mid 80's and throughout 90's. Since you don't know me as a name in the game industry [yet], you can guess these were all failures.

Later on, in the beginning of 00's, I was determined to start doing this for a living and so tried to grab every single opportunity to join different indie game development teams and even form my own. You can tell how this effort ended with relative ease as well.

But not everything was in vain. Eventually it all lead to the moment when me and a mate I knew from EVE Online started developing our own game. Outer Space Exiles. It was going to be bloody awesome sci-fi 4X/RTS/RPG/colony management/survival hybrid the world has never seen before. He took the code, I took everything else.

6 months into it we realised we can't go further as we blew all our savings. We launched a hasty, crappy, embarrassing and somewhat desperate Indiegogo campaign but as expected, it failed miserably. And that was the end of my most mature indie game venture so far. But there was a lesson to be learned nonetheless. Game development is an expensive feat and is pretty damn complicated when it comes down to communication, even with a team of just two. Which brings us to the story of...

... How I went on designing a board game instead

Couple of years later I still can't let go of the idea for a sci-fi game and would very much like to continue building over the already existing legacy somehow. Under one condition. I didn't want to fail this time. In order to minimize that risk, I decided to go solo. But there was an obstacle with that concept. Coding a computer game on my own at that point was a no go. So I slightly pivoted the idea and decided to do a sci-fi board game instead. Zenith:Unknown was born.

I worked on it in my spare time for 6 years. Hundreds of hours went in, with everything ready for initial prototype. And I somehow lost my mojo about it. Not entirely, just something didn't feel right. Something was not sticking properly. Something was missing. Could not quite put my finger on it, just had this hunch. Which brings us to the story of...

... How I went back to developing... an even more ambitious computer game

It's March 2020, COVID madness is everywhere and I needed to find a way to vent out all frustration and destructive vibes. And what better time to go back into game dev? With zero industry experience and zero C# knowledge, I grabbed Unity and began putting it all together in Sketchup. But since there was tremendous amount of work already done for Zenith:Unknown, I decided I'll just place Deep Space Noir in the same universe and this way both games will benefit from each other, as Deep Space Noir will actually serve as a prequel to Zenith:Unknown. What was missing before was finally found.

Spanning over 4 episodes, Deep Space Noir is heavily narrated mystery conspiracy in deep space, utilizing my major skills to their maximum. And adding much needed ones on top. Now, 4 years into development, I can safely say I'm a pretty tough coder, too.

Oh, and the game was ranked #8 best upcoming game of 2022 in IndieDB's Indie of the Year contest, so yeah...

Now, ready to see samples of my work or get in touch?

Projects that spark certain pride, joy or excitement

Note: following showcase does not necessarily depict latest projects. For custom demo of my recent projects, drop a line requesting private show.

Infiniti Bulgaria

Few years back I got commissioned by Infiniti Bulgaria to clone the official Infiniti web site and localize it. I had 30 days. That's all I've been given. Cloning a website developed by leading London agency is not your ordinary web design task in its own right, let alone when you are left for dead with it.

Long story short, I did it. Alone. From scratch. In 30 days. Everything I did was custom tailored, plus adding improvements over the original. By far this is the most challenging project I've ever been tasked with and one of my favourite.

Деца FUN

Деца FUN (Kids FUN) aggregates events for kids in top three major Bulgarian cities—Sofia, Plovdiv and Varna. I created a complete identity package, a WordPress based site with a custom theme and functionality you don't typically get out of your WordPress, along with all kinds of supporting social media. It was fun, I loved it.

Sophea

Megashop with inventory of thousands of skincare and beauty products, developed from scratch by me. Also took care of constant flow of marketing collateral, following original product branding style.

Genius

Ambitious platform aimed towards artisans, micro and small service providers. Conceptualized, prototyped and developed solely by me.

Var-bee-tsa

Var-bee-tsa is a brand I developed from scratch, along with all the supporting jazz—identity package, product packaging, website. They are a producer of organic honey and bee products, based in a village called Varbitsa, the "bi" in which is pronounced as bee. See the tease?

Packaging was minimal and based on recycled/recyclable materials. Tag was printed in biodegradable ink on handmade recycled paper with live seeds in it. Planting the tag produces plants and fertilizer at the same time.

The brand got awarded the "Best Product Packaging" award two years in a row at the largest bee product fair in Bulgaria.

Vivique Hair Lounge

Vivique is newly opened beauty salon in Basel, Switzerland. I was commissioned to develop a logo and corporate identity package.

Omniage

Omniage is yet another brand developed by me from scratch more than 15 years ago and completely revamped twice ever since—logo, corporate identity package, WordPress based website with custom theme, advertising and social media package and 10^-th anniversary promo video.

The Disaster

It's not common that I get tasked with designing a book cover. I mean, even my own books were outsourced to third party because my own samples were "too clean". So I thought I'd do an avant-garde cover for this book instead. To get the concept, one should be familiar with the Treaty of Neuilly-sur-Seine, following WWI that completely devastated Bulgaria. The country had to cede huge chunks of its territory and pay reparations in excess of 100 000 000 British Pounds. Events known as the Second National Catastrophe. That's what this book is about and the key to cover concept.

Terras Gauda

A Spanish wineyard that holds annual design competition with thousands of participants from all over the world. Here are my shortlisted entries from few years ago.

Few others

OMG! A free CSS framework for grabs!

That's right, I hereby present my free CSS framework. The Brutalist Framework. It is crude, it is harsh. It is all business, zero bullshit.

The story

What started in October 2018 as a set of helper classes to go along with Bootstrap, soon evolved into a full fledged standalone framework. I shall go as far as saying these days it is the silver bullet for web devs that like to keep things simple and reusable.

Not based on anything existing, my framework was developed from scratch with the ultimate goal to reduce redundant CSS usage in a typical project to an absolute minimum.

Really... And exactly how effective is it?

In a real-life scenario, and I'm not joking, The Brutalist would realistically save you from writing between 70 and 95% of redundant CSS definitions. There is no project I'll take on without it any more. And here's one for the real lazy ones—it's completely possible to have a stunning minimalist site built without writing a single line of your own CSS.

Wait a minute! Are you saying I can prototype in this?

Yes, sir! Fuck Sketch, Figma and the like. You got that right, chief. Both the screw them part and me saying fuck in my marketing expose. With The Brutalist you can rapidly prototype project drafts, drop them for testing and convert them into fully functional sites in one seamless flow. Gone are them pesky coworkers with their bottomless bag of "Oh, wouldn't it be nice, if..." unsolicited fresh ideas, gone are dozens of time consuming visual iterations over all kinds of resolutions. Imagine > visualize > improve > deploy. In all resolutions, all at once. Pun with that annoyingly dumb movie intended. Yup, besides fuck, I also used dumb in my expose.

Oh my god! This is so agile, so... lean!

Well, it is undoubtedly better for crude, raw prototyping, than above-mentioned tools. And here's why. You are creating just one version that automatically adapts, instead of multiple fixed resolution copies; changes are applied on the fly, you can do it in real time, if needed; once prototype is approved, the great deal of work put in it won't be lost, but will serve as a foundation. In the end, you will save hours, if not days. So one can say it is pretty agile and lean, yeah.

Most excellent! What are the benefits again?

1. The grid. You can control grid and element spacing with unparalleled flexibility throughout various screen resolutions and without the need of writing your own media queries. Whether you would be using per cent, grid or flex models, it's up to you, as they are all available. Default definitions are available at four additional breakpoints targeting devices with resolutions of ≤1440px, ≤1200px, ≤992px and ≤640px respectively. This way you can create effective, well-spaced, clean, fluid and most importantly—dynamic resolution bound layouts with the application of just a handful of classes.

2. Containers. Setting widths, heights, floats, position methods, box model and z-indexes is a breeze. Widths and heights can be set in either pixels or per cent.

3. Text. Font sizes, casing, styling, line heights, forced word breaking, forced lists. Effectively control readability and placement of your content.

4. Element design. Basic borders, lines, colors, backgrounds, highlights and mouse pointers to enhance appearance and usability.

5. FX. Animations, transformations, shadows and glows. Jazz up your design a little. Just a little. It's about brutal minimalism after all.

Holy crap! How to make use of it?

Just download, unpack in your CSS folder and link it in the head of your document, before any existing CSS.

<link rel="stylesheet" type="text/css" href="css/brutalistfwXX.css" media="all">

Please note there is no user guide besides the examples that follow and I do not provide support of any sort. But I promise you this—once you look at the code, you will instantly get what's what. Breakpoints are defined by their suffixes of lg, md, sm, xm. So if you want to define an inline-block, you call iblock and it will serve all resolutions. Breakpoint versions are respectivelly iblocklg, iblockmd, iblocksm, iblockxm. Easy, see?

Some examples


                                    <div class="mxw400 w100pxm fl-ctr p30 forcebox bg-gry br10">
                                        <h3 class="cl-wht mb20">Hello <span class="bold">user</span></h3>
                                        <input type="text" placeholder="Username" class="block w100p mb10 p10 f-cyan br5 bd-none forcebox">
                                        <input type="password" placeholder="Password" class="block w100p mb10 p10 f-orange br5 bd-none forcebox">
                                        <input type="submit" value="Log in" class="block blockxm w50p w100pxm m0 p10 br5 bd-none forcebox cu-link"><a href="#" class="iblock blockxm ml20 ml0xm mt20xm ctxtxm cu-help"><span class="ffss">Forgot password?</span></a>
                                    </div>

Here we create login box with 400px max width that is shifted to 100% on small screens. Username and password receive different backgrounds on focus and submit button gets proper cursor on hover. On small screens button is expanded, link is moved down. Entire styling of dialog and contents is also done by the framework, as in the other examples.

Demo

Hello user

Forgot password?

<div class="block bd-fat bd-wht br10 mxw250 mxw80pmd fl-ctr bg-err cl-wht p20 rot10 bglw tshd ffm"><span class="xlgtxt">Fatal error!</span> Self-destruct initiated!<button class="w100p h30 mt20 mb0 bold ctxt bg-wht bd-none ffm">This is fine</button></div>

Simple error dialog with varying text sizes, monospace font, emphasizing glow and 10 degree rotation. Also changes size, depending on screen.

Demo

Fatal error! Self-destruct initiated!

<div class="h300 grid grid6col grid3colmd gridgap20px forcebox autoscroll">
                                        <div class="bg-25pw p20 p10sm forcebox">3 8 3 3 6 4 3 5 2 9 8 8 3 7 6 5 8 1 8 7 6 1 5 3 4 0 2 2 5 7 6 9 9 3 9 2 3 8 3 2 3 6 6 8 1 5 0 3 3 9 4 8 4 1 6 8 1 0 5 7</div>
                                        <div class="bd-dsh bd-gry p20 p10sm forcebox">1 9 6 6 7 7 6 3 8 5 4 1 4 7 7 0 1 6 7 4 7 2 5 2 2 7 2 4 9 3 8 6 6 7 4 2 5 3 5 7 6 9 3 2 5 0 8 8 9 1 0 0 0 4 4 5 0 3 3 5</div>
                                        <div class="bg-gry p20 p10sm forcebox">6 7 4 7 0 9 3 1 0 0 7 7 2 4 9 4 0 7 4 1 6 5 3 1 3 2 7 0 4 6 9 4 0 6 5 4 7 9 7 1 4 0 0 0 4 6 4 5 2 1 6 4 0 6 5 9 8 7 0 1 4 3 2 1 8 0 4 3 6 1 5 1 6 9 4 2</div>
                                        <div class="bg-25pw bd-dot bd-wht p20 p10sm forcebox">1 2 3 8 3 6 9 0 4 5 3 3 5 0 2 3 1 0 2 3 6 9 1 2 0 9 0 8 8 9 4 4 2 5 9 6 6 6 2 3 0 3 0 8 2 8 3 6 9 2 7 5 0 2 2 2 9 0 1 9 0 0 1 3 6 1 9 2 2 1 7 7 1 3 6 6 6 9 5 8 7 1 0 0 9 0 8 5 2 7 7 8 0 2 2 2 6 4 6 4 6 5 4 9 3 9 7 2 6 2 8 1 0 0 6 0 5 9 1 9 8 0 6 4 3 6 1 6 1 5 1 0 4 0 6 2 6 5 9 1 6 3 0 0 3 4 3 4 2 6 3 2 2 1 4 9 5 0 3 2 7 4 8 0 5 7 2 9 2 2 1 3 8 1 1 4 7 2 3 3 7 4 1 3 0 9 5 9 3 1 1 6 5 8 0 8 0 5 0 3 0</div>
                                        <div class="bd-dbl bd-gry p20 p10sm forcebox">6 9 2 5 0 5 5 6 2 1 1 6 0 9 6 0 2 2 6 5 5 8 5 2 5 9 9 3 9 3 3 4 2 4 6 6 1 0 1 7 0 3 6 8 3 5 6 4 8 2 5 4 3 7 5 5 6 7 6 0 8 7 8 0 0 0 9 9 5 3 2 9 8 4 2 3 7 7 1 1 6 4 1 4 7 4 5 2 6 1 6 1 5 6 9 1 2 2 1 6 0 1 8 5 2 2 1 7 5 7 1 2 0 8</div>
                                        <div class="bg-gry p20 p10sm forcebox">7 6 8 7 5 7 8 4 5 9 6 4 3 3 9 2 8 7 3 3 4 8 4 6 0 6 8 0 9 0 9 9 6 0 6 2 1 8 7 9 4 2 8 7 4 5 5 8 4 8 6 3 9 3 5 0 8 3 6 2</div>
                                    </div>

Data grid that is 6 columns wide on larger screens and 3 on smaller ones. Height is fixed to 300px, scroll will be added automatically on overflow.

Demo

3 8 3 3 6 4 3 5 2 9 8 8 3 7 6 5 8 1 8 7 6 1 5 3 4 0 2 2 5 7 6 9 9 3 9 2 3 8 3 2 3 6 6 8 1 5 0 3 3 9 4 8 4 1 6 8 1 0 5 7

1 9 6 6 7 7 6 3 8 5 4 1 4 7 7 0 1 6 7 4 7 2 5 2 2 7 2 4 9 3 8 6 6 7 4 2 5 3 5 7 6 9 3 2 5 0 8 8 9 1 0 0 0 4 4 5 0 3 3 5

6 7 4 7 0 9 3 1 0 0 7 7 2 4 9 4 0 7 4 1 6 5 3 1 3 2 7 0 4 6 9 4 0 6 5 4 7 9 7 1 4 0 0 0 4 6 4 5 2 1 6 4 0 6 5 9 8 7 0 1 4 3 2 1 8 0 4 3 6 1 5 1 6 9 4 2

1 2 3 8 3 6 9 0 4 5 3 3 5 0 2 3 1 0 2 3 6 9 1 2 0 9 0 8 8 9 4 4 2 5 9 6 6 6 2 3 0 3 0 8 2 8 3 6 9 2 7 5 0 2 2 2 9 0 1 9 0 0 1 3 6 1 9 2 2 1 7 7 1 3 6 6 6 9 5 8 7 1 0 0 9 0 8 5 2 7 7 8 0 2 2 2 6 4 6 4 6 5 4 9 3 9 7 2 6 2 8 1 0 0 6 0 5 9 1 9 8 0 6 4 3 6 1 6 1 5 1 0 4 0 6 2 6 5 9 1 6 3 0 0 3 4 3 4 2 6 3 2 2 1 4 9 5 0 3 2 7 4 8 0 5 7 2 9 2 2 1 3 8 1 1 4 7 2 3 3 7 4 1 3 0 9 5 9 3 1 1 6 5 8 0 8 0 5 0 3 0

6 9 2 5 0 5 5 6 2 1 1 6 0 9 6 0 2 2 6 5 5 8 5 2 5 9 9 3 9 3 3 4 2 4 6 6 1 0 1 7 0 3 6 8 3 5 6 4 8 2 5 4 3 7 5 5 6 7 6 0 8 7 8 0 0 0 9 9 5 3 2 9 8 4 2 3 7 7 1 1 6 4 1 4 7 4 5 2 6 1 6 1 5 6 9 1 2 2 1 6 0 1 8 5 2 2 1 7 5 7 1 2 0 8

7 6 8 7 5 7 8 4 5 9 6 4 3 3 9 2 8 7 3 3 4 8 4 6 0 6 8 0 9 0 9 9 6 0 6 2 1 8 7 9 4 2 8 7 4 5 5 8 4 8 6 3 9 3 5 0 8 3 6 2

Yeah, great... How about some real examples?

Sure. I mean, what kind of dev would I be, if I didn't use my own stuff, right? Based on rough estimation, I alone have already dropped 200-ish projects with it, but let's just stick to my personal ones. First and foremost example is this very site. If you take a look at the CSS, you will notice just few essential definitions were made. Everything else is handled by the framework. For a couple of proper real-life examples, check the source of deepspacenoir.com and pornstache.pro. Plus, included you will find sample template that will help you try things out on your own.

Other than that, take your time and go through them ~~2700~~ ~~7600~~ ~~8100~~ ~~9100~~ 10900-ish lines of code on your own, I reckon it will take just few minutes to scan the logic—classes are designed to be mostly self-explanatory by concept. Also there is sample html file included with download.

Finally, the download!

Licensed under GNU General Public License v3.0. No visible credit or explicit linking to this site is required but will be highly appreciated.

Warning: v4.0 is incompatible with previous versions! Read history notes below for more info.

Version history

4.0 Major milestone. "m" breakpoint renamed to "md", "l" breakpoint renamed to "lg" for consistency, added x and y margins and paddings, added new max width resolutions to better suit large/wide screen workflows, added display type flex, along with column and row adjustments, and wrap helpers, added 11 and 12-column grid, added screen overlay with light and dark mode, added three types of loaders (spinner, fetcher, skeleton) with light and dark mode, three sizes and additional minimal versions for spinner and fetcher, added semibold font formatting, added blink animation, updated mobile scrollbar hack activation, vertmid class removed, new vertcenter, horcenter and centerpoint classes added to replace and enhance it, removed all special adjustment margins and paddings, removed Bootstrap grid reset, removed 100% html/body forced height stretch, removed all redundant -ms and -webkit definitions, floating definitions moved to corresponding positioning sections, default scroll behavior set to smooth, minor syntax fixes, updated sample template;
3.5 Added 1 column grid, added new "l" breakpoint at 1440px, to better address intermediary desktop resolutions;
3.4 Added global reset, max-height reset, vertical align and sample HTML template to start you off;
3.3 Sub-grid system, new width and height definitions, scroll management, QOL improvements;
3.2 Positioning, width, height and few other classes expanded, max-height definitions added, few minor fixes;
3.1 Minor bugfixes and additions;
3.0 Major milestone. New margins added, min- and max-width reset added, new "sm" breakpoint added at 992px, existing breakpoints changed to 1200px for "m" and 640px for "xm", to reflect "industry standards", number of definitions increased by 38% to a total of 97KB CSS;
2.5 Major milestone. Fluid image model change, new margins added, auto height added, new widths added (including auto), three erroneous "xm" definitions fixed, missing height definitions and box models added for breakpoints, special adjustment percentage based definitions added;
2.1 Width, margin, padding, color and background definitions expanded, float revised, fluid class, text modifiers for breakpoints, form field focus effects and block definitions added;
2.0 Major milestone. Width definitions immensely expanded, new body height modifier added and The Brutalist is no longer a Bootstrap helper but full fledged standalone framework;
1.8 Width, floating and text alignment expanded;
1.7 Forced text alignment added;
1.6 Width and height definitions expanded, text modifiers expanded;
1.5 Major milestone. Breakpoints added, positioning added, floating added;
1.1 Bootstrap reset added, animations added, effects added;
1.0 A bunch of helper classes mostly adding variety of padding, margin, width, height and text presets.

My name is Ivailo

I'm a full-stack designer and writer

I create clean, intuitive experiences that work

I do

About me Arrr, lads! Raise the black!

Projects that spark certain pride, joy or excitement

Infiniti Bulgaria

Деца FUN

Sophea

Genius

Var-bee-tsa

Vivique Hair Lounge

Omniage

The Disaster

Terras Gauda

Few others