Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bootstrap Sass Organization #17

Merged
merged 11 commits into from
Sep 11, 2023
Merged

Bootstrap Sass Organization #17

merged 11 commits into from
Sep 11, 2023

Conversation

samderanova
Copy link
Contributor

To customize Bootstrap, including imports and overrides, I've followed a structure similar to HackAtUCI/HackUCI-Site. This involves creating SCSS files for each of the following:

  • Theme variables and custom Bootstrap overrides
  • Bootstrap component imports
    • If you notice that certain Bootstrap styles aren't working for something you know is supposed to be a Bootstrap component, please make sure it has been imported in this file first!
  • Bootstrap functions, mixins, and utilities
    • To use Bootstrap functions and theme variables, import this file instead of the Bootstrap one.

One final thing to note is that instead of importing the Fuzzy Bubbles font from next/font and using it in layout.tsx, the font is now imported directly from Google Fonts in the theme variables file.

@samderanova samderanova requested a review from a team September 6, 2023 03:56
@samderanova samderanova linked an issue Sep 6, 2023 that may be closed by this pull request
Bootstrap Sass Organization #16
Closed
@github-actions
Copy link

github-actions bot commented Sep 6, 2023 •
edited
Loading

Deploy preview for zothacks-site-2023-sanity ready!

Name Sanity Studio
Preview Visit Preview
Commit 24bc9d9

@github-actions
Copy link

github-actions bot commented Sep 6, 2023 •
edited
Loading

Deploy preview for zothacks-site-2023 ready!

Name Hack at UCI Site
Preview Visit Preview
Commit 24bc9d9

@alexanderl19
Copy link
Contributor

Haven't gone over your changes yet, but changing from next/font to a direct import is a downgrade.

Automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. No requests are sent to Google by the browser.

https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts

tyleryy
tyleryy previously approved these changes Sep 7, 2023
View reviewed changes
taesungh
taesungh previously approved these changes Sep 8, 2023
View reviewed changes
Copy link
Member

@taesungh taesungh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice to have the customizations available along with a subset of styles. Two other nitpicks:

  • extensions aren't required when importing/using other modules in SASS
  • the bootstrap-utils and zothacks-theme modules could benefit from being partials, but I'm not sure how SASS is transpiled through Next, so maybe this is irrelevant
    • another consequence of the naming is when we want to use Bootstrap's mixins, we'll need to scope them as bootstrap-utils.<mixin>. not saying this is any better or worse, just different from our previous usage

Note for Tyler: while linting is generally appreciated, please keep PR matter within scope: otherwise, the diff just gets cluttered. Given there's already a self-merge commit, a squash merge might be more appropriate, but I'll leave that up to Sam.

taesungh
taesungh previously approved these changes Sep 10, 2023
View reviewed changes
tyleryy
tyleryy approved these changes Sep 10, 2023
View reviewed changes
apps/site/src/lib/styles/_zothacks-theme.scss Outdated Show resolved Hide resolved
@samderanova samderanova merged commit 7babafb into main Sep 11, 2023
2 checks passed
tyleryy pushed a commit that referenced this pull request Sep 11, 2023
@waalbert @tyleryy
feat: apply button
4ebb67a 
* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: text centered

feat: added apply button svg to assets

Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

feat: apply button
@taesungh taesungh deleted the feature/bootstrap-sass-organization branch September 17, 2023 17:29
tyleryy pushed a commit that referenced this pull request Sep 18, 2023
@samderanova @taesungh @tyleryy
Bootstrap Sass Organization (#17)
76d1ff9 
* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>
tyleryy pushed a commit that referenced this pull request Sep 18, 2023
@samderanova @taesungh @tyleryy
Bootstrap Sass Organization (#17)
e59b8d8 
* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>
tyleryy pushed a commit that referenced this pull request Sep 19, 2023
@waalbert @tyleryy
parent dd3aad0
4127f3f 
author Albert Wang <56945244+waalbert@users.noreply.github.com> 1694217932 -0700
committer Tyler Yu <tyleryy@uci.edu> 1695095646 -0700

draft: sticker component + animations + layout

* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: draggable sticker component

fix: pull from main

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

feat: draggable sticker enhancements

feat: sticker dragConstraints and elastic

added type

sticker spring transition

reduced spring stiffness

shadow adjustments

feat: base sticker component

individual sticker example

rename to Base Sticker

imports

feat: sticker layout, file structure, animations

hoisted transition object

hack sticker w/ light shake animation

heart sticker

quickshake animation

animation transition timing adjustments

positioning on stickerLayout

Navigation Bar and Footer (#14)

* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: sticker start + framer install

feat: draggable sticker component

Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

feat: sticker start + framer install

feat: draggable sticker component

removed use state import

Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization

* fix: installed bootstrap

* fix: import font from Next instead of Google Fonts

* fix: update red hex value correctly

* linting

* fix: custom CSS property for font

* fix: sass partials

* fix: new sass path, incorporated navbar and footer

* fix: removed comment

---------

Co-authored-by: Tyler Yu <tyleryy@uci.edu>

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

Set up Home page content including Landing (#21)

Set up Home page content including Landing

- Reorganize Landing into Home
  - To match common naming, rename primary page to Home
  - Landing is now the first view of the Home page
  - Wrap primary layout children in `<main>`
- Use container layout for Home page sections
  - Add `Container` elements for sections w/ responsive vertical padding
- Create yellow Apply button with bs-btn variant in Home page Landing
  - Use `bootstrap.button-variant` mixin for Apply button styles
  - Specify empty variant to React Bootstrap
  - Remove unnecessary sizing and layout styles
- Separate usage of theme variables and Bootstrap mixins

---------

Co-authored-by: Taesung Hwang <taesungh@uci.edu>

feat: draggable sticker component

feat: sticker dragConstraints and elastic

added type

sticker spring transition

reduced spring stiffness

shadow adjustments

feat: base sticker component

individual sticker example

rename to Base Sticker

imports

Navigation Bar and Footer (#14)

* feat: create navigation bar

* feat: create footer

* refactor: font, dependencies, scss, footer

* fix: navbar on mobile

* refactor: added routes and other small changes

* feat: active page link has corresponding color

* feat: add ZotHacks logo

* fix: use responsive css and add bold weight

* chore: use absolute asset path for navbar background

* fix: logo moves upon navbar expansion and navbar is fixed to top of the screen

* refactor: clean up css and use bootstrap grid

* fix: remove horizontal scroll

* fix: switch Twitter to Hack and SVG to PNG

* fix: move Hack to front of footer

---------

Co-authored-by: Alexander Liu <a@alexanderliu.com>

feat: sticker start + framer install

feat: draggable sticker component

Add tiling anteater head background art (#25)

- Make diagonally tiling base asset to use native CSS background repeat
- Embed white background to minimize opaque file size (no transparency)
  - The resulting GIF uses 8 colors with dithering

Co-authored-by: Taesung Hwang <Taesung@CM17.local>

linting

fix: removed unused import
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tyleryy tyleryy tyleryy approved these changes

@taesungh taesungh taesungh left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bootstrap Sass Organization
4 participants
@samderanova @alexanderl19 @taesungh @tyleryy