flexboxes

CSS Flexboxes

February 26th, 2017

Today I would like to tell you all about this awesome property that CSS got a while back, but is now finally fully supported by all browsers and should be used by all web designers and developers. This property is called Flexbox or display: flex.

Why should you use it, you might ask. The reality of it is, if you have ever tried to centre something vertically and horizontally in CSS, you know the struggle that it is, and you know how after swearing at the screen for 30 minutes, you’d just end up cheating and setting the pixels manually, cause nothing else works. What if I told you that flexboxes allow you to centre an item within a container with 3 lines of code, and it would consistently work across all browsers? Well it can:

display: flex;
align-items: centre;
justify-content: center;

Flexboxes use the concept of a container and items within it, and uses tools like: justify and align to determine the position of the items within the container. Furthermore, you can easily flip the direction (order) of the items using flex-direction, change the direction from row to column and  grow and shrink the items with just a few lines of code. Its that simple.

I have started using flexboxes at work exclusively, and have not even had to write another "margin: 0 auto" in months! Now I am in the process of fixing up the anime club sites with the same stuff, to make them more robust and the code cleaner and more manageable.

If you want to learn more about this, then here is a link to CSS Tricks, a great website for learning about various interesting css properties and selectors.

Also there is a flexbox game, where you can learn how to align elements in various ways. Unfortunately though, they dont show you the code, but you can work it out from the buttons you are pressing on their UI.

And here is an article (with GIFs), that goes over all the flex box selectors and explains how they work.

sass

Web, the SASSy way

July 24th, 2016

I’ve been designing and coding websites for a good 4 years now, but only as a hobby in my spare time, nothing serious or professional. It was all basically just simple HTML DOM together with a CSS file defining the look of my sites. Sometimes I would experiment with certain JS features to have menu bars and various animations, but hat was about it. Last year, when I migrated my blog hosting, I had to learn how to set up a web server from scratch using LAMP. And I did, twice: jamiejakov.lv and utsanime.net. Looking back now thats not a great achievement, especially with all the guides out there, but hey, when you don’t know anything, even something as simple as setting up a LAMP can be hard.

And now I think its time for me to learn more about web programming, about the frameworks that are used, about the nifty things that have been developed to make our lives easier and create intuitive and beautiful user experiences. And the first think I am going to learn is SASS.

What is SASS? Its pretty much CSS on steroids. It allows you to declare variables, nest code, add mixins, inheritance and much more. But why listen to me, when they got a clear guide on all the great features up on their website: SASS-Lang. I am just going through the codecadamy tutorial on SASS and am planing on implementing it in my future AnimeSydney and anime@UTS redesigns!

Also it is important to note that SASS is a pre-processor, so the browsers themselves can’t interpret anything form a .scss file. So we must compile the SASS file first, which will transform it into a browser readable .css file. Most text editors for code have plugins for SASS compilation. I, for example, use Coda by Panic.Inc for all my web development and they have a great SASS plugin available for download.

So try it out, see for yourself who much more efficient you will be at coding when you can use variables and inheritance. Happy Coding!