Skip to content

3-library-instructions.md

Latest commit

 

History

History
120 lines (75 loc) · 3.76 KB

3-library-instructions.md

File metadata and controls

120 lines (75 loc) · 3.76 KB
Raw

Adding a Library: Installing Your First Library

Back to Overview | Next: Finding more libraries

Enhance your website by adding third-party libraries. Let's start by installing a simple style library called PicoCSS and an animate-on-scroll library called AOS (Animate-On-Scroll).

PicoCSS will automatically handle some basic formatting for you and make it easy to have a clean, modern looking website without taking a whole web design class.

AOS.js is an example of a simple JavaScript library enhancement -- in this case, it makes it easy to make items fade in or animate in some way when they first scroll onto the screen.

Installing PicoCSS

Step 1: Install PicoCSS via npm

To install new libraries, you'll need to run the npm command from a terminal. This is a text-based user interface that has existed in computing since well before the typical graphical interfaces we know today, but it is still used by programmers frequently.

To open a terminal in Github Codespaces, you'll find the "Terminal" tab next to where you've opened "Ports" before at the bottom of the screen. If you're already running your project, you'll need to open a new terminal by clicking on the "+" icon which will open up a command promps where you can type your command. Typically the prompt will end with a $.

Then, type this command:

npm install @picocss/pico

Step 2: Import PicoCSS Globally

Open your main.js file located in the scripts directory and add the following import statement:

import "@picocss/pico/css/pico.min.css";

Step 3: Use PicoCSS in Your HTML

You can now use PicoCSS classes in the HTML files (or in the HTML generated in your js files). For example, to center your content and set a reasonable width, you can add the following:

<main class="container">
  <!-- Your content here -->
</main>

You can also take a look at the PicoCSS documentation to see how to make tooltips, dropdown menus, and other basic UI elements.

Reference: PicoCSS Documentation

Adding a Library: Installing Your First Library

Now let's install AOS (Animate on Scroll), which adds animations to elements as they scroll into view. This library requires both a CSS import and a small JavaScript call to initialize.

Installing AOS

Step 1: Install AOS via npm

Run the following command in your project directory at the terminal:

npm install aos

Step 2: Modify main.js

Open your main.js file in the scripts directory and add the following lines:

import Aos from "aos";
import "aos/dist/aos.css";

Next, to make AOS run, we need to add this line which starts up Aos.

Aos.init();

Step 3: Use AOS in Your HTML

Now, you can add AOS to any HTML element by using the data-aos attribute.

For example, to make a heading fade in as it scrolls into view:

<h1 data-aos="fade-in">Welcome to My Portfolio!</h1>

Step 4: Customize Animation Settings (Optional)

You can also customize the animation duration and delay by adding extra attributes:

<h1 data-aos="fade-in" data-aos-duration="1500" data-aos-delay="300">
  Welcome to My Portfolio!
</h1>

This example will make the heading fade in over 1.5 seconds with a 300ms delay.

Reference: AOS Documentation

Now your project is set up to use AOS for scroll-triggered animations! You’ve imported the required CSS and initialized the library using the main.js file with a conditional check to ensure it runs only in the browser.

Back to Making Your First Change