1.0.0 • Published 4 years ago
zyrabeta v1.0.0
⚡ Useful links
🌐 Browser compatibility
 |  |  |  |  |  |
|---|---|---|---|---|---|
| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | 11+ :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
INSTALL/CONFIGURE
🤔 How To Install/Configure?
- Download the framework (or whit git cmd
git clone https://github.com/Izox-github/Zyra.git) - Move the "src" folder from Zyra to your project folder
Add in your index.html code in the part:
<link rel="stylesheet" href="src/css/style.css">, add<script src="src/js/index.js"></script>below, and add<link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> in the <head> part**🤖 Starter Template**:
<!-- 🤖 Starter Template - Zyra -->
<!DOCTYPE html>
<!-- You can change the language "EN" to your website language. -->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Font.You can change the font.-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<!-- Zyra CSS - You can change the location of the file; it will then be necessary to change the destination of the file.
EXAMPLE: FOLDER/FOLDER/FILE.css -->
<link rel="stylesheet" href="src/css/style.css">
<!-- CODE -->
<button class="btn-hover color-1">Hello Zyra 👋</button>
<!-- END CODE -->
</body>
</html>
<!-- Zyra JS - You can change the location of the file; it will then be necessary to change the destination of the file.
EXAMPLE: FOLDER/FOLDER/FILE.js-->
<script src="src/js/index.js"></script>😎 Yes, it's super easy to install!
📚 Documentation
⚙️ Components
🧨 Alerts
Grey Check
<!-- Zyra CSS Grey Check -->
<div class="content" id="colors">
<div class="container-alert">
<div class="alert" style="animation-delay: .1s">
<div class="alert--icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="alert--content">
<b>Hello</b> this is an <b>example</b>
</div>
<div class="alert--close">
<i class="far fa-times-circle"></i>
</div>
</div>Success Green Check
<!-- Zyra CSS Success Green Check -->
<div class="alert alert_success" style="animation-delay: .2s">
<div class="alert--icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="alert--content">
<b>Hello</b> this is an <b>example</b>.Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing <b>elit</b>.
</div>
<div class="alert--close">
<i class="far fa-times-circle"></i>
</div>
</div>Info Blue
<!-- Zyra CSS Info Blue -->
<div class="alert alert_info" style="animation-delay: .3s">
<div class="alert--icon">
<i class="fas fa-info-circle"></i>
</div>
<div class="alert--content">
An <b>example</b> of "<b>INFO</b>".<b>Lorem</b> ipsum dolor <b>sit</b> amet, consectetur <b>adipiscing</b> elit.
</div>
<div class="alert--close">
<i class="far fa-times-circle"></i>
</div>
</div>Danger Red
<!-- Zyra CSS Danger Red -->
<div class="alert alert_danger" style="animation-delay: .4s">
<div class="alert--icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="alert--content">
An <b>example</b> of "<b>DANGER</b>". Lorem ipsum dolor <b>sit</b> amet, consectetur <b>adipiscing</b>.
</div>
<div class="alert--close">
<i class="far fa-times-circle"></i>
</div>
</div>Warning
<!-- Zyra CSS Warning -->
<div class="alert alert_warning" style="animation-delay: .5s">
<div class="alert--icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="alert--content">
An <b>example</b> of "<b>WARNING</b>".<b>Lorem</b> ipsum dolor <b>sit</b> amet, consectetur <b>adipiscing</b>
</div>
<div class="alert--close">
<i class="far fa-times-circle"></i>
</div>
</div>🔎 Button
<!-- Zyra Button -->
<div class="buttons">
<button class="btn-hover color-1">BUTTON</button>
<button class="btn-hover color-2">BUTTON</button>
<button class="btn-hover color-3">BUTTON</button>
<button class="btn-hover color-4">BUTTON</button>
<button class="btn-hover color-5">BUTTON</button>
<button class="btn-hover color-6">BUTTON</button>
<button class="btn-hover color-7">BUTTON</button>
<button class="btn-hover color-8">BUTTON</button>
<button class="btn-hover color-9">BUTTON</button>
<button class="btn-hover color-10">BUTTON</button>
<button class="btn-hover color-11">BUTTON</button>
</div>🛠️ How to resize button?
<!--Change the number "130" to the number of pixels your button should have.
Change the class of your button by which you want.-->
<button style="width:130px" class="btn-hover color-1">BUTTON</button>🎴 Card
Profil Card
<!-- Zyra CSS - Profil Card-->
<div class="card">
<!-- Replace "https://avatars0.githubusercontent.com/u/54061556?s=460&u=7cda955e4b963dc2b0b77c9908a9ae57c4c82e98&v=4" with your image-->
<div class="card-header"
style="background-image: url(https://avatars0.githubusercontent.com/u/54061556?s=460&u=7cda955e4b963dc2b0b77c9908a9ae57c4c82e98&v=4)"
>
<div class="card-header-bar">
<a href="#" class="btn-message"><span class="sr-only">Message</span></a>
<a href="#" class="btn-menu"><span class="sr-only">Menu</span></a>
</div>
<div class="card-header-slanted-edge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200"><path class="polygon" d="M-20,200,1000,0V200Z" /></svg>
<a href="#" class="btn-follow"><span class="sr-only">Follow</span></a>
</div>
</div>
<div class="card-body">
<!-- Replace "Izox" with your title/name-->
<h2 class="name">Izox</h2>
<!--Replace the "subtitle" with your subtitle/ job title-->
<h4 class="job-title">Developer / Founder of Zyra</h4>
<!--Replace the "bio/description" with your bio/description-->
<div class="bio">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aperiam.</div>
<!-- Social Accounts-->
<div class="social-accounts">
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/social-icons-grey/512/YOUTUBE-512.png" alt=""><span class="sr-only">Youtube</span></a>
<!-- Replace "#" whit your link-->
<a href="#"><img src="https://cdn.discordapp.com/attachments/695368013846675489/695613551133327470/twitter.svg" alt=""><span class="sr-only">Twitter</span></a>
<a href="#"><img src="https://cdn.discordapp.com/attachments/695368013846675489/695613838103543908/instagram.svg" alt=""><span class="sr-only">Instagram</span></a>
</div>
</div>
<!-- Footer of card -->
<div class="card-footer">
<div class="stats">
<div class="stat">
<span class="label">Following</span>
<span class="value">0</span>
</div>
<div class="stat">
<span class="label">Followers</span>
<span class="value">0</span>
</div>
<div class="stat">
<span class="label">Likes</span>
<span class="value">0</span>
</div>
</div>
</div>
</div>
<!-- End of Profil Card -->📜 Navbar
<!-- Zyra CSS - Navbar -->
<header>
<!-- Replace the "https://cdn.discordapp.com/attachments/695368013846675489/695658376100708373/logo.svg" logo with your logo-->
<a class="logo" href="/"><img src="https://cdn.discordapp.com/attachments/695368013846675489/695658376100708373/logo.svg" alt="logo"></a>
<nav>
<!-- 1) Replace name (home, zyka, github, discord) whit your name.
2) And icon (fas fa-home,fas fa-project-diagram,fab fa-github-alt, fab fa-discord) with your icon (fontawesome).
3)Replace link "#" with your link-->
<ul class="nav__links">
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#"><i class="fas fa-project-diagram"></i> Zyka</a></li>
<li><a href="#"><i class="fab fa-github-alt"></i> Github</a></li>
<li><a href="#"><i class="fab fa-discord"></i> Discord</a></li>
</ul>
</nav>
<!-- You can change the button go to -> https://github.com/Izox-github/Zyra/blob/master/%F0%9F%93%9A%20Documentation/%E2%9A%99%EF%B8%8F%20Components/%F0%9F%94%8E%20Button.md -->
<a class="cta" href="#"><i class="fas fa-users"></i> REGISTER</a>
<p onclick="openNav()" class="menu cta">Menu</p>
</header>
<!-- Mobile Navbar -->
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
<a href="#"><i class="fas fa-home"></i> Home</a></li>
<a href="#"><i class="fas fa-project-diagram"></i> Zyka</a></li>
<a href="#"><i class="fab fa-github-alt"></i> Github</a></li>
<a href="#"><i class="fab fa-discord"></i> Discord</a></li>
</div>
</div>🖼️ Footer
<!-- Zyra CSS | Footer -->
<footer class="footer">
<div class="footer__addr">
<h1 class="footer__logo">Zyra</h1>
<h2>Contact</h2>
<address>
Planet earth, in the street I follow, postal code 1234<br>
<a class="footer__btn" href="mailto:example@gmail.com">Email Us</a>
</address>
</div>
<ul class="footer__nav">
<li class="nav__item">
<h2 class="nav__title">Media</h2>
<ul class="nav__ul">
<li>
<a href="#">Online</a>
</li>
<li>
<a href="#">Print</a>
</li>
<li>
<a href="#">Alternative Ads</a>
</li>
</ul>
</li>
<li class="nav__item nav__item--extra">
<h2 class="nav__title">Technology</h2>
<ul class="nav__ul nav__ul--extra">
<li>
<a href="#">Hardware Design</a>
</li>
<li>
<a href="#">Software Design</a>
</li>
<li>
<a href="#">Digital Signage</a>
</li>
<li>
<a href="#">Automation</a>
</li>
<li>
<a href="#">Artificial Intelligence</a>
</li>
<li>
<a href="#">IoT</a>
</li>
</ul>
</li>
<li class="nav__item">
<h2 class="nav__title">Legal</h2>
<ul class="nav__ul">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms of Use</a>
</li>
<li>
<a href="#">Sitemap</a>
</li>
</ul>
</li>
</ul>
<div class="legal">
<p>© 2020 Something. All rights reserved.</p>
<div class="legal__links">
<span>Made with <span class="heart">♥</span> by ---</span>
</div>
</div>
</footer>🔩 Breadcrumbs
<div class="wrapper">
<section class="header">
<div class="logo-and-nav-wrap">
<div class="logo-wrap">
<a href="#/global">LOGO</a>
</div>
<div class="site-nav-wrap">
<nav class="nav">
<div class="breadcrumb-wrap">
<span class="sep"><i class="fa fa-caret-right"></i></span> <span class="breadcrumb"><a href="#">Zyra</a></span>
</div>
<div class="breadcrumb-wrap">
<span class="sep"><i class="fa fa-caret-right"></i></span> <span class="breadcrumb"><a href="#">CSS</a></span>
</div>
<div class="breadcrumb-wrap">
<span class="sep"><i class="fa fa-caret-right"></i></span> <span class="breadcrumb"><a href="#">Framework</a></span>
</div>
<div class="breadcrumb-wrap">
<span class="sep"><i class="fa fa-caret-right"></i></span> <span class="breadcrumb"><a href="#">Lorem</a></span>
</div>
<div class="breadcrumb-wrap">
<span class="sep"><i class="fa fa-caret-right"></i></span> <span class="breadcrumb"><a href="#">Ipsum</a></span>
</div>
</nav>
</div>
</div>
</section>
</div>🛠️ Utility
🖼️ Responsive Text
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
<!-- Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.-->🔧 Size Text
<!-- Change the size of the text by changing "40" to your number.-->
<h1 style="font-size:40px;">Zyra Size Text</h1>🎨 Color Text
<!--Change the text "red" to your color
Example : <p style="color:blue">Text color example</p>
or : <p style="color:#2ECCFA">Text color example</p>
- a color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"-->
<p style="color:red">Text color example</p>
<!-- OR -->
<p style="color:#FE2E2E">Text color example</p>
<!-- OR -->
<p style="color:rgb(255,0,0)">Text color example</p>🖌️ Change the font of text
<!-- Replace the text "yourfont" with the name of your font-->
<font face="yourfont">This is some text!</font>🛠️ How to resize button?
<!--Change the number "130" to the number of pixels your button should have.
Change the class of your button by which you want.-->
<button style="width:130px" class="btn-hover color-1">BUTTON</button>BETA
⚠️ Zyra is in BETA! There will be lots of new features coming soon !
📜 Copyright and license
Code copyright 2020 Izox. Code released under License.
1.0.0
4 years ago