Meet Navio !

#css #webdev #beginners #opensource

Hello There !
Today's article is a little bit different than usual , it's not about .Net or C#. However , it's about CSS.

I've used CSS for quite a while and still up to this point , I struggle with it a lot , maybe because of the fact that I've been always procrastinating on watching a CSS course , but yeah , I can use CSS nevertheless , although , one part of the page I mostly focus too much on when starting a new project , is the Navigation Bar , and often times I find myself wasting plenty of time and energy in making that good looking Nav Bar , subsequently , I got bored from that , and I didn't also appreciate working with Bootstrap pre designed Nav Bars that kind of look a bit lame , despite the fact that it's also burdensome to customize Bootstrap , so , I decided to make a small Github Repository that goes by the name
Navio , and in this article , I want to introduce you to that simple open source project.

What is Navio ?

Put simply , Navio is a collection of Navigation bar designs that you can copy and paste straight into your project , but please keep in mind that the designs I've made aren't super professional , but they serve as decent templates that you could then build upon , at the time of writing this article , Navio has 5 Nav bar designs , which realistically isn't much to choose from , but I made a basic template that can be easily used as a blueprint to build far better designs , but it's a good starting point that you could use maybe as a placeholder to fill in the gap , or something to keep there , I also created a file called SchemeConfiguration.css , this is a CSS file that contains variables for customizing the colors, adjusting the font sizes , and altering the transition periods , the file is pretty easy and everything is self explanatory , in case you decided to use any of the designs , make sure to add this CSS file and link it to your HTML.

Navio is written using HTML and Vanilla CSS , only one design at this moment requires a JS file to make an interactive menu button.

This is a quick depiction of the available designs at this moment , I tried to keep the styling and markup as simple as possible , so you can understand what's going easily without getting mad at who wrote all of that nonsense 😂

One design I like the most is the design with the search button , this search is completely animated and it looks lovely , additionally , the designs are responsive which means they adapt to different screen aspect ratios , I left a read me text file in the repository , it contains some useful info about how to customize things and the like , so make sure to see what's in it.

This project is not professional or industry level by any means , although the designs are good looking and useable in case you are a solo developer or a small team of devs that don't want to put much time in the design process , this could help speed things up a notch , but yeah , have fun with it and mess around with the designs , you might end up with something fascinating.

The repository link is here:
https://github.com/rasheed-k-mozaffar/Navio

That's about it for today's article , if you have any suggestions , please inform me in the comments , I would then attempt to correct any mistakes in case there's any.

Also , let me know what you think , and should I keep working on it or not ?

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.