The webpages are automatically loaded into CampusGroups. Pages edited here will automatically update in CampusGroups.

• Editing
  • Prerequisites
  • Clone the repo
  • Install the dependencies
  • See changes live
  • Push changes to the site
• Structure
  • Pages
  • Components
  • Styles
  • Utils
• Component Catalog
  • Typography
  • Buttons
  • Containers
  • Assets

This project uses Node.js and NPM. You can go to https://nodejs.org/en/download/ for steps to install both.

You will need git to download and update the files. You can go to https://github.com/git-guides/install-git for steps to install git.

It's recommended you use a code editor such as Visual Studio Code so that you can easily make changes and push them to the website.

Copy the files onto your machine by running the following command in your terminal

git clone https://github.com/OUTspoken-RIT/website.git
cd website

The website uses React and Next.js to convert custom components into a webpage. You can install both with the following command

npm install

You can see your changes while editing by running the following command

npm run dev

It will allow you to view the website on your machine in real-time.

You can push your changes to the website by running the following command

git add .
git commit -m "your message"
git push

The repo is split into 4 main folders:

website
├─ pages
├─ components
├─ styles
└─ utils

Full pages made up of the premade components.

website
└─ pages
    ├─ closet.jsx
    ├─ clubs.jsx
    ├─ index.jsx
    └─ team.jsx

These are the page files that are loaded directly into CampusGroups. These pages can be edited by editing these files.

UI components (buttons, icons, boxes, cards, etc.) that are used to create the webpages.

website
└─ components
    ├─ ui
    ├─ layouts
    └─ composite

The CSS files that control how content is displayed on each page.

website
└─ styles
    ├─ variables
    ├─ buttons.css
    ├─ colors.css
    ├─ composite.css
    ├─ containers.css
    ├─ globals.css
    ├─ icons.css
    ├─ layouts.css
    ├─ reset.css
    ├─ type.css
    └─ underline.css

All the javascript helper code used to create components.

For your use, I've gathered all the components together.

• Typography
  • Heading 1-5
  • Subheading
  • Body
  • Links
  • Underline
  • Speech Bubble
  • Emphasis Bubble
• Buttons
  • Link Button
  • Icon Button
• Containers
  • Box
  • Dashed Box
  • Fancy Box
• Assets
  • Pride Flags
  • Icons
  • Wordmarks
  • OUTspoken Logos
  • Other Logos

Most typography happens in the standard HTML elements, but here are all of them. Typography automaically adjusts size for desktop or mobile devices.

Use the regular <h1>-<h5> elements or use the h1-h5 class.

<!-- regular h1 element -->
<h1>Heading 1</h1>

<!-- or use the h1 class -->
<p className="h1">Heading 1</p>

<!-- regular h2 element -->
<h2>Heading 2</h2>

<!-- or use the h2 class -->
<p className="h2">Heading 2</p>

<!-- regular h3 element -->
<h3>Heading 3</h3>

<!-- or use the h3 class -->
<p className="h3">Heading 3</p>

<!-- regular h4 element -->
<h4>Heading 4</h4>

<!-- or use the h4 class -->
<p className="h4">Heading 4</p>

<!-- regular h5 element -->
<h5>Heading 5</h5>

<!-- or use the h5 class -->
<p className="h5">Heading 5</p>

<Subheading>This is a subheading.</Subheading>

Is applied to any text not already styled.

<p>queerum ipsum dolor sit amet.</p>

Use <Link> element for local links (page to page). Use <a> element for external links (linking to another website).

<a>this is a link</a>

<Link>this is a link</Link>

<Underline shade="light" variant="rainbow">This text is underlined.</Underline>

<SpeechBubble tail="down right">This is a speech bubble.</SpeechBubble>

<Bubble>I'm emphasized!</Bubble>

These buttons are ready to go! Just plug in the link.

<LinkButton color="primary" href="/">I'm a button</LinkButton>

<IconButton icon="discord" href="/" />

Boxes for holding elements!

<Box color="foam">
  <p>queerum ipsum dolor sit amet.</p>
</Box>

<DashedBox color="foam">
  <p>queerum ipsum dolor sit amet.</p>
</DashedBox>

<FancyBox>
  <FancyBoxHeader>
    <h2>I am the header</h2>
  </FancyBoxHeader>
  <FancyBoxContent>
    <p>I am the content</p>
  </FancyBoxContent>
</FancyBox>

Every OUTspoken pride flag, logo, icon, and wordmark we've made!

<PrideFlag variant="progress" />

<BrandIcon shape="square" color="rainbow" />

<Wordmark style="lockup" />

<Logo weight="solid" color="rainbow" />

<SecondaryLogo logo="rainbow-heart" />