hello and welcome to red stapler Channel in this tutorial we are going to talk
about interesting CSS library call NES CSS this video will show you how to turn
your website into 8-bit style in a couple minutes with this library ready
let's check it out there are two ways to install this library if you want to get
the CSS file and host it yourself get it from NPM or yarn install command or you
can just include it to your page using CDN like this tutorial and here's the
example page I already add some basic elements like paragraphs radio and check
box and progress bar I didn't put on any CSS style for them at all only just
basic witdth and margin we all let NES library do the rest
first let's include NES.CSS to our page from CDN you will also need to
include the phone as well this library does not include the font so I will just
use the Google font the default recommended fund is press start 2P
but you can change that to others if you like you will see that the cursor has
been changed to NES style as well as the font now we can use the library by
adding various classes to our element for example you can add an es container
class to create a container box around the element let's try adding it to all divs
with these containers you can also add title into it by adding with-title class
then add title class to the first text element you have
NES.CSS has many built-in buttons to use it just add nes-btn class to any
button element
if you want to change the button types just add additional class to it for
example you can add is-primary class to get a blue button or is-warning for
yellow we can use the same concept for our input fields I'm going to add
nes-radio and nes-checkbox classes to our example elements
same as input field let's add nes-progress class to our progress bar one
feature that I love about this library is it also has built-in CSS icons for
you to use to speak whatever you want and copy them to your page you can also
change the icon size by changing is-large class two is-small or is-medium
there are lots of other features for you to try out check the NES.CSS project
page for the example code so that's all for this tutorial hope you guys liked it
as always don't forget to like or subscribe to our channel to stay tuned
for the next update thanks for watching and see you next time bye