insta-style v1.0.3

How to Install in Node.js

With npm

npm install insta-style

To Directly Import from Github Use a Link Like This

https://raw.githack.com/GoodStuffing123/insta-styles/master/default.css

How to Use

To use in an HTML file, simply import it in the header using a link tag.

<link rel="stylesheet" href="insta-style/default.css" />

To import in a JavaScript file, import it using import or require.

import "insta-style/default.css";

or

require("insta-style/default.css");

List of Different Theme Files

This package comes with multiple different style themes. Just set the name of the CSS file to the name of the theme within your import with .css at the end to use it.

Themes

• default
• professional
• spring
• summer
• autumn
• winter

More themes coming in the future!

Extras

Here are some extra things you can do to customize your styles a little more.

Note that these are not required to make the package work! This is mostly a plug and play sort of thing that you shouldn't have to do much if anything to get your web page looking good!

Color Classes (these will change based on the theme you pick)

Background color

• c1
• c2
• c3
• c4
• c5

Text color

• c1-text
• c2-text
• c3-text
• c4-text
• c5-text

Placement Classes

• center align text center

• left float items left

• right float items right

• right float items right

Padding Classes

• p0 padding 0

• p1 padding 1rem

• p2 padding 2rem

• p3 padding 3rem

• p4 padding 4rem

• p5 padding 5rem

• p6 padding 6rem

Margin Classes

• All Edges

  • m0 margin 0

  • m1 margin 1rem

  • m2 margin 2rem

  • m3 margin 3rem

  • m4 margin 4rem

  • m5 margin 5rem

  • m6 margin 6rem

• Bottom

  • mb0 margin bottom 0

  • mb1 margin bottom 1rem

  • mb2 margin bottom 2rem

  • mb3 margin bottom 3rem

  • mb4 margin bottom 4rem

  • mb5 margin bottom 5rem

  • mb6 margin bottom 6rem

• Top

  • mt0 margin top 0

  • mt1 margin top 1rem

  • mt2 margin top 2rem

  • mt3 margin top 3rem

  • mt4 margin top 4rem

  • mt5 margin top 5rem

  • mt6 margin top 6rem

• Left

  • ml0 margin left 0

  • ml1 margin left 1rem

  • ml2 margin left 2rem

  • ml3 margin left 3rem

  • ml4 margin left 4rem

  • ml5 margin left 5rem

  • ml6 margin left 6rem

• Right

  • mr0 margin right 0

  • mr1 margin right 1rem

  • mr2 margin right 2rem

  • mr3 margin right 3rem

  • mr4 margin right 4rem

  • mr5 margin right 5rem

  • mr6 margin right 6rem

More Info

To make a navbar use this format

<nav>
  <ul>
    <li>Stuff Inside</li>
  </ul>
</nav>

To make a footer use this format (You can have as many ul as you want)

<footer>
  <div>
    <ul>
      <li>Stuff Inside</li>
    </ul>

    <ul>
      <li>More Stuff Inside</li>
    </ul>
  </div>

  <span>&copy; Your Copyright 2021<span>
</footer>

That's just about everything, have fun!