Geting Started

Getting Started with ANIX


ANIX is a powerful, feature-packed frontend Component Library. Just Think what you want to Build on your website and ANIX Provides it in just a minutes.


Quick start


Get started by including ANIX production-ready CSS via CDN links without the need for any build steps




1. Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices.Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices.

2. Include ANIX's CSS. &Place the tag in the for our CSS, and the tag for our JavaScript bundle before the closing 

                
<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
             <title>ANIX'S DEMO</title>
            <link href="https://anix-component-library.netlify.app/style.css" rel="stylesheet" >
        </head>
</html>

How to install ?

To use all features of Anix-ui, Just Add CDN Link of css in head tag and JavaScript at the end of body tag of index.html file. After adding CDN links Just search for your UI like navbar, button, form etc in Anix-ui components and Copy the HTML code given then add the code in your HTML file where you want to add this UI.



CDN Link


 <link href="https://anix-component-library.netlify.app/style.css" rel="stylesheet" >


Examples: Add button in your website

1.Add CDN Link of css in head tag and JavaScript at the end of body tag 


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ANIX'S DEMO</title>
        <link href="https://anix-component-library.netlify.app/style.css" rel="stylesheet" >
    </head>
   <title>Button-Preview</title>
</html>

2.Copy the HTML code of Button of your choice from Anix-ui components


<button class=" btn btn-primary">Primary</button>
<button class=" btn btn-secondary">Secondary</button>





Buttons

Buttons are very important part of any website because buttons can link all the things and gives a good user experience.

ANIX provides different categories of buttons, you can pick any of them according to your requirement



1. Solid Buttons
2.Outlined Buttons
3. Tag Buttons



Solid Buttons


These buttons are build with button tag and anchor tag so you can add link here also



            
<a href="#"><button class="btn btn-primary">Primary</button></a>
<a href="#"><button class="btn btn-secondary">Secondry</button></a>
<a href="#"><button class="btn btn-success">Success</button></a>
<a href="#"><button class="btn btn-danger">Danger</button></a>
<a href="#"><button class="btn btn-warning">Warning</button></a>
<a href="#"><button class="btn btn-info">Info</button></a>
<a href="#"><button class="btn btn-light">Light</button></a>
<a href="#"><button class="btn btn-dark">Dark</button></a>


Outlined Buttons



These buttons are build with button tag and anchor tag so you can add link here. If you not need to add link in button then you can just remove anchor tag.



                
<a href="#"><button class="btn btn-outline-primary">Primary</button></a>
<a href="#"><button class="btn btn-outline-secondary">Secondary</button></a>
<a href="#"><button class="btn btn-outline-success">Success</button></a>
<a href="#"><button class="btn btn-outline-danger">Danger</button></a>
<a href="#"><button class="btn btn-outline-warning">Warning</button></a>
<a href="#"><button class="btn btn-outline-info">Info</button></a>
<a href="#"><button class="btn btn-outline-light">Light</button></a>
<a href="#"><button class="btn btn-outline-dark">Dark</button></a>




Tag Buttons



Some of Tag buttons will work with form so you can use Submit, Reset button to submit the form or reset the entered value in the form. In the Link Button you can add Link of another page/url or any ID of your document to redirect there.




            
<a href="#"><button class="btn btn-tag">Button</button></a>
<a href="#"><button class="btn btn-tag">Reset</button></a>
<a href="#"><button class="btn btn-tag">Input</button></a>
<a href="#"><button class="btn btn-tag">Submit</button></a>
<a href="#"><button class="btn btn-tag">Link</button></a>




profiles

Circular Profile can be used to show user profile or company logo. You can change the image also. You can use this design by adding a class name profile-circuler and use any size by adding class names ".profile-lg", "profile-md","profile-sm","profile-xsm",". You can also give custon size and style by using these class names 




                 
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ANIX'S DEMO</title>
        <link href="https://anix-component-library.netlify.app/style.css" rel="stylesheet" >
    </head>
</html>



Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options ANIX provides different types of Cards, you can pick any of them according to your requirement. Just Add CDN Link in your head tag and copy-paste the HTML code then you will get a card.





Sample card-1

Placeholder image

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis libero vel erat bibendum sodales. Fusce sed massa sapien.

Read More 
                        
<div class="card">
    <img src="https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2022/11/Naruto.jpg?fit=1280%2C720&ssl=1"
    alt="Placeholder image">
    <h3>Card Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis libero vel erat bibendum sodales.
        Fusce sed massa sapien. </p>
    <a href="#">Read More</a>
</div>




Sample card-2

Placeholder image

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis libero vel erat bibendum sodales. Fusce sed massa sapien.

Read More 
        
<div class="card">
    <img src="https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2022/11/Naruto.jpg?fit=1280%2C720&ssl=1"
            alt="Placeholder image">
        <h3>Card Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis libero vel erat bibendum sodales.
            Fusce sed massa sapien. </p>
        <a href="#">Read More</a>
</div>

Login

Login Form is used to login for user account. Anix-ui provides login form also you can just add CDN link of CSS and JavaScript, copy-paste the below code into your document and you will get a very responsive and awesome Login form in your website. You can change the width of the form using className. 




                
<form class="login" method="get" action="login.php">
    <label><b>User Name</b></label>
    <input type="text" name="Uname" id="Uname" placeholder="Username">
    <br><br>
    <label><b>Password
    </b>
    </label><input type="Password" name=&quoPass" id="Pass" placeholder="Password">
    <br><br>
    <input type="button" name="log" id="log" value="Log In Here">
    <br><br>
    <input type="checkbox" id="check">
    <span>Remember me</span>
    <br><br>
    Forgot <a href="#">Password</a>
</form>

Alerts

Alerts are very important part of any website to show alerts show that user feels more connected and cannot face dificulties to use the website. Anix-ui provides different types of alerts based on the situation, you can pick any of them according to your requirement. These alerts are :


1.warning alerts

2.error alerts

3.sucess alerts

4.danger alerts



× Warning: This is a warning message!
× Error: This is an error message!
× Success: This is a success message!
× Danger: This is a danger message! 


                            
<div class="alert warning" id="warning">
            <span class="closebtn" onclick="hideAlert('warning')">&times;</span>
            <strong>Warning:</strong> This is a warning message!
</div>

<div class="alert error" id="error">
            <span class="closebtn" onclick="hideAlert('error')">&times;</span>
            <strong>Error:</strong> This is an error message!
</div>

<div class="alert success" id="success">
            <span class="closebtn" onclick="hideAlert('success')">&times;</span>
            <strong>Success:</strong> This is a success message!
</div>

<div class="alert danger" id="danger">
            <span class="closebtn" onclick="hideAlert('danger')">&times;</span>
            <strong>Danger:</strong> This is a danger message!
</div>

    <button class=" alert-btn warning-btn" onclick="showAlert('warning')">Show Warning</button>
    <button class=" alert-btn error-btn" onclick="showAlert('error')">Show Error</button>
    <button class="alert-btn success-btn" onclick="showAlert('success')">Show Success</button>
    <button class="alert-btn danger-btn" onclick="showAlert('danger')">Show Danger</button>

Form

Form play an important role in terms of taking input from user. Nix-ui provides form also you can just add CDN link of CSS and copy-paste the below code into your document and you will get a very responsive and awesome form in your website. You can change the width of the form using form tag. 

    
<div id="Form">

    <form id="form-content">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        <button type="submit">Submit</button>
    </form>

</div>



Loader


Loader activates when the page is loading and is shows a loading effect on website WebHelpUI provides different types of Loader, You can use this by just adding CSS and JS CDN Link into your document. Place the JavaScript Link at the end of body tag.

    
<div class="loader loader1"></div>
<div class="loader loader2"></div>
<div class="loader loader3"></div>





Accordian

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. Accordians are used to show Q&A on the website. WebHelpUI provides different types of Accordians with different style, you can pick any of them according to your requirement

how can i link css file in our code

this is a very simple task , from the installlation section copy the cdn link of css and past it inside head

can i made changes in the component by writing css code

yes ! you can make changes to it butif you overwrite things then you have write !important keyword in your css code

can i made more css properties

yes you can add more custom css properties by targeting the classname or id of that component

    
<div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <h2>how can i link css file in our code</h2>
            </div>

    <div class="accordion-content">
    <h1>this is a very simple task , from the installlation section copy the cdn link of
                    css and past it inside head</h2>
                </div>
    </div>

    <div class="accordion-item">
    <div class="accordion-header" onclick="toggleAccordion(this)">
                <h2>can i made changes in the component by writing css code</h2>
    </div>

    <div class="accordion-content">
    <h1>yes ! you can make changes to it butif you overwrite things then you have
                    write !important keyword in your css code</h1>
            </div>
    </div>

    <div class="accordion-item">
    <div class="accordion-header" onclick="toggleAccordion(this)">
                <h2>can i made more css properties</h2>
    </div>

    <div class="accordion-content">
        <h1>yes you can add more custom css properties by targeting the classname or id of
                    that component</h1>
            </div>
    </div>
</div>
    
            
    
<button onclick="showSnackbar()">Show Snackbar</button>
<button onclick="showSnackbar()">Show Snackbar</button>
<button onclick="showSnackbar()">Show Snackbar</button>