https://github.com/eduardosrocha/land-next

Este é um projeto Next.js que explora meticulosamente o design usando CSS, criando um sistema de design próprio e oferecendo insights valiosos sobre design e arquitetura CSS.
https://github.com/eduardosrocha/land-next

7-1-design-architecture bem-css design-patterns design-system responsive-design

Last synced: 9 months ago
JSON representation

Este é um projeto Next.js que explora meticulosamente o design usando CSS, criando um sistema de design próprio e oferecendo insights valiosos sobre design e arquitetura CSS.

• Host: GitHub
• URL: https://github.com/eduardosrocha/land-next
• Owner: EduardoSRocha
• Created: 2024-05-23T21:44:52.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-24T14:09:51.000Z (almost 2 years ago)
• Last Synced: 2025-01-10T21:21:24.899Z (over 1 year ago)
• Topics: 7-1-design-architecture, bem-css, design-patterns, design-system, responsive-design
• Language: TypeScript
• Homepage: https://www.curriculum.uonni.com/
• Size: 32.4 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

# Landi-Next - Project

[![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

[![Node.js](https://img.shields.io/badge/-Node.js-339933?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)

[![CSS](https://img.shields.io/badge/-CSS-1572B6?style=flat-square&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)

[![npm](https://img.shields.io/badge/-npm-CB3837?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/)

[![HTML](https://img.shields.io/badge/-HTML-E34F26?style=flat-square&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)

[![Sass](https://img.shields.io/badge/-Sass-CC6699?style=flat-square&logo=sass&logoColor=white)](https://sass-lang.com/)

[![Tailwind CSS](https://img.shields.io/badge/-Tailwind_CSS-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)

[![Next.js](https://img.shields.io/badge/-Next.js-000000?style=flat-square&logo=next.js&logoColor=white)](https://nextjs.org/)

[![BEM](https://img.shields.io/badge/-BEM-9575CD?style=flat-square)](http://getbem.com/)

[![7-1 Pattern](https://img.shields.io/badge/-7--1%20Pattern-008080?style=flat-square)](https://sass-guidelin.es/#the-7-1-pattern) [![Responsive Design](https://img.shields.io/badge/-Responsive%20Design-4DB6AC?style=flat-square)](https://www.w3schools.com/html/html_responsive.asp) [![Component-driven Design](https://img.shields.io/badge/-Component--driven%20Design-FFB74D?style=flat-square)](https://www.invisionapp.com/inside-design/what-is-component-driven-design/)

Este projeto é uma exploração cuidadosa e detalhada do design utilizando CSS. Centralizado na criação de uma página exemplar, ele se concentra em um design system meticulosamente elaborado, sem depender de bibliotecas como Bootstrap ou MUI. Além disso, oferece dois guias informativos que destacam as decisões estratégicas por trás do design e da arquitetura CSS, apresentando insights valiosos de maneira clara e objetiva.

## Getting Started

First, install all dependencies:

```bash

npm install

```

Run as Style Dev auto-update environment.

```bash

npm run start:style:dev

```

run the development server without sass:

```bash

npm run start:dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

## Learn More about technologies used on this project

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

- [Learn Tailwind](https://tailwindcss.com/docs/installation) - documentation of Tailwind.

- [Learn scss](https://sass-lang.com/guide/) - Guide for Sass

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!