{Carrer web log}


Blog about web design & development

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

1 Line CSS Framework

Monday, March 12, 2018 { 0 Comments }

I originally made the 1 line CSS framework in 2009. The point was and still is, you can make CSS grid layout only with one line of code. I made this project for fun but also to prove a point that you don’t always big complex CSS layout system.

The trick of this project is that every column can be divided in two. So with this trick we can make 2,4,8,16 column system.

Here is the “magic” code:

.dp50 {width:50%; float:left}

Just one CSS class, that is doing all the work. You can also make it responsive but it will no longer be one line system.

Like I said before this project was made for fun and I don’t recommend it for production. Mainly because of unnecessary div nesting.

Here are some demos:

Demo1

Demo2

Demo3

You can download the demos on GitHub or here.


Hand Drawn Icons V.2

Wednesday, November 04, 2015 { 0 Comments }

Few years ago I made the first version of the Hand Drawn Icons. It started as fun project and today become big 410 + 410 icon collection. Everything is hand drawn in Photoshop using the Bamboo drawing tablet.

All the icons are in raster format simply because you can’t achieve that level of detail with the vector formats. Unfortunately the raster icons will not scale like vector icons. Beauty v.s functionality. For me the process of drawing was magical experience almost like meditation. There is some hidden beauty in the hand drawn art, so un-perfect yet pleasing and beautiful.



Enjoy!

www.handdrawnicons.com





Illustrator Wireframing Kit

Wednesday, October 08, 2014 { 0 Comments }

I started the Photoshop Wireframing Kit as un supplement for wireframing for the people who use Photoshop as primary design tool. I often get requests for Illustrator Wireframes, so I exported and adjusted all the shapes into Illustrator compatible format. I wanted to make Illustrator even better tool for fast prototyping.

I used the Illustrator native support for "Illustrator Symbols" for Drag & Drop functionality. So you have 350 Illustrator shapes & icon to be used for rapid illustrator prototyping.





Download Illustrator Wireframing Kit or here.



Hartija - CSS Print Framework (Update)

Wednesday, September 17, 2014 { 0 Comments }

I has been 6 years from the last Hartija update. Hartija was my first CSS Framework, I never updated it because "It simply worked" in most cases even in browsers like IE6.

I decided to add few new features and fixes and also to move everything to GitHub.

What is Hartija?

Hartija is universal printing stylesheet or best printing CSS practices all in one.

How Hartija works?

Just use it like normal CSS:



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


 

The "magic" is in media="print", this CSS file will be used by the browser only when you print. You can also use it inside CSS like @media print { .. }.

Only work you need to do is hide the stuff you don't need in the final print. Basically you hide some id and class in the CSS like: #navbar, #footer, .someClass, .otherClass { display : none; }

Download Hartija CSS Framework on GitHub



Photoshop Wireframing Kit - Update

Wednesday, March 12, 2014 { 0 Comments }

I finally had a time to update Photoshop Wireframing Kit giving the main focus on mobile app prototyping in Photoshop. All the main mobile phone and tablet shapes(Android, iPhone, iPad, Windows Phone are introduced into the Kit.




http://www.photoshopwireframingkit.com/

Also some demos.

I'm planing to introduce a number of now tools and apps for the Photoshop Wireframing Kit, hopefully this month.

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

§Archives <<<

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License