A Minimalistic css Library for quickly bootstrapping your project

Basic Overview - Version 1.03

Update -> Added responsive contact button for nav
No need to code your own css mini-library to get-rid of hefty frameworks like bootstrap whenever starting a small project!
PinchX takes care of your basic web design building a beautiful simplistic design in minutes!
Written in SCSS/SASS, the generated css is comprehensive, simple and minimal!

Live example here.

Upcoming and bugs

Responsive support for navbar and footer coming soon. The site is best viewed in Google-Chrome on pc.

Getting Started

Just clone the repo and copy the main.css file in your project folder.
Further use the meta linking to link the stylesheet to your project as -

<link rel="stylesheet" href="main.css">

To use the complete functionality of PinchX, it is recommended to also load font-awesome-icons in your project.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js" integrity="sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg==" crossorigin="anonymous"></script>

Diving into PinchX

An All New Grid System

PinchX introduces a 15 way grid sytem to have greater flexibility when designing your web-page
Using class "col-x", where x is numbered from 1-15 you can create a grid with 15 valid points.

<div class="row">
            <div class="col-15">15</div>
            <div class="col-14">14</div>
            <div class="col-1">1</div>
            <div class="col-13">13</div>
            <div class="col-2">2</div>
            <div class="col-12">12</div>
            <div class="col-3">3</div>
            <div class="col-11">11</div>
            <div class="col-4">4</div>
            <div class="col-10">10</div>
            <div class="col-5">5</div>
            <div class="col-9">9</div>
            <div class="col-6">6</div>
            <div class="col-8">8</div>
            <div class="col-7">7</div>
            <div class="col-6">6</div>
            <div class="col-9">9</div>
            <div class="col-7">7</div>
</div>

Beautiful Engaging Cards

PinchX gives three beautiful cards to choose from.

Basic Card
Fluid Card
Product Card
With PinchX, you can quickly create a card that suits your needs!

Basic Card

This simplistic card is perfect for displaying your data in a cool minimalistic way!

            <div class="card-basic ">
                <div class="card-title">
                    This is a basic card
                </div>
                <div class="card-subtitle">
                    This is a subtitle
                </div>
                <div class="card-body">
                    This is a body
                </div>
                <div class="card-footer">
                    A card footer
                </div>
            </div>

Set your class to "card-basic" to start using a basic card.
The class "card-title" provides a bold title to the card.
The class "card-subtitle" provides a subtitle text to the card.
I recommend using "card-body" to make sure you get a defined, non overflowing, card body.
The class "card-footer" allows to set a detailed footer for the basic card.

Fluid Card

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!

 <div class="card-fluid ">
            <div class="card-title">
                This is a Fluid card
            </div>
            <div class="card-subtitle">
                This card type takes the width of the container
            </div>
            <div class="card-body">
                This is a body
            </div>
            <div class="card-footer">
                A card footer
            </div>
        </div>

Use the class "card-fluid" to use the Fluid Card.

Product Card

The product card is a special card that helps in creating a cool new unique way of diplaying elements as a showcase.

            <div class="card">
                <div class="card-image">
                    <img src="https://psmag.com/.image/t_share/MTI5MzkwNTAwMTcwOTk2MTkw/watch-dmjpg.jpg" alt="img">
                </div>
                <div class="card-prime">
                </div>
                <div class="card-info">
                    <div class="card-icon">
                        <img src="https://www.shareicon.net/data/2016/04/26/755602_apple_512x512.png" alt="icon"> Watches
                    </div>
                </div>
                <div class="card-name">
                    This is a product card
                </div>
            </div>

The class "card" helps you use the Product card.
You can also set the image for the card using class "card-image" and then providing an image as a source.
The class "card-prime" is optional to use, but when used in a div, provides a unique diagonal background object to style the card.
The class "card-info" plays the role of defining the card body elements.
The class "card-icon" can be used to set a small preferably, png icon to the body.
The class "card-name" give the information to about the product card's descriptive name.

The Angel and Dracula Elements - Navbar

PinchX provides two theme options - Dracula and Angel.

Checkout the simplest way to build a navbar, with the PinchX Dracula and Angel themed navbar!

<div class="container-ex nav-dracula">
        <header>
            <img class="logo" src="https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-512.png" alt="logo">
            <nav>
                <ul class="nav_link">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>

                </ul>

            </nav>
            <a class="cta" href="#"><button class="btn-nav">Contact</button></a>
        </header>

    </div>

You can change the theme of the navbar using the class "nav-dracula" or "nav-angel" in the parent div.
To specify a logo use the class "logo", supports images currently.
The class "nav_link" takes care of arranging all your links in a neatly arranged manner.
Optionally you can add a navbar button using class "btn-nav" to further enhance the navbar.

Now with version update 1.01, navbar supports responsive behaviour as well!
The dropdown is completely managed using css with no js overhead!

Dracula

        <div>
            <input type="checkbox" id="check" value="checked">
            <img class="logo_responsive" src="https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-512.png" alt="logo">
            <label class="checkbtn" for="check">
            <i class="fa fa-bars" style="background-color: white;"></i>
            </label>
            <header class="responsive-head">
                <nav>
                    <ul class="nav-responsive">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </nav>
            </header>
        </div>

Angel

        <div>
            <input type="checkbox" id="check-angel" value="checked">
            <img class="logo_responsive" src="https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-512.png" alt="logo">
            <label class="checkbtn" for="check-angel">
            <i class="fa fa-bars"></i>
            </label>
            <header class="responsive-head-angel">
                <nav>
                    <ul class="nav-responsive">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </nav>
            </header>
        </div>

The Angel and Dracula Elements - Footer

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.

<div class="footer__change-theme">
    <h1 class="footer__change-title">Footer</h1>
    <p class="footer__change-text">Simple and elegant with themes that match your Navbar!</p>
    <button class="footer__change-btn">Change Theme of Footer</button>
</div>
<footer class="footer">
    <div class="footer__container">

    </div>
    <div class="footer__container">
        <div class="footer__items">
            <div class="footer__item footer__item-about">
                <h2 class="footer__item-title"><span class="footer__item-subtitle">Pinch</span>Footer</h2>
                <p class="footer__item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut semper magna, in iaculis arcu. Nunc mollis metus nibh, vel egestas ligula facilisis vehicula.
                </p>
                <ul class="footer__list">
                    <li><a class="footer_list-link" href="tel:123-456-789"><i class="fas fa-phone"></i> 123-456-789</a></li>
                    <li><a class="footer_list-link" href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a></li>
                    <li class="footer_list-link">
                        <ul class="footer__list footer__sublist">
                            <li><a class="footer__sublist-link" href="#"><i class="fab fa-facebook"></i></a></li>
                            <li><a class="footer__sublist-link" href="#"><i class="fab fa-instagram"></i></a></li>
                            <li><a class="footer__sublist-link" href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a class="footer__sublist-link" href="#"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="footer__item footer__item-links">
                <h2 class="footer__item-title">Quick Links</h2>
                <ul class="footer__item-list">
                    <li><a class="footer__item-link" href="#">Events</a></li>
                    <li><a class="footer__item-link" href="#">Team</a></li>
                    <li><a class="footer__item-link" href="#">Mentors</a></li>
                    <li><a class="footer__item-link" href="#">Gallery</a></li>
                    <li><a class="footer__item-link" href="#">Terms</a></li>
                </ul>
            </div>
            <div class="footer__item footer__item-contact">
                <h2 class="footer__item-title">Contact us</h2>
                <form class="footer__item-form" action="index.html" method="post">
                    <input class="footer__item-form-email" type="email" name="email" placeholder="Your Email Address....">
                    <textarea class="footer__item-form-msg" name="message" placeholder="Your Message...."></textarea>
                    <button class="footer__item-form-submit" type="submit"><i class="fas fa-envelope"></i> Send</button>
                </form>
            </div>
        </div>
    </div>
    </div>
    <div class="footer__container footer__copy">
        <p>powered by <a href="https://github.com/ScorchingShade/Pinch">ScorchingShade</a></p>
    </div>
</footer>

The theme and the elements

The theme of the footer can be switched using the Change Theme of Footer button. The code for the button is <button class="footer__change-btn">. Note the differences in the 2 themes in the screenshots below:

You may manually change the default footer theme from light to dark by changing <footer class="footer"> to <footer class="footer__dark">. You may also delete the theme toggle button by deleting or commenting out <button class="footer__change-btn">Change Theme of Footer</button>.

The footer contains 3 columns, contained inside <div class="footer__items">:

<div class="footer__item footer__item-about"> // contains contact info and social media links
<div class="footer__item footer__item-links"> // contains the website's quick links
<div class="footer__item footer__item-contact"> // contains the contact form

Note that all 3 columns are defined by footer_item class. The footer is fully responsive, and the 3 footer elements collapse into mobile-friendly columns when viewed from a mobile device.

About section

<div class="footer__item footer__item-about">
    <h2 class="footer__item-title"><span class="footer__item-subtitle">Pinch</span>Footer</h2>
    <p class="footer__item-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut semper magna, in iaculis arcu. Nunc mollis metus nibh, vel egestas ligula facilisis vehicula.
    </p>
    <ul class="footer__list">
        <li><a class="footer_list-link" href="tel:123-456-789"><i class="fas fa-phone"></i> 123-456-789</a></li>
        <li><a class="footer_list-link" href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a></li>
        <li class="footer_list-link">
            <ul class="footer__list footer__sublist">
                <li><a class="footer__sublist-link" href="#"><i class="fab fa-facebook"></i></a></li>
                <li><a class="footer__sublist-link" href="#"><i class="fab fa-instagram"></i></a></li>
                <li><a class="footer__sublist-link" href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a class="footer__sublist-link" href="#"><i class="fab fa-youtube"></i></a></li>
            </ul>
        </li>
    </ul>
</div>

The About section is defined by the class footer__item-about.
The paragraph element with the class footer__item-text contains the website description.
The unordered list with the class footer__list contains the phone number and email info. Both items are defined by the footer_list-link classes.
The unordered list with the class footer__sublist is nested inside the previous list, and contains the links for Facebook, Instagram, Twitter, and YouTube. Each item has a class of footer__sublist-link.

Quick Links section

<div class="footer__item footer__item-links">
    <h2 class="footer__item-title">Quick Links</h2>
    <ul class="footer__item-list">
        <li><a class="footer__item-link" href="#">Events</a></li>
        <li><a class="footer__item-link" href="#">Team</a></li>
        <li><a class="footer__item-link" href="#">Mentors</a></li>
        <li><a class="footer__item-link" href="#">Gallery</a></li>
        <li><a class="footer__item-link" href="#">Terms</a></li>
    </ul>
</div>

The Quick Links section is the middle column contained inside the footer__item-links class. Just add or remove the <li class="footer__item-link"> items as you see fit!

Contact Us section

<div class="footer__item footer__item-contact">
    <h2 class="footer__item-title">Contact us</h2>
    <form class="footer__item-form" action="index.html" method="post">
        <input class="footer__item-form-email" type="email" name="email" placeholder="Your Email Address....">
        <textarea class="footer__item-form-msg" name="message" placeholder="Your Message...."></textarea>
        <button class="footer__item-form-submit" type="submit"><i class="fas fa-envelope"></i> Send</button>
    </form>
</div>

Contact Us section is aligned to the right and provides a simple form to send a message to the author/developer.

Futuristic Typography, a new way to write

There are 5 different classes providing you a great new way to define your text! Simple and futuristic, the typography is sure to give a pleasing appeal to your page!

        <p class="disp-xl">Extra Large Text Display</p>
        <p class="disp-lg">Large Text Display</p>
        <p class="disp-md">Medium Text Display</p>
        <p class="disp-sm">Small Text Display</p>
        <p class="disp-xs">Extra Small Text Display</p>

The classes are "disp-xl", "dis-lg", "disp-md", "disp-sm" and "disp-xs" which give enough options to diplay different kinds of text!

Author

Hi 👋, I'm Ankush

A geek , a coder, a boxer, an explorer

🔭 I’m currently working on PinchX framework
👯 I’m looking to collaborate on React
🤔 I’m looking for help with Pinch framework
👨‍💻 All of my projects are available at https://github.com/ScorchingShade
📝 I regulary write articles on https://medium.com/@ankushsharma_70830
💬 Ask me about React, angular, java, springboot, restapi
📫 How to reach me - [email protected]
⚡ Fun fact I am a burger connoisseur, having eaten 125 different kinds of burgers!

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Shout-out

A Huge shout out to Kevin Powell for all his amazing SCSS tutorials. Do check him out on YouTube!

scorchingshade / pinch Goto Github PK

pinch's Introduction