DEV Community

Arturo Cabrera
Arturo Cabrera

Posted on

Pure CSS Projects Intro

Hello!
I made a template with pure CSS and HTML to showcase any of your projects. Check it out on codepen!

If you want a Tutorial on how to make this type of intros let me know!

Top comments (9)

Collapse
 
oathkeeper profile image
Divyesh Parmar

I was also thinking of writing something similar in my current project at work I just got to know a little trick like: making the first div of the page as width: 100% and then have the 1st child div inside that as margin: 0 auto; this way I will have all my content inside those 2 divs landing just in between the page.

So I want to create a starter like project or article writing the set of instruction one should like to go through before setting up working on a project

Collapse
 
pixmy profile image
Arturo Cabrera

In my opinion the best way to center any content vertically and horizontally is by adding this CSS to the main container.

.container{
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Collapse
 
jamesthomson profile image
James Thomson

Interesting, why do you say this? I'm a fan of flexbox myself. Comparing the two approaches flexbox will centre it perfectly whereas absolute/translate is off.

Flex: jsfiddle.net/jamesbrndwgn/q65x0umz/1/
Absolute/Translate: jsfiddle.net/jamesbrndwgn/ga6yr8hj/1/

I do on occasion use the absolute/translate approach for centring images or icons when the occasion suits, but never for containers.

Perhaps I also just have shell shock from the old IE days, but when the box model doesn't align with the element I often see it as a red flag. e.g. In the absolute/translate fiddle the body height is 0 and that worries me

Thread Thread
 
pixmy profile image
Arturo Cabrera

Hello James!

You're right, flexbox should be the new way to center things with CSS, I'm just so used to the "Absolute/Translate" method, it's time for me to update.

Just one thing. The "Absolute/Translate" method works just fine through all modern browsers, is just that you are missing the commas between the "50%" in the translate rule, also you added a width of 50%, go ahead and remove this and the word "Foo" will be just on the center this time.

Thread Thread
 
jamesthomson profile image
James Thomson

Whoops! Good catch. I guess that's the problem working with build systems these days, that rule would have been flagged.

Collapse
 
vuild profile image
Vuild

The animations are nice & smoothly done. Good stuff Arturo.

Collapse
 
nikosdev profile image
Nikos Kanakis

Amazing work Arturo!
I would like to read/watch a tutorial on how you made these codepens!

Collapse
 
araw830 profile image
Atul Rawat

Yes I need a tutorial....😎

Collapse
 
nikhil177 profile image
nikhil177

I want full tutorial of this plz