{Carrer web log}

Flexy CSS Framework

Monday, May 28, 2018 { 0 Comments }

I wanted to test the limits of the Flexbox layout. In the past I’ve build all sorts of CSS Frameworks but never with flex layout. So I build Flexy.

What is Flexy and what it does?


Flexy is minimal CSS Framework build with flexbox. It is really small and compressed is 0.33 Kb. Flexy is fluid, responsive and is very easy to personalise. You can personalise the main width any value and unit. It can be 1000px or 89%, 70em or whatever you prefer. Also the gutter(margin) can be easily customised and supports nested columns. But probably the coolest feature are the fluid columns, you can add one or more fluid columns in one row and the grid will auto correct.

Here is the Flexy Demo:

https://vladocar.github.io/flexy/


It can be dowloaded on GitHub (also you can find more demos):

https://github.com/vladocar/flexy

nanoJS - JavaScript for DOM manipulation

Monday, May 21, 2018 { 0 Comments }

Back in 2011 I made picoCSS ultra small JS library with doing very basic DOM operations. picoCSS was foundation of nanoJS.

What is nanoJS?

nanoJS is minimal standalone DOM manipulation JavaScript library. It is around 100 lines of code and compressed is around 1.2 Kb. It uses familiar jQuery like syntax so it is simple to learn.

Why use nanoJS?

First is super lightweight but that is not it greatest quality. It is super customizable and you can add or remove methods directly in the library without braking the structure. All methods are unrelated so adding or removing one will not affect the library. You can make your custom library directly in the main code.

Syntax example:

$(".someClass").css("background-color:green;").html("Hello World");

Compatibility:

IE9 and later.

Credits

I want to thank for Bjørn Rosell for forking picoCSS and making it chain-able.

You can find nanoJS here:

https://vladocar.github.io/nanoJS/

or here:

https://github.com/vladocar/nanoJS

SMART CSS GRID

Wednesday, May 02, 2018 { 0 Comments }

I love small code libraries that work. Most of todays popular CSS Frameworks are huge and probably an average web site will use only 5-10% of that frameworks code. Yes, you can use tree shaking and caching but how many web sites actually do this? I prefer start small and gradually upgrade.

I’ve did some experimenting with the new CSS Grid and it’s specially great if you have graphic design background. It probably is most logical system if you are starting with HTML + CSS layouts. Also it generates much cleaner HTML avoiding unnecessary nesting.

Why I build the SMART CSS GRID system?

Because with just with few lines of CSS code you can make super powerful layout system. The theory is that CSS Grid doesn’t need another grid system because is already a grid system. This is true and the purpose of this project is not to make another grid but to reutilise CSS Grid in a smart way. Basically using few CSS classes that you can reutilise in your entire project, rather than making custom CSS for every layout. Don’t repeat yourself.

This project is also meant as starting point. You could and you should change the main .css file directly. You can easily change the main width of the layout that currently is 960px or change the grid margins with any number or unit that you like. Because this is project is only 36 lines of code you will understand what the code does in less than 10 seconds.

What you can do with this system?

You can build 1 to 12 column grid with any size and any grid margin size. You can merge rows, you can swap column places, if necessary any column sell can become entire grid using the .nested class. It is responsive layout and you can personalise its behaviour. You will write less HTML because it uses cleaner CSS architecture, no unnecessary HTML column nesting.

You can find the project here:

https://vladocar.github.io/SMART-CSS-GRID/

or

https://github.com/vladocar/SMART-CSS-GRID