This project is a collection of UI designs converted into functional front-end code using various technologies. It includes styles written in SASS, SCSS, LESS, and Stylus, along with JavaScript where needed to add interactivity or dynamic behavior.
This project demonstrates how to implement UI designs with different CSS preprocessors and vanilla JavaScript. It's designed for learning, experimenting, and understanding the differences and workflows among SASS/SCSS, LESS, and Stylus.
- HTML5
- CSS3 with:
- SASS
- SCSS
- LESS
- Stylus
- JavaScript (Vanilla)
- Visual Studio Code (Recommended)
To work with this project locally, you’ll need Node.js and VS Code with some extensions for live compilation.
- Node.js installed
- Visual Studio Code
Option 1: Live Compilation with VS Code
Install the Live Sass Compiler extension:
- Extension: Live Sass Compiler
Start watching .sass or .scss files by clicking "Watch Sass" in the VS Code status bar.
Option 2: Compile via CLI
Install globally:
npm install -g sassCompile:
sass scss/style.scss dist/style.cssLive Compilation with VS Code
Install the Easy LESS extension:
- Extension: Easy LESS
It automatically watches .less files and outputs to .css.
CLI Option (optional):
npm install -g less
lessc less/style.less dist/style.cssInstall CLI globally:
npm install -g stylusCompile:
stylus stylus/style.styl -o dist/style.cssFor real-time preview and compilation, you can use Live Server (optional):
- Extension: Live Server
Clone the repository:
git clone https://github.com/Yashi-Singh-9/UI-Design-to-Code.git
cd UI-Design-to-CodeOpen the project in VS Code and start editing. Use the appropriate extension or CLI to compile the files as needed.
Feel free to fork this repository and submit pull requests with improvements, fixes, or new designs.
This project is open-source and available under the MIT License.