https://github.com/tsheporamantso/css-grid-models
In this projects I build 5 CSS-GRID responsive models for Desktop, Tablet and mobile version sampled from Figma
https://github.com/tsheporamantso/css-grid-models
grid-layout html5 media-queries scss-framework
Last synced: about 2 months ago
JSON representation
In this projects I build 5 CSS-GRID responsive models for Desktop, Tablet and mobile version sampled from Figma
- Host: GitHub
- URL: https://github.com/tsheporamantso/css-grid-models
- Owner: tsheporamantso
- License: mit
- Created: 2023-01-27T18:50:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-03T11:44:30.000Z (about 2 years ago)
- Last Synced: 2025-01-19T23:34:13.606Z (3 months ago)
- Topics: grid-layout, html5, media-queries, scss-framework
- Homepage:
- Size: 185 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CSS Grid Models
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ (OPTIONAL)](#faq)
- [📝 License](#license)
This Project is about creating different layouts using CSS Grid properties and positioning HTML items with Grid.
**[CSS Grid Models]** is a responsive website using CSS Grid to layout HTML element/items at different media query breakpoints.
- HTML
- SCSS
- Media Query
- CSS Grid
Version Control
Visual Studio Code
- **[CSS Grid]**
- **[Media Query]**
- [Live Demo](https://tsheporamantso.github.io/hello-microverse/)
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
- Visual Studio Code.
- Node JS.
- Git bash.
- GitHub Account.
### Setup
Clone this repository to your desired folder:
Use git clone command or download ZIP folder
Example commands:
```sh
cd my-folder
git clone [email protected]:tsheporamantso/CSS-GRID-MODELS.git
```
### Install
Install this project with:
npm
### Usage
To run the project, execute the following command:
npm start or live server
### Run tests
To run tests, run the following command:
npm test
### Deployment
You can deploy this project using:
GitHub Pages
👤 **Gladwin Tshepo Ramantso**
- GitHub: [@tsheporamantso](https://github.com/tsheporamantso)
- Twitter: [@ramgt001](https://twitter.com/ramgt001)
- LinkedIn: [Tshepo Gladwin Ramantso](https://www.linkedin.com/in/tshepo-ramantso-b6a35433/)
- [ ] **[new_feature_1]**
- [ ] **[new_feature_2]**
- [ ] **[new_feature_3]**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
If you like this project please follow me on github & twitter and also connect on Linkedin.
I would like to thank Figma for this exercise.
- **[Question_1]**
- [Answer_1]
- **[Question_2]**
- [Answer_2]
This project is [MIT](./LICENSE) licensed.
_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._