Style Showcase is a frontend project that demonstrates various web and UI/UX design techniques. It includes dynamic theme switching, responsive design, and modular SCSS architecture, showcasing a variety of layouts, fonts, and custom design features. The project emphasizes SCSS functionalities such as mixins, variables, and functions for maintaining consistent styles throughout the application. It integrates Angular to create a seamless and interactive user experience, particularly focusing on theme toggling, reusable UI components, and flexible design structures.
Make sure you have the following installed:
- Angular CLI (>= 17.3.x)
- Clone the repository:
git clone https://github.com/Sye0w/Style_Showcase.git cd Style_Showcase - Install dependencies:
npm install
- Run development server:
ng serve
The SCSS architecture follows a modular approach, separating the styles into individual files for better organization, scalability, and maintainability.
-
_functions.scss
Contains utility functions for reusable computations.
Example:rem($px)function to convert pixel values into rem units based on a base font size for responsive typography. -
_variables.scss
Holds global variables for consistent theming, including fonts, colors, and spacing.- Fonts are imported from Google Fonts.
- The base color palette is defined here for both light and dark themes.
-
_mixins.scss
Defines reusable style blocks with mixins to reduce code repetition.
Example:li-txt-grp-2-style()mixin for list items that includes typography and background styling. -
styles.scss
Acts as the global stylesheet that imports all partial SCSS files (_variables,_mixins,_functions).
Sets global styles like box-sizing, padding, and margin resets, and base layout configurations.