loading...

Which CSS framework (if any) for my portfolio website?

dan_v profile image Dan V ・2 min read

Hi all. First time posting on DEV so I hope I'm posting in the right place for this sort of question.

A little background about myself: I'm a junior dev, currently with 1 year of industry experience. In terms of frontend experience, I have worked with React, Vue.js, Bootstrap, Material-UI and CSS flexbox (not Grid yet).

I'm looking for a new job currently and have decided to make myself a portfolio website.

I'm building my website in React, because I don't get to use it at work and want to brush up on my skills (I did a lot of React at bootcamp but we use Vue.js where I work).

In terms of styling my website, I decided to use Material UI. I came to this decision for two reasons:

  1. I already use Bootstrap a tonne at work and wanted to work on a different skill.
  2. MUI is a bit more flashy than Bootstrap, which serves well for what is essentially a promotional website.

However, I'm not sure about my choice of CSS framework. I'm starting to worry that MUI will be too restrictive; that my site will look like a generic product website.

Ultimately, I want to build a website that:

  1. looks good, with a personal touch
  2. shows off some technical skills
  3. won't take too long to build

Does anybody have any advice on what route I should go down?

Should I carry on with MUI so I can show employers that I know more than just Bootstrap?

Should I try using pure CSS to show that I understand CSS and help my site look more personal?

Maybe I should stick with Bootstrap for speed, with the addition that it's very 'plain' and it's styles can be overwritten easily?

Or should I do something completely different?

Thanks. And apologies if this was a bit long-winded!

Discussion

pic
Editor guide
Collapse
perlatsp profile image
Perlat Kociaj

Hi Dan, short answer is dont use any CSS framework!
When I wanted to build my portfolio website, I went through many iterations, I've used Bootstrap,the later changed it to UI KIT.
Then i decided to go no framework, which is the best option in my opinion, as a junior looking for your next job you need somehow to proove your skills,and no framework would be the best way to do it. Also make sure you dont forget that It doesn't need to be perfect

Collapse
dan_v profile image
Dan V Author

Thanks for the advice, sounds like a good plan! It will definitely challenge me to not rely on a framework and it'll be interesting to see what I can make from scratch. Looking forward to giving it a go. 😁

Collapse
shanerainville profile image
DevOpsTea

Absolutely great advice. Learning the fundamentals is far more valuable than specializing in a framework. By doing so you will gain a deeper understanding of a framework's mechanics and your knowledge will allow you to manipulate it further.

Collapse
eruizdechavez profile image
Erick Ruiz de Chavez

Excellent advice indeed from Perlat Kociaj.

Dan V since you are creating a portfolio website, I wouldn't really stress about what you should use or not, because it is a portfolio. It is your playground to test new things and practice known ones, and it is a place to brag about what you know, so use a bit of everything and try to justify somewhere why you used it, what you liked and disliked about it, what you learned about it, etc.

Collapse
kaeldougherty profile image
Kael Dougherty

I was building a friend's portfolio and he asked for this very bare bones layout that there was no clearer way about it than to use HTML/CSS and nothing quite like it that I could copy and paste.... Ended up being far more of a learning experience than I could have predicted. Glad to see that's a valid way to prove one's skills. Is there anything else I'm not taking away from what you were getting at?

Collapse
jcs224 profile image
Joe Sweeney

If you're looking for some convenience but don't want your sites to all look the same, Tailwind is fantastic.

If you want to do your own styling without a framework, I highly recommend using a CSS reset like Normalize to avoid super-annoying browser inconsistencies.

Collapse
dan_v profile image
Dan V Author

Someone recommended Tailwind to me not long ago, it sounds really cool. Just took a quick look at their website and I like the philosophy behind it, i.e. utility-first, not opinionated style-wise. Thanks for the tip.

Also I've used CSS Baseline which I believe does essentially the same thing as Normalize, though interested to see how they compare. Thanks again.

Collapse
lukethacoder profile image
Luke Secomb

+1 for Tailwind as a utility. Still gives you freedom to use custom css without having to use !important tags everywhere to override. The theme config is also awesome

Collapse
mzahraei profile image
Ardalan

I use Bulma it's great

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Currently, I use Bulma a lot, but it is not complete -- no spacing helper, so I created spacing.scss

I also want to recommend no framework, but heavy use of CSS preprocessors, such as SCSS;also with Flexbox.

Collapse
faseeh12 profile image
faseeh12

Hey Dan,

I have an advice for you whenever you go for CSS frameworks like bootstrap and MUI they have thier limits if you want to polish your skills go ahead and write your own css from scratch try to make it responsive it will take time but it'll be worth it.

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Why not none and code it all from scratch - to show you know how? :)

Collapse
loouislow profile image
Loouis Low

I use Yogurt to craft my beautiful portfolio website.

Collapse
epranka profile image
Edvinas Pranka

Hi, If you are using the React.js, how about the styled-components ?

Collapse
pachicodes profile image
Pachi (she/her/ela)

I am a user of pure CSS myself, and created my portfolio with Gatsby

Collapse
souk profile image
Souk

A custom Milligram css in sass/scss. Just @import what you need. Super lightweight.

Collapse
narhkpodo profile image
Daniel Narh

You can go with semantic-ui. It is greay and stylistic in nature

Collapse
sidd82 profile image
Ramkrishna Pednekar

I use tailwind because of its utility classes.