{Carrer web log}


Blog about web design & development

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.


0 Responses to “1 Line CSS Framework”

Post a Comment

<< Home

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
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License