├── img
├── pinch_git.jpg
├── pinch_grid.jpg
├── pinch_logo.png
├── pinch_main.jpg
├── pinch_navs.jpg
├── pinch_angel_footer.jpg
├── pinch_basic_card.jpg
├── pinch_fluid_card.jpg
├── pinch_icon_title.jpg
├── pinch_product_card.jpg
├── pinch_typography.jpg
├── pinch_dracula_footer.jpg
├── pinch_responsive_nav_angel.jpg
└── pinch_responsive_nav_dracula.jpg
├── test.css
├── CONTRIBUTING.md
├── .github
└── workflows
│ └── codesee-arch-diagram.yml
├── index.html
├── main.css.map
├── main.scss
├── README.md
└── main.css
/img/pinch_git.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_git.jpg
--------------------------------------------------------------------------------
/img/pinch_grid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_grid.jpg
--------------------------------------------------------------------------------
/img/pinch_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_logo.png
--------------------------------------------------------------------------------
/img/pinch_main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_main.jpg
--------------------------------------------------------------------------------
/img/pinch_navs.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_navs.jpg
--------------------------------------------------------------------------------
/img/pinch_angel_footer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_angel_footer.jpg
--------------------------------------------------------------------------------
/img/pinch_basic_card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_basic_card.jpg
--------------------------------------------------------------------------------
/img/pinch_fluid_card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_fluid_card.jpg
--------------------------------------------------------------------------------
/img/pinch_icon_title.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_icon_title.jpg
--------------------------------------------------------------------------------
/img/pinch_product_card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_product_card.jpg
--------------------------------------------------------------------------------
/img/pinch_typography.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_typography.jpg
--------------------------------------------------------------------------------
/img/pinch_dracula_footer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_dracula_footer.jpg
--------------------------------------------------------------------------------
/img/pinch_responsive_nav_angel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_responsive_nav_angel.jpg
--------------------------------------------------------------------------------
/img/pinch_responsive_nav_dracula.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScorchingShade/Pinch/HEAD/img/pinch_responsive_nav_dracula.jpg
--------------------------------------------------------------------------------
/test.css:
--------------------------------------------------------------------------------
1 | /*This is a test css*/
2 |
3 | .bord {
4 | background-image: linear-gradient(rgb(243, 224, 224), rgb(182, 231, 243));
5 | border-color: rgb(0, 0, 0);
6 | border-style: solid;
7 | border-width: 0.1px;
8 | }
9 |
10 | body {
11 | background-image: linear-gradient(rgb(233, 231, 231), rgb(226, 226, 216));
12 | }
13 |
14 | .center {
15 | margin: 0 auto;
16 | width: 50%;
17 | }
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 | Hi there! We're thrilled that you'd like to contribute to PinchX. Your help is essential for keeping it great.
4 |
5 | Contributions to this project are [released](https://help.github.com/articles/github-terms-of-service/#6-contributions-under-repository-license) to the public under the [project's open source license](LICENSE).
6 |
7 | ## Opening an issue
8 |
9 | Thank you for taking the time to open an issue, your feedback helps make PinchX better.
10 | Before opening an issue, please be sure that your issue hasn't already been asked by using [GitHub search](https://help.github.com/articles/searching-issues/)
11 |
12 | Here are a few things that will help us help resolve your issues:
13 |
14 | - A descriptive title that gives an idea of what your issue refers to
15 | - A thorough description of the issue, (one word descriptions are very hard to understand)
16 | - Screenshots (if appropriate)
17 | - Links (if appropriate)
18 |
19 | ## Submitting a pull request
20 |
21 | 0. Clone the repository
22 | 1. Configure and install the dependencies: (See the [README](README.md) for more details)
23 | 2. Make sure the tests pass on your machine: `script/test`
24 | 3. Create a new branch: `git checkout -b my-branch-name`
25 | 4. Make your change, add tests, and make sure the tests still pass
26 | 5. Push to your branch and [submit a pull request][pr]
27 | 6. Wait for your pull request to be reviewed and merged!
28 |
29 | Here are a few things you can do that will increase the likelihood of your pull request being accepted:
30 |
31 | - Write tests.
32 | - Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
33 | - Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
34 |
35 | ## Resources
36 |
37 | - [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
38 | - [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
39 | - [GitHub Help](https://help.github.com)
40 |
--------------------------------------------------------------------------------
/.github/workflows/codesee-arch-diagram.yml:
--------------------------------------------------------------------------------
1 | on:
2 | push:
3 | branches:
4 | - master
5 | pull_request_target:
6 | types: [opened, synchronize, reopened]
7 |
8 | name: CodeSee Map
9 |
10 | jobs:
11 | test_map_action:
12 | runs-on: ubuntu-latest
13 | continue-on-error: true
14 | name: Run CodeSee Map Analysis
15 | steps:
16 | - name: checkout
17 | id: checkout
18 | uses: actions/checkout@v2
19 | with:
20 | repository: ${{ github.event.pull_request.head.repo.full_name }}
21 | ref: ${{ github.event.pull_request.head.ref }}
22 | fetch-depth: 0
23 |
24 | # codesee-detect-languages has an output with id languages.
25 | - name: Detect Languages
26 | id: detect-languages
27 | uses: Codesee-io/codesee-detect-languages-action@latest
28 |
29 | - name: Configure JDK 16
30 | uses: actions/setup-java@v2
31 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).java }}
32 | with:
33 | java-version: '16'
34 | distribution: 'zulu'
35 |
36 | # CodeSee Maps Go support uses a static binary so there's no setup step required.
37 |
38 | - name: Configure Node.js 14
39 | uses: actions/setup-node@v2
40 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).javascript }}
41 | with:
42 | node-version: '14'
43 |
44 | - name: Configure Python 3.x
45 | uses: actions/setup-python@v2
46 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).python }}
47 | with:
48 | python-version: '3.x'
49 | architecture: 'x64'
50 |
51 | - name: Configure Ruby '3.x'
52 | uses: ruby/setup-ruby@v1
53 | if: ${{ fromJSON(steps.detect-languages.outputs.languages).ruby }}
54 | with:
55 | ruby-version: '3.0'
56 |
57 | # CodeSee Maps Rust support uses a static binary so there's no setup step required.
58 |
59 | - name: Generate Map
60 | id: generate-map
61 | uses: Codesee-io/codesee-map-action@latest
62 | with:
63 | step: map
64 | github_ref: ${{ github.ref }}
65 | languages: ${{ steps.detect-languages.outputs.languages }}
66 |
67 | - name: Upload Map
68 | id: upload-map
69 | uses: Codesee-io/codesee-map-action@latest
70 | with:
71 | step: mapUpload
72 | api_token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
73 | github_ref: ${{ github.ref }}
74 |
75 | - name: Insights
76 | id: insights
77 | uses: Codesee-io/codesee-map-action@latest
78 | with:
79 | step: insights
80 | api_token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
81 | github_ref: ${{ github.ref }}
82 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | PinchX
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
PinchX
20 |
A minimalistic css approach
21 |
22 |
23 |
24 |
Welcome to the Pinchx Library by Ankush Sharma
25 |
We often rely on heavy and hefty css frameworks when often prototyping our apps for web.
26 |
But, we rarely need all that heavy code and it can often seem daunting and confusing!
27 |
28 |
29 |
30 |
31 |
32 |
33 |
So in such a pinch, we long for a brief, flexible and highly customizable css structure
34 |
35 |
36 |
But, we shouldn't have to write all that css ourselves! always!
37 |
38 |
39 |
So why not use "PinchX", that lifts your load and lets you work on your design!
40 |
41 |
42 |
43 |
44 |
45 |
46 |
Take a look at the all the elements that PinchX has to offer! For a complete documentation, visit - Official Github Repo
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | A new Grid System for maximum flexibility
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
15
63 |
14
64 |
1
65 |
13
66 |
2
67 |
12
68 |
3
69 |
11
70 |
4
71 |
10
72 |
5
73 |
9
74 |
6
75 |
8
76 |
7
77 |
6
78 |
9
79 |
7
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
I am often troubled by using grids when creating any markup. The 15 way grid allows for maximum flexibility whenever we need to rapidly build anything! Use your known nametags such as col- to create a compelling new grid
89 |
133 | This is a bodyas kasdkjlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem asdasn dasdas,dmasn,dsam,dasm, iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioooooooooooooooooooooooooooPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
134 |
135 |
136 |
139 |
140 |
141 |
142 |
143 | Engage your audience.
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
The basic card is a good option to display Important info and links!
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 | This is a Fluid card
166 |
167 |
168 | This card type takes the width of the container
169 |
170 |
171 | This is a bodyas kasdkjlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem asdasn dasdas,dmasn,dsam,dasm, iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiioooooooooooooooooooooooooooPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP
172 |
173 |
174 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
The Fluid card takes the width of any container it is placed in!
A Minimalistic css Library for quickly bootstrapping your project
5 |
6 |
7 |
8 |
9 |
10 | [](https://github.com/ScorchingShade/Pinch/issues)
11 | 
12 |
13 | ## Basic Overview - Version 1.03
14 |
15 | - Update -> Added responsive contact button for nav
16 |
17 | No need to code your own css mini-library to get-rid of hefty frameworks like bootstrap whenever starting a small project!
18 |
19 | PinchX takes care of your basic web design building a beautiful simplistic design in minutes!
20 |
21 | Written in SCSS/SASS, the generated css is comprehensive, simple and minimal!
22 |
23 |
24 |
25 |
26 |
27 |
28 | Live example [here](https://scorchingshade.github.io/Pinch/).
29 |
30 |
31 |
32 |
33 |
34 | ## Upcoming and bugs
35 |
36 | Responsive support for navbar and footer coming soon. The site is best viewed in Google-Chrome on pc.
37 |
38 |
39 |
40 | ## Getting Started
41 |
42 | Just clone the repo and copy the main.css file in your project folder.
43 | Further use the meta linking to link the stylesheet to your project as -
44 |
45 | ```
46 |
47 | ```
48 |
49 |
50 | To use the complete functionality of PinchX, it is recommended to also load font-awesome-icons in your project.
51 |
52 | ```
53 |
54 |
55 |
56 | ```
57 |
58 |
59 |
60 |
61 |
Diving into PinchX
62 |
63 |
64 |
65 |
66 |
67 | ### An All New Grid System
68 |
69 | PinchX introduces a 15 way grid sytem to have greater flexibility when designing your web-page
70 |
71 | Using class "col-x", where x is numbered from 1-15 you can create a grid with 15 valid points.
72 |
73 | ```html
74 |
75 |
15
76 |
14
77 |
1
78 |
13
79 |
2
80 |
12
81 |
3
82 |
11
83 |
4
84 |
10
85 |
5
86 |
9
87 |
6
88 |
8
89 |
7
90 |
6
91 |
9
92 |
7
93 |
94 | ```
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | ## Beautiful Engaging Cards
103 |
104 | PinchX gives three beautiful cards to choose from.
105 |
106 | - Basic Card
107 | - Fluid Card
108 | - Product Card
109 |
110 | With PinchX, you can quickly create a card that suits your needs!
111 |
112 | ### Basic Card
113 |
114 | This simplistic card is perfect for displaying your data in a cool minimalistic way!
115 |
116 |
117 | ```
118 |
119 |
120 | This is a basic card
121 |
122 |
123 | This is a subtitle
124 |
125 |
126 | This is a body
127 |
128 |
131 |
132 |
133 | ```
134 |
135 |
136 | Set your class to "card-basic" to start using a basic card.
137 | The class "card-title" provides a bold title to the card.
138 | The class "card-subtitle" provides a subtitle text to the card.
139 | I recommend using "card-body" to make sure you get a defined, non overflowing, card body.
140 | The class "card-footer" allows to set a detailed footer for the basic card.
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | ### Fluid Card
149 |
150 | The fluid card works similar to the basic card, with just the difference that it can occupy the width of the parent element its placed in!
151 |
152 |
153 | ```
154 |
155 |
156 | This is a Fluid card
157 |
158 |
159 | This card type takes the width of the container
160 |
161 |
162 | This is a body
163 |
164 |
167 |
168 | ```
169 |
170 |
171 | Use the class "card-fluid" to use the Fluid Card.
172 |
173 |
174 |
175 |
176 |
177 |
178 | ### Product Card
179 |
180 | The product card is a special card that helps in creating a cool new unique way of diplaying elements as a showcase.
181 |
182 | ```
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 | Watches
192 |
193 |
194 |
195 | This is a product card
196 |
197 |
198 | ```
199 |
200 | The class "card" helps you use the Product card.
201 | You can also set the image for the card using class "card-image" and then providing an image as a source.
202 | The class "card-prime" is optional to use, but when used in a div, provides a unique diagonal background object to style the card.
203 | The class "card-info" plays the role of defining the card body elements.
204 | The class "card-icon" can be used to set a small preferably, png icon to the body.
205 | The class "card-name" give the information to about the product card's descriptive name.
206 |
207 |
208 |
209 |
210 |
211 |
212 | ---
213 |
214 | ## The Angel and Dracula Elements - Navbar
215 |
216 | PinchX provides two theme options - **Dracula** and **Angel**.
217 | Checkout the simplest way to build a navbar, with the PinchX Dracula and Angel themed navbar!
218 |
219 | ```
220 |
221 |
222 |
223 |
232 |
233 |
234 |
235 |
236 | ```
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 | You can change the theme of the navbar using the class "nav-dracula" or "nav-angel" in the parent div.
245 | To specify a logo use the class "logo", supports images currently.
246 | The class "nav_link" takes care of arranging all your links in a neatly arranged manner.
247 | Optionally you can add a navbar button using class "btn-nav" to further enhance the navbar.
248 |
249 |
250 | Now with version update 1.01, navbar supports responsive behaviour as well!
251 |
252 | The dropdown is completely managed using css with no js overhead!
253 |
254 |
255 |
256 | Dracula
257 |
258 | ```
259 |
302 | ```
303 |
304 |
305 |
306 |
307 |
308 |
309 | ## The Angel and Dracula Elements - Footer
310 |
311 | A good footer contains all the necessary contact info, social media links, and often a message form. PinchX provides you with a complete template to create a **comprehensive footer from scratch.**
312 |
313 | ```
314 |
319 |
368 | ```
369 |
370 |
371 |
372 | ### The theme and the elements
373 |
374 | The theme of the footer can be switched using the **Change Theme of Footer** button. The code for the button is `
209 | 
Watches
215 | 
259 |
262 | 
