By Michael Yadchuk - Jul 07, 2018
With the constantly-changing "norm" for the stunning appearance of your site, it can frequently be difficult to adapt to what users perceive as beautiful. As a result, effective minimalist symbolism is more needed than ever, which is why the creators of vivid.js have created a vast library of customizable SVG elements that you can implement directly into your site.
In today's lesson, we'll be going in-depth on how you can use vivid.js for your site by covering:
So, without any further delay, let's dive right in!
(if you'd like to get more info on vivid.js, be sure to visit the official site and check out Gary Simon's vivid.js project on GitHub)
Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.
As always, before getting into the project, you'd need to install Vivid.js. In order to do this, you'd need to have node.js installed into your command line interface (if you haven't done so already, be sure to download it and follow the steps by clicking this link)
After node.js is installed, go into your CLI and type the following in to make a project folder:
> mkdir svgiconpackage && cd svgiconpackage
After you cd into the name of your folder, just run the command npm init -y, which would allow you to automate saying yes to the specified prompts. If everything goes successfully, you should be able to hit type in code . to open the JS library in Visual Studio:
> code .
To make this as simple as possible, I'll provide a chronological list of the steps you need in order to get going:
3. Return to the console and begin the installation process for the icons. In the video, Gary uses NPM to install the icons, but you can check out different formats by visiting the vivid.js website and heading to the docs section. You'll find installation methods in the installation section of the docs. Since we're using NPM for this example, just copy the code from there, return to your command line, and input it. I'd also recommend saving it by adding --save to the end of the command:
npm install vivid-icons --save
4. After you hit enter and the installation is completed, return to the index.html file that you made back in step 2. From there, underneath line 7, type in the following code to add the icon library in order to add the installed library into your code:
<script src="node_modules/vivid-icons/dist/vivid-icons.min.js></script>
5. After including that code, reference a (currently nonexistent) CSS file directly above it by inputting the following code:
<link rel="stylesheet" href="main.css">
By now, if you've followed all the specified steps, you should have everything installed and all the code that I gave you written (so far). Now, it's time to test this library out in a browser. Once again, I'll provide you a chronological list of steps:
<i data-vi="home"></i>
2. After you've written that code, you're ready to run! Just find the index.html file on the left panel of the Visual Studio interface, right-click, and hit "reveal in explorer". This should allow you to open a browser window with a tiny home icon on the top left:
(In the video where Gary did this demonstration, he acknowledges how this icon can also "infinitely scale". Since it's a vector icon, there's no pixelation if you zoom in, so you can use it via any size.)
Congrats! If you've gone this far, you're on your way to becoming a master with vivid.js! Now, things are gonna get a bit more interesting...
Now that you've run your first vivid.js project in the browser, it's time to experiment with the real power of the JS library. In the initial tutorial video for this library, Gary demonstrates this by creating a basic interface out of different icons. You'll see what I mean once we dive into creating this simple project, which I'll show you how to do by, once again, chronologically listing out and describing the steps:
<ul>
<li>
<i data-vi="home"></i>
<a href="#">Home</a> <!–– this is what we ran for the home icon-->
</li>
</ul>
In this code, along with keeping the information that runs the home icon, I also added tags for unordered and ordered lists to organize the data, along with an href that displays text with info on what you're clicking on.
2. Now, it's time to put some more icons into your code to create what would essentially be a beautifully-designed UI. You can do this easily by copy-pasting the code from step one and just customizing what icons you want to use. For instance, if you wanted to have an option on your site to visit the settings area, you could just replace the text in between the quotes on line 3 with "cog", which is the name of the icon in the vivid.js library that represents an image of a cog. You can also replace the "Home" text in line 4 with "settings", as I've demonstrated below:
<ul>
<li>
<i data-vi="cog"></i>
<a href="#">Settings</a>
</li>
</ul>
Yep, it's that simple!
3. Once you have a few ideas for what options you should have in a UI, you can type out something like what I've got below:
<ul>
<li>
<i data-vi="home"></i>
<a href="#">Home</a> <!–– this is what we ran for the home icon-->
</li>
<li>
<i data-vi="graphy-poly"></i>
<a href="#">Stats</a> <!–– this is what we ran for the home icon-->
</li>
<li>
<i data-vi="cog"></i>
<a href="#"Settings</a> <!–– this is what we ran for the home icon-->
</li>
<li>
<i data-vi="pen"></i>
<a href="#">Contact</a> <!–– this is what we ran for the home icon-->
</li>
</ul>
4. Once you've got that down, you can return to the browser window where you ran your first icon, refresh, and you should be presented with a very simple interface:
By "very simple", I am, of course, referring to the fact that it's quite ugly-looking at the moment, but that will change very soon...
So, by now, you've created a very stripped-down version of a UI with a few icons that are associated with different things. Although it's a step up from when you displayed just a single icon on your screen, it's far from being a good-looking UI, which is why it's now time to add some CSS into the mix. This phase has several primary steps associated with its implementation:
body {
background: #f1f1f1
padding: 4em;
font-family: 'Montserrat';
}
a {
text-decoration: none;
margin-left: 15 px;
color: rgb(15, 129, 223);
}
ul {
list-style-type: none;
background: #fff;
border-radius: 8px;
padding: 1em 2em 2em 2em;
}
svg {
top: 15px;
position:relative;
}
span {
margin-top: -40px;
display:inline-block;
}
3. After you have this CSS applied to your browser page, the UI should at least be a bit more good-looking. All you need to do to see the changes is to just refresh the tab that you ran your code in last time. As you'd see, the design issue had been resolved, at least in terms of this minor project:
Now, we're down to tackling our last bullet point; customizability.
Not only does Vivid.js give you access to a vast quantity of free icons that you can use for your site, but it also has customizability features. The documentation points out how you can customize both the default color and size of your icons, which can come in quite handy!
Let's say that you wanted to customize the color of your icons. The icons that are displayed on Vivid.js are, by default, yellow, however, a lot of them could have two other colors that help make the overall design more beautiful. Although this could serve as an advantage when it comes to the appearance of your site, it could also make it difficult for you to change the colors of the icons in order to fit your site's colors, especially if you've introduced a lot of icons into your site.
In order to prevent you from performing unnecessary manual tasks when changing your icon colors or sizes, I've created two different lists that will teach you how to both customize a specific icon and an entire set.
We'll start by identifying how to customize a specific icon:
<i data-vi="home" data-vi-primary="#red"></i>
By typing in the code shown above, you should be able to see your home icon change color after hitting refresh:
This process would be very similar when you're customizing the size of an icon as well. Just use the data-vi-size attribute instead.
Now, let's see how we can customize all our icons at once:
2. Once you reach config.js, there should be info on the default size of all your icons, a primary color, accent color, and prop color:
From here, you can modify any of the values. For the sake of this tutorial, the only change that was made was to the primary color:
If you'd like, feel free to tinker with the size and color, however, the changes you make there aren't savable yet.
3. In order to save your widespread changes, right click on the config.js file on the left panel and then select "open in command prompt", which should open the Visual Studio command prompt. Before running a command, there's an extra step required for Windows users. Since Gary was using a Windows for this project, he needed to go over to the package.json file and find a line of code that said:
"open-html": "open ./dist/preview.html",
If you are a Windows user, change this line to:
"open-html": "start ./dist/preview.html",
4. After taking care of that, you'll need to run a few commands in the command prompt, with the first one being the one below (you'll only need to run this command once, and don't have to retype it for future projects):
> npm i npm-run-all
5. After you've run that command, one final step is required. Just run this command and you'll be all set:
> npm run build
Now, a new window should open featuring a series of icons that have the features you've specified as the default ones. You can see how the initial set of icons and the new set vary:
In the tutorial, the initial set of icons had a widespread primary color of yellow:
This is the new set, which, as you can see, displays a different primary color for the icons:
Based on the information specified in that window, it should also affect all of the icons in the UI project that you've created earlier:
Once you are able to get to this point, you can officially call yourself a Vivid master!
If you've followed along with this tutorial, you would have obtained a vast amount of info on how you can implement a javascript library known as Vivid.js into your site. From installation to customization, you are now ready to take this library and use it to make your website beautiful by adding that extra layer of design to it!
If you're ever willing to review the content from this article, always feel free to bookmark it or clip it using Evernote, since you can't master this content just by reading it. Implementation and revisitation are two crucial aspects when it comes to the mastery of any concept, but whatever you choose to do with this info, I hope that you can take advantage of it in the best way possible!