https://github.com/devmor-j/fm-order-summary-component
https://github.com/devmor-j/fm-order-summary-component
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devmor-j/fm-order-summary-component
- Owner: devmor-j
- Created: 2022-04-02T15:43:35.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-02T15:43:52.000Z (about 4 years ago)
- Last Synced: 2025-02-28T13:25:12.929Z (over 1 year ago)
- Language: HTML
- Size: 188 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Order summary card solution
This is my solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- See hover states for interactive elements
### Screenshot
Desktop (1536px):
Mobile (375px):
### Links
- Solution URL: [Github Repo](https://github.com/devmor-j/fm-order-summary-component/)
- Live Site URL: [Github Pages](https://devmor-j.github.io/fm-order-summary-component/)
## My process
### Built with
- Semantic HTML5 markup
- Mobile-first workflow
- [Vite](https://vitejs.dev/) - Build and development tool
- [WindiCSS](https://windicss.org/) - Main framework for CSS styling
### What I learned
I used WindiCSS - Next generation utility-first CSS framework and that is sure true :)
WindiCSS is really awesome, I think it's ready for production use and adoption. I enjoyed using attributify feature to separate some classes which makes css styles even more readlible.
The way I used it was that everything should go into `class="..."` as before but only styles that effect visual things like *color, size, background, text, border, ...* should be applied using attributify syntax. For example:
```html
```
Is equal to:
```html
```
> (`w:` is the [optional prefix](https://windicss.org/features/attributify.html#prefix))
Layout and composition classes like `flex`, `px-4`, `w-full`, `space-y-8`, ... are added directly inside html *class* attribute.
With this mindset, styling can become very easy. Now I know when I'm adjusting *paddings* and *display* properties, don't have to crawl a long string just to find where things are.
Another example: Don't write your css inside a giant string text :) like this (copied from [this project](https://github.com/devmor-j/fm-stats-preview-card-component)):
```html
```
> As you can tell I used `|` character to divide classes which is inspired by [Cube CSS](https://cube.fyi/grouping.html).
Instead we can write that line with WindiCSS like this:
```html
```
> Or using a prefix like `w:` for each attribute which is the way I prefer and that prevents any collisions with the html attributes themselves.
```html
```
WindiCSS is fully compatible with TailwindCSS v2. Read more at [WindiCSS Guide](https://windicss.org/guide/).
## Author
- Frontend Mentor - [@devmor-j](https://www.frontendmentor.io/profile/devmor-j)