Flex box intro – css finally fun to use

Flexbox is new style element in css that controls positioning, as of recently it has decent support in browsers ie. all modern browser are supporting it.

This maybe doesn’t sounds as huge as this thing is, but it is enormous! It removes need for floats and helps greatly with grid systems.

It actually allows positioning elements on the screen, aligning them both horizontally and vertically. This makes much easier to position and size elements, create layouts etc. Probably need for css grids is no longer as pressing. Main idea is to allow elements to be sized individually and let the container figure out how to position them.

W3 working draft for flexbox http://www.w3.org/TR/css3-flexbox/

I find this guide very helpful with visual examples:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here are some things it solves and how to use it:

let’s make container new type ‘flex’

.container {display: flex; /* or inline-flex */
}

next we can say which way we want to lay out elements

.container {
     flex-direction: row | row-reverse | column | column-reverse;
}

you can specify how to wrap inside content

.container{
     flex-wrap: nowrap | wrap | wrap-reverse;
}

you can define that container can grow or shrink, which allows elements to take more space or shrink when needed.

.item {
    flex-grow: ; /* default 0 */
}

.item {
    flex-shrink: ; /* default 1 */
}

Next are very interesting interesting, it let’s us justify and align content and it is very powerful:

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

There are more examples on how to do complete layout in CSS guide I linked before, also Mozilla described really well

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Honestly from this perspective, I don’t see why we had to wait this much to solve this issue.

Advertisements

Prototyping is fun with Bourbon, Neat and Slim

I am working on my super-secret-awesome-project and prototyping is something I do a lot lately. I can say, it is not as easy as it looks to others, but it is great joy to make prototypes.

Anyhow, I was trying to focus on mainstream frameworks, like Bootstrap and Zurb, and those are definitely awesome, however my attention slips often to smaller offers.

So, I am playing with Bourbon which is Sass css framework, very simple, very awesome. Often for prototype you don’t need anything crazy like Bootstap and Bourbon is just fine.

So on this Bourbon has it’s own grid that you can add and it is called Neat. Great thing about Neat is that semantic grid, which means you will not use grid_8 or some other weird class name in your divs. I personally never had problem with those, I like those things exposed in source, so I don’t have to look in 7 files to understand how layout is created. Still, it is semantic and awesome, and we don’t even have to say it anymore, responsive.

From now on, anyone making anything that isn’t ‘responsive’ should emphasize that, instead of having to say this is some competitive advantage to have websites responsive.

We are professionals, the same how sites had to work in all browsers, they still have to do that and work across devices, that is just what has to happen. If you site isn’t doing it, that means it is old, pre 2008/9 or so.

Anyhow, back to my simple and awesome setup for prototyping. On top of all this awesomeness with Bourbon and Neat, I added Slim, templating engine that is very similar to Haml, but has even less to write, more clean html. When you combine expressiveness and cleanliness of Slim with Bourbon, you get awesome html that just sings like Pavarotti. It is feast for your eyes seeing html.

So this is what occupies my attention these days.

Mysteries of CSS still abound

It seems I don’t know enough CSS. This is really funny as I tend to do css really good. Only one better is Emil who usually does CSS. However sometimes there are some small or not so small project that required tweak here and there.

What really got me confused is that aside from handling margins and padding, IE and others should be more or less the same, or I tend to believe that. Well, I made perfectly good menu that worked extremely well, except that for no apparent reason, a div above it would overlap it, in IE only. I tried all regular and natural and usual ways to get around it and it wouldn’t budge. If I increase size so it wouldn’t overlap in IE, I would have really ugly stripe of white in other browsers.

Finally what worked is that I added a border to menu the same color as bottom menu and then tweaked size until everything matched. Why this works, is totally beyond my comprehension, hence conclusion that I probably don’t know css as much as I believed to do.

Here it is, with few extra lines removed. This is as plain as can be.

#logoWrapper{
    background-color: #FFCC33;
    height:96px;
    }

#topmenu {
    border-top:6px solid black;
    background-color:#000000;
    color: white;
    height:26px;
}

Gallery of great looking websites

I’ve been planning for quite a long time to make this site. I don’t know why I didn’t do earlier, but I didn’t. Now it is work in progress, it is going quite well. I got to v0.1, my internal plan is to release it on v0.5. Each of course is an iteration with few features.

This is a site that will feature great design. I know that there are sites like this already, but they are not exactly what I want to make, hence this site. I think this will be awesome resource for webmasters and specially for web designers and design firms to promote good, quality work.

Internal plan is to release it on 29th of february. So I need to hurry up.

Site as  such is not overly complicated, but I have clear idea what needs to be where and this nitpicking tends to slow things down.

HTML5 Styles

I follow Ajaxian blog and they posted very interesting thing today. It turns out you can do very cool styling of your elements in new browser that I and most likely other developers might not be aware of.

I will borrow the code from their site:

<html> 
<head> 
<style>blah { color: red; }</style> 
<script>document.createElement("blah")</script> 
</head> 
<body> 
<blah>Hello!</blah> 
</body> 
</html>

Now, from article this code should work in IE, and it does, it produces red Hello. However, just out of curiosity I wanted to see if it might work in Firefox and Opera. I figured it will not work in Opera, so I started it first and surprise, surprise, it does. Then I tried Firefox and it works there as well.

I have to research this a little bit more to understand it better, but this looks cool to me. Since it works in current versions of major browser, it is good for me to use on my projects.

Beautiful Casa

  I just got final OK and launched a website Emil and I were working for few weeks. Casa Zocalo is luxurious rental villa in Mexico, that comes with full staff. It is great place to go and relax. Well, at least that is how I heard as I never have been there.

One thing is for sure, this website is a thing of beauty! Crafted carefully to be compliant with highest W3C standards, search engine optimized and Google loved, this site is perfection uploaded.

casazocalo_home

casazocalo_photos