Ways to Make your Website Pop!
Now we all know that making your web application look modern and presentable is a huge part of the overall project, but there are so many ways to make it look good! Today, I’m going to show you a few of my favorite frameworks for CSS that’s both easy to use and make your application stand out!
Bootstrap
Bootstrap and CSS are like 2 peas in a pod, they are rarely seen without one another. The Bootstrap framework is both easy to install and easy to implement. All it takes is one quick command you’re ready to go! It features Sass variables, mixins, responsive grid systems, extensive prebuilt components, and powerful JavaScript plugins. You can use Bootstrap for pretty much every styling aspect of your project, including the navigation menu, drop-downs, image/video carousels, paginations, onClick alerts, and even themes. You can download bootstrap with the following command or head over to the website for more information.
npm install bootstrapMy personal favorite use-case for bootstrap is building responsive navigation menus. They provide great documentation and code snippets for users to copy and paste to their own website. The code below ticks off almost every major feature of a modern day navigation bar, which includes active links, a dropdown menu, and a search bar. You can of course add other styling aspects like colors, height, position, and spacing to customize it and make it your own!
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>SVG (Scalable Vector Graphics)
I came across this animation tool quite recently and was blown away by how simple and fun it was to implement. For those of you that are unfamiliar, an SVG is a file format that allows you to display images on your website. This means that you can scale an SVG image up and down as needed without losing any quality. Here is the step by step process to make an animated logo or header title using SVG and a little bit of CSS.
- Head over to Figma.com and type out the word you wish to animate. Make your background black, the word a lighter color.
- Next, right click on the word and select “outline stroke”. Now make the stroke color white and the outline 1–3, while also deleting your fill color. You should end up with something like this.
3. Import this image as an SVG and drop it in your file. Now we want to animate the lines similar to a snake moving through the word before connecting at the very end.
4. Below the entire SVG tag, write the following code to grab the length of the stroke lines. We’re going to use these numbers to animate the path in CSS later.
const logo = document.querySelectorAll("#logo path");for (let i = 0; i < logo.length; i++){
console.log(`letter ${i} is ${logo[i].getTotalLength()}`);
5. So now that we have all the path lengths of each letter, we can start animating them! For each letter, we’re going to input this code into our CSS file. Stroke-dasharray: adds space to path length and stroke-dashoffset changes the position of the path. If we get the exact length of the path and plug it into both attributes, then each letter will animate from 0 to the end of letter with no gaps. An optional attribute I added to my project was to ease each letter forward 0.3 seconds from the previous one so the animation looks smoother.
svg#logo path:nth-child(n) {
stroke-dasharray: 507.99310302734375;
stroke-dashoffset: 507.99310302734375;
animation: line-anim 3s ease forwards 0.3s;
}@keyframes line-anim {
to {
stroke-dashoffset: 0%;
}
}
AOS (Animate On Scroll)
This is also a great lightweight framework that’s both easy to install and implement! It doesn’t have as much functionality as Bootstrap, but it’s still a great way to modernize your web application in small ways. AOS does exactly what the name suggests, it allows you to animate elements upon scrolling up or down on your screen. Some of the simplest animations are fading, flipping, zooming, and sliding. Here are the steps to add AOS to any code!
- Install AOS, add the link and script tags, then initialize it.
npm install aos --save<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script><script>
AOS.init();
</script>
2. Add the following code to your divs:
<div data-aos="your choice of animation"></div>AOS has a bunch of customization you can add to your initial animation including the following. See the full list of animation attributes here.
AOS.init();
// You can also pass an optional settings object
// below listed default settings
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>
These frameworks are only a small fraction of all the different types of animations and CSS styling tools that make a good website great. Hopefully you’ve found something you like or learned something new with these technologies!
For more information about me, please visit my LinkedIn or Github!