Skip to content

Commit

Permalink
Made the Documentation more Clear...
Browse files Browse the repository at this point in the history
  • Loading branch information
haneenmahd committed Feb 12, 2021
1 parent 3529c1e commit 16eaa72
Showing 1 changed file with 75 additions and 6 deletions.
81 changes: 75 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# QUERIES
### A Simple npm package for using responsive media screen sizes in your web app.
# Now a Easier way to use media queries in your Web App.

## A Simple npm package for using responsive media screen sizes in your web app.
## Now a Easier way to use media queries in your
- Easy to use
- Media screen sizes are completely made accurate for devices
- Make your website Responsive to all devices
Expand All @@ -18,11 +19,11 @@ yarn add queries
NOTE: This can be only done using ``styled components``.
## React App
### Example
```
```js
import React from "react";
import styled from "styled-components";
import { Colors } from "apple-colors";
import QUERIES from "queries";
import QUERIES from "responsive-web";

const Wrapper = styled.div`
height: 300px;
Expand Down Expand Up @@ -62,7 +63,7 @@ const MyDeviceQuery = () => (

## Vue App
You need to install ``vue-styled-components``
```
```js
<template>
<Wrapper>
<Header>
Expand All @@ -72,6 +73,7 @@ You need to install ``vue-styled-components``
</template>
<script>
import styled from "vue-styled-components";
import QUERIES from "responsive-web";

const Wrapper = styled.div`
height: 300px;
Expand Down Expand Up @@ -100,4 +102,71 @@ export default {
}
}
</script>
```
```

## Available Sizes
### Default:
- MOBILE
- TABLET
- LAPTOP
- DESKTOP
- TV
### You could Access these properties by: `QUERIES.OBJECTDEFINEDABOVE`

## Cusom Device Sizes
## IOS:
- FOUR (iPhone 4 Models)
- LANDSCAPE
- PORTRAIT
- FIVE (iPhone 5 to 7 Models)
- LANDSCAPE
- PORTRAIT
- EIGHT (iPhone 8 Models, excluding plus models)
- LANDSCAPE
- PORTRAIT
- PLUS (iPhone 7 and 8 PLUS)
- LANDSCAPE
- PORTRAIT
- X (iPhone X Models)
- LANDSCAPE
- PORTRAIT

## SAMSUNG:
- S3 (Also contains Note4 and Note5 Models Too.)
- LANDSCAPE
- PORTRAIT
- NOTE3
- LANDSCAPE
- PORTRAIT
- S6
- LANDSCAPE
- PORTRAIT

## TABLETS:
- IPAD
- MINI (This contains iPad 1, 2, Mini and Air too.)
- LANDSCAPE
- PORTRAIT
- IPAD4 (This contains iPad 3, 4 and iPad Pro 9.5" Models too.)
- PORTRAIT
- LANDSCAPE
- PRO10
- LANDSCAPE
- PORTRAIT
- PRO12
- PORTRAIT
- LANDSCAPE


## LAPTOPS
- NONRETINA (Devices which have non-retina display)
- RETINA (Devices Which have Retina display)

# Developer
Haneen Mahdin

Follow me on:
- [Instagram](https://instagram.com/haneenmahdin)
- [GitHub](https://github.com/haneenmahd)
# License
### `responsive-web` is licensed under MIT.

0 comments on commit 16eaa72

Please sign in to comment.