diff --git a/docs/404.html b/docs/404.html index d4933095..c8826646 100644 --- a/docs/404.html +++ b/docs/404.html @@ -7,13 +7,13 @@ Page Not Found | FlatifyCSS - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Go to homepage
- + \ No newline at end of file diff --git a/docs/assets/js/1a63ac3d.b8943dfc.js b/docs/assets/js/1a63ac3d.b8943dfc.js deleted file mode 100644 index 9fdc3aeb..00000000 --- a/docs/assets/js/1a63ac3d.b8943dfc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1651],{3905:function(e,t,a){a.d(t,{Zo:function(){return d},kt:function(){return p}});var i=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function s(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,i)}return a}function o(e){for(var t=1;t=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=i.createContext({}),c=function(e){var t=i.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},d=function(e){var t=c(e.components);return i.createElement(l.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},m=i.forwardRef((function(e,t){var a=e.components,n=e.mdxType,s=e.originalType,l=e.parentName,d=r(e,["components","mdxType","originalType","parentName"]),m=c(a),p=n,u=m["".concat(l,".").concat(p)]||m[p]||h[p]||s;return a?i.createElement(u,o(o({ref:t},d),{},{components:a})):i.createElement(u,o({ref:t},d))}));function p(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var s=a.length,o=new Array(s);o[0]=m;var r={};for(var l in t)hasOwnProperty.call(t,l)&&(r[l]=t[l]);r.originalType=e,r.mdxType="string"==typeof e?e:n,o[1]=r;for(var c=2;c\n Tabs + \ No newline at end of file diff --git a/docs/blog.html b/docs/blog.html index 2a3bba13..e3e7e479 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -7,13 +7,13 @@ Blog | FlatifyCSS - +
Skip to main content

· One min read
Amir M. Mohamadi

This is the first blog post from the FlatifyCSS website, heads-up! we will have lots of work to do here.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/blog/archive.html b/docs/blog/archive.html index 57cab029..af3e4094 100644 --- a/docs/blog/archive.html +++ b/docs/blog/archive.html @@ -7,13 +7,13 @@ Archive | FlatifyCSS - +
Skip to main content

Archive

Archive

2021

2022

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/blog/hello-world.html b/docs/blog/hello-world.html index e822b9dc..48c91088 100644 --- a/docs/blog/hello-world.html +++ b/docs/blog/hello-world.html @@ -7,13 +7,13 @@ Hello World! | FlatifyCSS - +
Skip to main content

Hello World!

· One min read
Amir M. Mohamadi

This is the first blog post from the FlatifyCSS website, heads-up! we will have lots of work to do here.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/blog/intro-to-flatifycss-modern-flat-design-framework-for-the-web.html b/docs/blog/intro-to-flatifycss-modern-flat-design-framework-for-the-web.html index acb19da2..b7266723 100644 --- a/docs/blog/intro-to-flatifycss-modern-flat-design-framework-for-the-web.html +++ b/docs/blog/intro-to-flatifycss-modern-flat-design-framework-for-the-web.html @@ -7,7 +7,7 @@ Intro to FlatifyCSS - Modern flat design framework for the web | FlatifyCSS - + @@ -21,7 +21,7 @@ You can also extend the right to left styles by using the flatify-rtl.scss file and conditional statements. Read more about RTL layouts

Practical set of components

There are more than twenty components that can be mixed and make more complex user interfaces, each component has its unique CSS variables and can be customized based on the usage.

Handy helper classes

FlatifyCSS is not a utility-first CSS framework, and honestly, we are not eager to be on that side. It makes things ready for development because real developers prove themselves by coding.

Color setter helper classes Nonetheless, FlatifyCSS comes with some of the must-must-haves. For example, if you want to change the theme of a component, there is just a set of helper classes started with style- and color- prefixes, not repeated like button-success or alert-danger, you just set style-danger and voilà you have the element with that style!

Getting started

FlatifyCSS is available for users in many ways, you can install it using package managers, directly from CDN, or even downloading lastest project archive.

Install the latest version via npm or Yarn:

npm install flatifycss
yarn add flatifycss

Once the package got installed, you can import files into your project or link them inside your web pages directly.

Learn more!

All components, forms, helper classes, principles, and pieces of information are documented, read about how things work, try, and then use them. I suggest first starting reading the overview section.

Help us make it better...

We are on the first steps of this road, some things should get polished and missing features should be added, in this case, your feedback and contributions to this project will be appreciated by us and the people who will use it.
FlatifyCSS's Github page

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/blog/tags.html b/docs/blog/tags.html index 4d99592a..ec0346ce 100644 --- a/docs/blog/tags.html +++ b/docs/blog/tags.html @@ -7,13 +7,13 @@ Tags | FlatifyCSS - +
Skip to main content

Tags

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/blog/tags/guide.html b/docs/blog/tags/guide.html index 2a25f23f..3842a17a 100644 --- a/docs/blog/tags/guide.html +++ b/docs/blog/tags/guide.html @@ -7,13 +7,13 @@ One post tagged with "Guide" | FlatifyCSS - +
Skip to main content

One post tagged with "Guide"

View All Tags
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/blog/tags/release.html b/docs/blog/tags/release.html index a1466793..501d4783 100644 --- a/docs/blog/tags/release.html +++ b/docs/blog/tags/release.html @@ -7,13 +7,13 @@ One post tagged with "Release" | FlatifyCSS - +
Skip to main content

One post tagged with "Release"

View All Tags
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/accordion.html b/docs/docs/components/accordion.html index 6da78c5c..582fc868 100644 --- a/docs/docs/components/accordion.html +++ b/docs/docs/components/accordion.html @@ -7,7 +7,7 @@ Accordion | FlatifyCSS - + @@ -51,7 +51,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Accordion</title> <style> .accordion{ max-width: 820px; margin: 1em auto 0; } .custom-accordion{ --flatify__accordion-txt-color: #F5F7FA; --flatify__accordion-bg-color: #AA8E69; --flatify__accordion-border-color: #F6BB42; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script> </head> <body class="flex-column-center"> <div class="accordion bordered custom-accordion"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-1"> Lorem ipsum dolor sit amet <span class="add-button"></span> </button> </h2> <div id="accordion-1" class="accordion-collapse"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias architecto quae tenetur voluptatum ipsa, esse doloremque numquam accusantium pariatur facere sunt earum aut iure deserunt id illum ipsam repudiandae non? </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> Far far away <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-toggle" aria-expanded="false" aria-controls="accordion-2"> The Sorrows of Young Werther <span class="add-button"></span> </button> </h2> <div id="accordion-2" class="accordion-collapse"> <div class="accordion-body"> <h3 class="size-lg">Book I</h3> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. </div> </div> </div> </div> </body> </html> " height="250px">
index.html
<div class="accordion bordered custom-accordion">...</div>
style.css
.custom-accordion {
  --flatify__accordion-txt-color: #f5f7fa;
  --flatify__accordion-bg-color: #aa8e69;
  --flatify__accordion-border-color: #f6bb42;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/alert.html b/docs/docs/components/alert.html index a2abf9fc..ebf3c214 100644 --- a/docs/docs/components/alert.html +++ b/docs/docs/components/alert.html @@ -7,7 +7,7 @@ Alerts | FlatifyCSS - + @@ -37,7 +37,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Alerts</title> <style> @keyframes my-custom-animation{ from{ opacity: 1; transform: scale(1); } to{ opacity: 0; transform: scale(0.5) rotate(0.5turn); } } .my-alert{ --flatify__alert-bg-color: #A0CECB; --flatify__alert-txt-color: #434A54; --flatify__alert-border-color: #A0CECB; --flatify__alert-animation-remove: my-custom-animation 0.4s ease; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script> </head> <body> <div class="flex-column-center"> <div class="alert has-icon my-alert" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> </div> </body> </html> " height="180px">
index.html
<div class="alert has-icon my-alert" role="alert">
    <div class="alert-svg">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"><path d="M0 22.815H10.937V34.223H0z"></path><path d="M0 66.719H10.937V78.12599999999999H0z"></path><pathd="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z"></path></svg>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>
Alert remove animation custom duration

To change alert remove animation duration you need to change $ALERT_REMOVE_ANIMATION in _config.scss or --flatify__alert-remove-animation CSS variable. JavaScript automatically will remove alert when animation is finished.

style.css
/* Define the custom animation */
@keyframes my-custom-animation {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5) rotate(0.5turn);
  }
}

.my-alert {
  --flatify__alert-bg-color: #a0cecb;
  --flatify__alert-txt-color: #434a54;
  --flatify__alert-border-color: #a0cecb;
  --flatify__alert-animation-remove: my-custom-animation 0.4s ease;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/backdrop-layer.html b/docs/docs/components/backdrop-layer.html index ab5265b1..e6fc2966 100644 --- a/docs/docs/components/backdrop-layer.html +++ b/docs/docs/components/backdrop-layer.html @@ -7,7 +7,7 @@ Backdrop layer | FlatifyCSS - + @@ -24,7 +24,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Backdrop layer</title> <style> .my-backdrop{ --flatify__backdrop-color: #2aba667a; --flatify__backdrop-opacity: 1; --flatify__backdrop-filter: blur(3px); } </style> </head> <body> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <button class="button">Click me</button> <div class="backdrop-layer my-backdrop show"></div> </body> </html> " height="200px">
index.html
<div class="backdrop-layer my-backdrop show"></div>
index.css
.my-backdrop {
  --flatify__backdrop-color: #2aba667a;
  --flatify__backdrop-opacity: 1;
  --flatify__backdrop-filter: blur(3px);
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/badge.html b/docs/docs/components/badge.html index 90aecffc..323e98b2 100644 --- a/docs/docs/components/badge.html +++ b/docs/docs/components/badge.html @@ -7,7 +7,7 @@ Badges | FlatifyCSS - + @@ -21,7 +21,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Badges</title> <style> .my-button{ position: relative; min-width: 120px; margin: 10px; } .my-badge{ position: absolute; top: -2px; right: -2px } </style> </head> <body> <div class="flex-center"> <button class="my-button button bordered"> Help Us! <span class="my-badge badge style-red edge-circle pulse"></span> </button> <button class="my-button button bordered"> New Messages! <span class="my-badge badge style-blue edge-circle pulse">20</span> </button> </div> </body> </html> " height="110px">
index.html
<button class="my-button button bordered">
  Help Us!
  <span class="my-badge badge style-red edge-circle pulse"></span>
</button>
<button class="my-button button bordered">
  New Messages!
  <span class="my-badge badge style-blue edge-circle pulse">20</span>
</button>
style.css
.my-button {
  position: relative;
  min-width: 120px;
  margin: 10px;
}

.my-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/breadcrumb.html b/docs/docs/components/breadcrumb.html index 33cd9c3d..1f1837dd 100644 --- a/docs/docs/components/breadcrumb.html +++ b/docs/docs/components/breadcrumb.html @@ -7,7 +7,7 @@ Breadcrumb | FlatifyCSS - + @@ -37,7 +37,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Breadcrumb</title> <style> .my-custom-breadcrumb{ --flatify__breadcrumb-txt-color: #F5F7FA; --flatify__breadcrumb-bg-color: #AA8E69; --flatify__breadcrumb-border-color: #BAA286; --flatify__link-color: #FFCE54; --flatify__link-color__hover: #F6BB42; --flatify__link-color__focus: #A0D468; } </style> </head> <body class="flex-center"> <nav class="breadcrumb-wrapper" aria-label="It is a breadcrumb"> <ol class="breadcrumb my-custom-breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Tutorials</a></li> <li class="breadcrumb-item"><a href="#">Videos</a></li> <li class="breadcrumb-item active" aria-current="location">How to create videos</li> </ol> </nav> </body> </html> " height="110px">
index.html
<nav class="breadcrumb-wrapper" aria-label="It is a breadcrumb">
  <ol class="breadcrumb my-custom-breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
    <li class="breadcrumb-item"><a href="#">Videos</a></li>
    <li class="breadcrumb-item active" aria-current="location">How to create videos</li>
  </ol>
</nav>
style.css
.my-custom-breadcrumb {
  /* custom breadcrumb colors */
  --flatify__breadcrumb-txt-color: #f5f7fa;
  --flatify__breadcrumb-bg-color: #aa8e69;
  --flatify__breadcrumb-border-color: #baa286;

  /* custom breadcrumb links */
  --flatify__link-color: #ffce54;
  --flatify__link-color__hover: #f6bb42;
  --flatify__link-color__focus: #a0d468;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/add-button.html b/docs/docs/components/buttons/add-button.html index 876ce477..32c87ff5 100644 --- a/docs/docs/components/buttons/add-button.html +++ b/docs/docs/components/buttons/add-button.html @@ -7,7 +7,7 @@ Add button | FlatifyCSS - + @@ -26,7 +26,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Add button</title> <style> .add-button{ margin: 0 5px !important; } </style> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="add-button color-success" aria-label="Add"></button> <button class="add-button color-warning" aria-label="Add"></button> <button class="add-button color-purple" aria-label="Add"></button> <button class="add-button color-red" aria-label="Add"></button> </div> </body> </html> " height="100px">
index.html
<button class="add-button color-success" aria-label="Add"></button>
<button class="add-button color-warning" aria-label="Add"></button>
<button class="add-button color-purple" aria-label="Add"></button>
<button class="add-button color-red" aria-label="Add"></button>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/arrow-button.html b/docs/docs/components/buttons/arrow-button.html index 745c7529..fc6c9a2a 100644 --- a/docs/docs/components/buttons/arrow-button.html +++ b/docs/docs/components/buttons/arrow-button.html @@ -7,7 +7,7 @@ Arrow button | FlatifyCSS - + @@ -29,7 +29,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Close button</title> <style> .arrow-button{ margin: 5px !important; } </style> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="button arrow-button style-success" aria-label="Arrow button"></button> <button class="button arrow-button style-warning" aria-label="Arrow button"></button> <button class="button arrow-button style-purple" aria-label="Arrow button"></button> <button class="button arrow-button style-red" aria-label="Arrow button"/></button> <button class="button arrow-button color-success" aria-label="Arrow button"></button> <button class="button arrow-button color-warning" aria-label="Arrow button"></button> <button class="button arrow-button color-purple" aria-label="Arrow button"></button> <button class="button arrow-button color-red" aria-label="Arrow button"></button> </div> </body> </html> " height="100px">
index.html
<button class="button arrow-button style-success" aria-label="Arrow button"></button>
<button class="button arrow-button style-warning" aria-label="Arrow button"></button>
<button class="button arrow-button style-purple" aria-label="Arrow button"></button>
<button class="button arrow-button style-red" aria-label="Arrow button"/></button>

<button class="button arrow-button color-success" aria-label="Arrow button"></button>
<button class="button arrow-button color-warning" aria-label="Arrow button"></button>
<button class="button arrow-button color-purple" aria-label="Arrow button"></button>
<button class="button arrow-button color-red" aria-label="Arrow button"></button>

Change arrow icon

It is possible to change the arrow button icon with both _config.scss and CSS variables.

Inside _config.scss find $ARROW_DOWN_ICON and set svg of customized icon with this format:

_config.scss
$ARROW_DOWN_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css
--flatify__arrow-down-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/button-group.html b/docs/docs/components/buttons/button-group.html index 2043e5bc..553355b2 100644 --- a/docs/docs/components/buttons/button-group.html +++ b/docs/docs/components/buttons/button-group.html @@ -7,7 +7,7 @@ Button group | FlatifyCSS - + @@ -28,7 +28,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Button group</title> </head> <body> <div class="flex-center"> <div class="button-group vertical size-2x" style="width: 250px"> <button class="button">Click Here</button> <button class="button style-success">Click Here</button> <button class="button style-info">Click Here</button> <button class="button style-warning">Click Here</button> <button class="button style-danger">Click Here</button> </div> </div> </body> </html> " height="360px">
index.html
<div class="button-group vertical size-2x" style="width: 250px">
  <button class="button">Click Here</button>
  <button class="button style-success">Click Here</button>
  <button class="button style-info">Click Here</button>
  <button class="button style-warning">Click Here</button>
  <button class="button style-danger">Click Here</button>
</div>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/button.html b/docs/docs/components/buttons/button.html index 84c7b699..67d604d8 100644 --- a/docs/docs/components/buttons/button.html +++ b/docs/docs/components/buttons/button.html @@ -7,7 +7,7 @@ Buttons | FlatifyCSS - + @@ -55,7 +55,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Buttons</title> <style> .my-button-1{ margin: 0.5em !important; --flatify__button-bg-color: linear-gradient(15deg, #03001e, #7303c0, #ec38bc, #fdeff9); --flatify__button-txt-color: white; --flatify__button-border-color: linear-gradient(25deg, #03001e, #7303c0, #ec38bc, #fdeff9); } .my-button-2{ margin: 0.5em !important; --flatify__button-bg-color: #48CFAD; --flatify__button-txt-color: #fff; --flatify__button-border-color: #37BC9B; } .my-button-3{ margin: 0.5em !important; --flatify__button-bg-color: #EC87C0; --flatify__button-txt-color: #d770ad; --flatify__button-border-color: #D770AD; } </style> </head> <body> <div class="flex-column-center"> <button class="my-button-1 button size-lg">Custom button</button> <button class="my-button-2 button size-lg">Custom button</button> <button class="my-button-3 button outline size-lg">Custom button</button> </div> </body> </html> " height="330px">
index.html
<button class="my-button-1 button size-lg">Custom button</button>
<button class="my-button-2 button size-lg">Custom button</button>
<button class="my-button-3 button outline size-lg">Custom button</button>
style.css
.my-button-1 {
  --flatify__button-txt-color: white;
  --flatify__button-bg-color: linear-gradient(15deg, #03001e, #7303c0, #ec38bc, #fdeff9);
  --flatify__button-border-color: linear-gradient(25deg, #03001e, #7303c0, #ec38bc, #fdeff9);
}

.my-button-2 {
  --flatify__button-txt-color: #fff;
  --flatify__button-bg-color: #48cfad;
  --flatify__button-border-color: #37bc9b;
}

.my-button-3 {
  --flatify__button-txt-color: #d770ad;
  --flatify__button-bg-color: #ec87c0;
  --flatify__button-border-color: #d770ad;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/close-button.html b/docs/docs/components/buttons/close-button.html index a7299f19..9b223e26 100644 --- a/docs/docs/components/buttons/close-button.html +++ b/docs/docs/components/buttons/close-button.html @@ -7,7 +7,7 @@ Close button | FlatifyCSS - + @@ -26,7 +26,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Close button</title> <style> .close-button{ margin: 0 5px !important; } </style> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="close-button style-success" aria-label="Close"></button> <button class="close-button style-warning" aria-label="Close"></button> <button class="close-button style-purple" aria-label="Close"></button> <button class="close-button style-red" aria-label="Close"/></button> <button class="close-button color-success" aria-label="Close"></button> <button class="close-button color-warning" aria-label="Close"></button> <button class="close-button color-purple" aria-label="Close"></button> <button class="close-button color-red" aria-label="Close"></button> </div> </body> </html> " height="100px">
index.html
<button class="close-button style-success" aria-label="Close"></button>
<button class="close-button style-warning" aria-label="Close"></button>
<button class="close-button style-purple" aria-label="Close"></button>
<button class="close-button style-red" aria-label="Close"></button>

<button class="close-button color-success" aria-label="Close"></button>
<button class="close-button color-warning" aria-label="Close"></button>
<button class="close-button color-purple" aria-label="Close"></button>
<button class="close-button color-red" aria-label="Close"></button>

Change close icon

It is possible to change the close button icon with both _config.scss and CSS variables.

Inside _config.scss find $CLOSE_ICON and set svg of customized icon with this format:

_config.scss
$CLOSE_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css
--flatify__close-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/hamburger.html b/docs/docs/components/buttons/hamburger.html index 56495980..129b69b5 100644 --- a/docs/docs/components/buttons/hamburger.html +++ b/docs/docs/components/buttons/hamburger.html @@ -7,7 +7,7 @@ Hamburger button | FlatifyCSS - + @@ -26,7 +26,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Hamburger button</title> <style> .hamburger{ margin: 0 5px !important; } </style> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="hamburger color-success" aria-label="Open hamburger"></button> <button class="hamburger color-warning" aria-label="Open hamburger"></button> <button class="hamburger color-purple" aria-label="Open hamburger"></button> <button class="hamburger color-red" aria-label="Open hamburger"></button> </div> </body> </html> " height="100px">
index.html
<button class="hamburger color-success" aria-label="Open hamburger"></button>
<button class="hamburger color-warning" aria-label="Open hamburger"></button>
<button class="hamburger color-purple" aria-label="Open hamburger"></button>
<button class="hamburger color-red" aria-label="Open hamburger"></button>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/search-button.html b/docs/docs/components/buttons/search-button.html index e91caf25..4fe1e390 100644 --- a/docs/docs/components/buttons/search-button.html +++ b/docs/docs/components/buttons/search-button.html @@ -7,7 +7,7 @@ Search button | FlatifyCSS - + @@ -26,7 +26,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Search button</title> <style> .search-button{ margin: 0 5px !important; } </style> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="search-button style-success" aria-label="Search"></button> <button class="search-button style-warning" aria-label="Search"></button> <button class="search-button style-purple" aria-label="Search"></button> <button class="search-button style-red" aria-label="Search"/></button> <button class="search-button color-success" aria-label="Search"></button> <button class="search-button color-warning" aria-label="Search"></button> <button class="search-button color-purple" aria-label="Search"></button> <button class="search-button color-red" aria-label="Search"></button> </div> </body> </html> " height="100px">
index.html
<button class="search-button style-success" aria-label="Search"></button>
<button class="search-button style-warning" aria-label="Search"></button>
<button class="search-button style-purple" aria-label="Search"></button>
<button class="search-button style-red" aria-label="Search"></button>

<button class="search-button color-success" aria-label="Search"></button>
<button class="search-button color-warning" aria-label="Search"></button>
<button class="search-button color-purple" aria-label="Search"></button>
<button class="search-button color-red" aria-label="Search"></button>

Change close icon

It is possible to change the search button icon with both _config.scss and CSS variables.

Inside _config.scss find $SEARCH_ICON and set svg of customized icon with this format:

_config.scss
$SEARCH_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css
--flatify__search-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/buttons/two-layer-button.html b/docs/docs/components/buttons/two-layer-button.html index fc8fcc86..dc4f07c6 100644 --- a/docs/docs/components/buttons/two-layer-button.html +++ b/docs/docs/components/buttons/two-layer-button.html @@ -7,7 +7,7 @@ Two-layer button | FlatifyCSS - + @@ -21,7 +21,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Two layers button</title> </head> <style> @keyframes secondary-layer-slidedown { 0%{ transform: translateY(-1em) } 100%{ transform: translateY(0) } } .custom-button-1{ --flatify__two-layer-button-animation-show: secondary-layer-slidedown 0.3s 0.1s ease; } @keyframes secondary-layer-blur { 0%{ transform: scale(1.5); filter: blur(0.4em); } 100%{ transform: scale(1); filter: blur(0); } } .custom-button-2{ --flatify__two-layer-button-animation-show: secondary-layer-blur 0.5s 0.1s ease; } @keyframes secondary-layer-letters { 0%{ letter-spacing: 0.25em; } 100%{ letter-spacing: 0; } } .custom-button-3{ --flatify__two-layer-button-animation-show: secondary-layer-letters 0.3s 0.1s ease; } </style> <body> <div class="flex-center" style="flex-wrap: wrap"> <button class="button two-layer-button custom-button-1 style-blue"> I am a button <span class="secondary-text">Hello dear</span> </button> <button class="button two-layer-button custom-button-2 style-blue"> I am a button <span class="secondary-text">Hello dear</span> </button> <button class="button two-layer-button custom-button-3 style-blue"> I am a button <span class="secondary-text">Hello dear</span> </button> </div> </body> </html> " height="110px">
Delay for custom animations

Because of the secondary layer fade-in animation as default, it is better to set a delay of 100ms for your custom animation.

index.html
<button class="button two-layer-button custom-button-1 style-blue">
  I am a button
  <span class="secondary-text">Hello dear</span>
</button>

<button class="button two-layer-button custom-button-2 style-blue">
  I am a button
  <span class="secondary-text">Hello dear</span>
</button>

<button class="button two-layer-button custom-button-3 style-blue">
  I am a button
  <span class="secondary-text">Hello dear</span>
</button>
style.css
/* Slide down */
@keyframes secondary-layer-slidedown {
  0% {
    transform: translateY(-1em);
  }
  100% {
    transform: translateY(0);
  }
}

.custom-button-1 {
  --flatify__two-layer-button-animation-show: secondary-layer-slideup 0.3s 0.1s ease;
}

/* Blur */
@keyframes secondary-layer-blur {
  0% {
    transform: scale(1.5);
    filter: blur(0.4em);
  }
  100% {
    transform: scale(1);
    filter: blur(0);
  }
}

.custom-button-2 {
  --flatify__two-layer-button-animation-show: secondary-layer-blur 0.5s 0.1s ease;
}

/* Letter spacing */
@keyframes secondary-layer-letters {
  0% {
    letter-spacing: 0.25em;
  }
  100% {
    letter-spacing: 0;
  }
}

.custom-button-3 {
  --flatify__two-layer-button-animation-show: secondary-layer-letters 0.3s 0.1s ease;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/card.html b/docs/docs/components/card.html index cb18a3a1..e0598c86 100644 --- a/docs/docs/components/card.html +++ b/docs/docs/components/card.html @@ -7,7 +7,7 @@ Cards | FlatifyCSS - + @@ -38,7 +38,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Card</title> <style> .card-action-buttons svg{ fill: currentColor; width: 1.5em; } .my-custom-card{ --flatify__card-txt-color: #E6E9ED; --flatify__card-bg-color: #323133; --flatify__card-border-color: #434A54; --flatify__overlay-layer-bg-color: linear-gradient(40deg, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 50%); --flatify__overlay-layer-backdrop-filter: blur(5px) brightness(0.75) contrast(0.75); --flatify__overlay-layer-priority: 0; } .my-custom-card .card-header{ margin-bottom: 0.5em; } .my-custom-card .card-title{ position: absolute; bottom: 0.25em; left: 0.75em; } </style> </head> <body class="flex-center"> <article class="card my-custom-card" style="max-width: 320px"> <header class="card-header overlay-layer"> <div class="card-badges"> <a href="#" class="badge style-dark-light">Sundays</a> <a href="#" class="badge style-dark-light">Cards</a> </div> <img class="card-image" src="https://picsum.photos/200/300" alt="Card image" /> <h2 class="card-title">Hello, I am a new card</h2> </header> <div class="card-body"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. </div> </article> </body> </html> " height="320px">
index.html
<article class="card my-custom-card" style="max-width: 320px">
  <header class="card-header overlay-layer">
    <div class="card-badges">
      <a href="#" class="badge style-dark-light">Sundays</a>
      <a href="#" class="badge style-dark-light">Cards</a>
    </div>
    <img class="card-image" src="https://picsum.photos/200/300" alt="Card image" />
    <h2 class="card-title">Hello, I am a new card</h2>
  </header>
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis.
  </div>
</article>
style.css
.my-custom-card {
  --flatify__card-txt-color: #e6e9ed;
  --flatify__card-bg-color: #323133;
  --flatify__card-border-color: #434a54;
  --flatify__overlay-layer-bg-color: linear-gradient(
    40deg,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.08) 50%
  );
  --flatify__overlay-layer-backdrop-filter: blur(5px) brightness(0.75) contrast(0.75);
  --flatify__overlay-layer-priority: 0;
}

.my-custom-card .card-header {
  margin-bottom: 0.5em;
}

.my-custom-card .card-title {
  position: absolute;
  bottom: 0.25em;
  left: 0.75em;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/dropdown.html b/docs/docs/components/dropdown.html index ef5e79a5..4d49d779 100644 --- a/docs/docs/components/dropdown.html +++ b/docs/docs/components/dropdown.html @@ -7,7 +7,7 @@ Dropdowns | FlatifyCSS - + @@ -50,7 +50,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Dropdown</title> <style> @keyframes my-dropdown-show-animation{ from{ opacity: 0; transform: scale(1.2) rotate(90deg); } to{ opacity: 1; transform: scale(1) rotate(0); } } @keyframes my-dropdown-hide-animation{ from{ transform: scale(1); } 50%{ transform: scale(1.2); } to{ transform: scale(0); } } .my-custom-dropdown{ /* dropdown */ --flatify__dropdown-animation-show: my-dropdown-show-animation 500ms ease; --flatify__dropdown-animation-hide: my-dropdown-hide-animation 500ms ease; /* submenu */ --flatify__submenu-bg-color: #D8334A; --flatify__submenu-txt-color: #F5F7FA; --flatify__submenu-border-color: #BF263C; /* submenu items */ --flatify__submenu-item-bg-color: #BF263C; --flatify__submenu-item-txt-color: #F5F7FA; --flatify__submenu-item-bg-color__hover: #A0D468; --flatify__submenu-item-bg-color__focus: #FFCE54; --flatify__submenu-item-txt-color__hover: #3C3B3D; --flatify__submenu-item-txt-color__focus: #BF263C; } </style> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script> </head> <body class="flex-center"> <div class="dropdown-wrapper my-custom-dropdown"> <button id="my-dropdown-toggle" class="button dropdown-toggle arrow-button" aria-expanded="false"> Custom dropdown </button> <ul class="dropdown menu-items-wrapper" aria-labelledby="my-dropdown-toggle" data-dropdown-auto-close="outside" > <li class="menu-item heading">My Account</li> <li class="menu-item"><a href="#">Sign up</a></li> <li class="menu-item"><a href="#">Login</a></li> <li class="menu-item"><a href="#">About us</a></li> <li class="menu-item"><a href="#">Contribute</a></li> <li class="menu-item"><a href="#">Rate it!</a></li> <li aria-hidden="true"><span class="pointer-arrow"></span></li> </ul> </div> </body> </html> " height="420px">
index.html
<div class="dropdown-wrapper my-custom-dropdown">...</div>
style.css
@keyframes my-dropdown-show-animation {
  from {
    opacity: 0;
    transform: scale(1.2) rotate(90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes my-dropdown-hide-animation {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(0);
  }
}

.my-custom-dropdown {
  /* dropdown */
  --flatify__dropdown-animation-show: my-dropdown-show-animation 500ms ease;
  --flatify__dropdown-animation-hide: my-dropdown-hide-animation 500ms ease;
  /* submenu */
  --flatify__submenu-bg-color: #d8334a;
  --flatify__submenu-txt-color: #f5f7fa;
  --flatify__submenu-border-color: #bf263c;
  /* submenu items */
  --flatify__submenu-item-bg-color: #bf263c;
  --flatify__submenu-item-txt-color: #f5f7fa;
  --flatify__submenu-item-bg-color__hover: #a0d468;
  --flatify__submenu-item-bg-color__focus: #ffce54;
  --flatify__submenu-item-txt-color__hover: #3c3b3d;
  --flatify__submenu-item-txt-color__focus: #bf263c;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/fireworks.html b/docs/docs/components/fireworks.html index 8387821b..83dde968 100644 --- a/docs/docs/components/fireworks.html +++ b/docs/docs/components/fireworks.html @@ -7,7 +7,7 @@ Fireworks | FlatifyCSS - + @@ -43,7 +43,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Fireworks</title> </head> <body> <div class="flex-center" style="padding-top: 3em; gap: 4em;"> <div class="fireworks anim-hue" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> <div class="fireworks anim-hue-min" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> </div> </body> </html> " height="200px">
index.html
<div class="fireworks anim-hue" aria-hidden="true">...</div>
<div class="fireworks anim-hue-min" aria-hidden="true">...</div>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/loading.html b/docs/docs/components/loading.html index bd7f5a7e..93d6a6c4 100644 --- a/docs/docs/components/loading.html +++ b/docs/docs/components/loading.html @@ -7,7 +7,7 @@ Loading | FlatifyCSS - + @@ -56,7 +56,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Loading</title> <style> html, body{ height: 100%; } .my-dots-loading-1{ --flatify__loading-color: #48CFAD; --flatify__loading-dot-width: 1em; --flatify__loading-dot-height: 0.5em; --flatify__loading-dot-animation-start-scale: 0; --flatify__loading-dot-animation-duration: 0.75s; } .my-dots-loading-2{ --flatify__loading-color: #FC6E51; --flatify__loading-dot-width: 0.5em; --flatify__loading-dot-height: 2em; --flatify__loading-dot-animation-start-scale: 2; --flatify__loading-dot-animation-duration: 2s; } .my-spinner-loading-1{ --flatify__loading-color: #6A50A7; --flatify__loading-spinner-animation-duration: 2s; } .my-spinner-loading-2{ --flatify__loading-color: #AA8E69; --flatify__loading-spinner-animation-duration: 0.35s; } </style> </head> <body class="flex-center"> <div class="flex-center" style="gap: 30px"> <span class="loading my-dots-loading-1"></span> <span class="loading my-dots-loading-2"></span> <span class="spinner my-spinner-loading-1"></span> <span class="spinner my-spinner-loading-2"></span> </div> </body> </html> " height="180px">
index.html
<!-- Custom Dots loadings -->
<span class="loading my-dots-loading-1"></span>
<span class="loading my-dots-loading-2"></span>

<!-- Custom spinner loadings -->
<span class="spinner my-spinner-loading-1"></span>
<span class="spinner my-spinner-loading-2"></span>
style.css
/*  Custom Dots loadings */
.my-dots-loading-1 {
  --flatify__loading-color: #48cfad;
  --flatify__loading-dot-width: 1em;
  --flatify__loading-dot-height: 0.5em;
  --flatify__loading-dot-animation-start-scale: 0;
  --flatify__loading-dot-animation-duration: 0.75s;
}

.my-dots-loading-2 {
  --flatify__loading-color: #fc6e51;
  --flatify__loading-dot-width: 0.5em;
  --flatify__loading-dot-height: 2em;
  --flatify__loading-dot-animation-start-scale: 2;
  --flatify__loading-dot-animation-duration: 2s;
}

/* Custom spinner loadings */
.my-spinner-loading-1 {
  --flatify__loading-color: #6a50a7;
  --flatify__loading-spinner-animation-duration: 2s;
}

.my-spinner-loading-2 {
  --flatify__loading-color: #aa8e69;
  --flatify__loading-spinner-animation-duration: 0.35s;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/menu.html b/docs/docs/components/menu.html index 4f39ad13..b744814b 100644 --- a/docs/docs/components/menu.html +++ b/docs/docs/components/menu.html @@ -7,7 +7,7 @@ Menu | FlatifyCSS - + @@ -51,7 +51,7 @@ --flatify__submenu-animation-show-delay
Or set a new animation:
--flatify__submenu-animation-show

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/modal.html b/docs/docs/components/modal.html index 1c652abd..bc2f81d2 100644 --- a/docs/docs/components/modal.html +++ b/docs/docs/components/modal.html @@ -7,7 +7,7 @@ Modals | FlatifyCSS - + @@ -52,7 +52,7 @@ </html> " height="250px">
Modal backdrop color

There is also a CSS variable called --flatify__modal-backdrop-color, it just changes the color of the modal backdrop. The important thing is that, it is not inside modal, it is a global element at the first level of body children, so you must set its custom color to the :root, html or body.
For more info about checkout the backdrop component customization

style.css
body {
  --flatify__modal-backdrop-color: #8e8271;
}

.my-modal {
  --flatify__modal-bg-color: #aa8e69;
  --flatify__modal-txt-color: #f5f7fa;
  --flatify__modal-border-color: #ffce54;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/navbar.html b/docs/docs/components/navbar.html index f97ca00b..18068536 100644 --- a/docs/docs/components/navbar.html +++ b/docs/docs/components/navbar.html @@ -7,7 +7,7 @@ Navigation bar | FlatifyCSS - + @@ -47,7 +47,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Navigation bar</title> <style> .menu-items-wrapper:not(:last-child){ margin-bottom: 0.64em; } </style> </head> <body> <nav class="menu-items-wrapper navbar style-red"> <ul class="links"> <li class="menu-item active"> <a href="#">Active</a> </li> <li class="menu-item"> <a href="#">Articles</a> </li> <li class="menu-item"> <a href="#">Photos</a> </li> <li class="menu-item"> <a href="#">Videos</a> </li> <li class="menu-item disabled"> <a>Disabled</a> </li> </ul> </nav> <nav class="menu-items-wrapper navbar style-blue"> <ul class="links"> <li class="menu-item active"> <a href="#">Active</a> </li> <li class="menu-item"> <a href="#">Articles</a> </li> <li class="menu-item"> <a href="#">Photos</a> </li> <li class="menu-item"> <a href="#">Videos</a> </li> <li class="menu-item disabled"> <a>Disabled</a> </li> </ul> </nav> <nav class="menu-items-wrapper navbar style-green"> <ul class="links"> <li class="menu-item active"> <a href="#">Active</a> </li> <li class="menu-item"> <a href="#">Articles</a> </li> <li class="menu-item"> <a href="#">Photos</a> </li> <li class="menu-item"> <a href="#">Videos</a> </li> <li class="menu-item disabled"> <a>Disabled</a> </li> </ul> </nav> <nav class="menu-items-wrapper navbar style-dark"> <ul class="links"> <li class="menu-item active"> <a href="#">Active</a> </li> <li class="menu-item"> <a href="#">Articles</a> </li> <li class="menu-item"> <a href="#">Photos</a> </li> <li class="menu-item"> <a href="#">Videos</a> </li> <li class="menu-item disabled"> <a>Disabled</a> </li> </ul> </nav> <nav class="menu-items-wrapper navbar style-light-light"> <ul class="links"> <li class="menu-item active"> <a href="#">Active</a> </li> <li class="menu-item"> <a href="#">Articles</a> </li> <li class="menu-item"> <a href="#">Photos</a> </li> <li class="menu-item"> <a href="#">Videos</a> </li> <li class="menu-item disabled"> <a>Disabled</a> </li> </ul> </nav> </body> </html> " height="400px">
index.html
<nav class="menu-items-wrapper navbar style-red">...</nav>
<nav class="menu-items-wrapper navbar style-blue">...</nav>
<nav class="menu-items-wrapper navbar style-green">...</nav>
<nav class="menu-items-wrapper navbar style-dark">...</nav>
<nav class="menu-items-wrapper navbar style-light-light">...</nav>

Customization

As said above navigation bar is simply a menu with submenues, there is no special option for navigation bar customization, you can check menu customization documentation.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/pagination.html b/docs/docs/components/pagination.html index e8d0f140..a51de90d 100644 --- a/docs/docs/components/pagination.html +++ b/docs/docs/components/pagination.html @@ -7,7 +7,7 @@ Pagination | FlatifyCSS - + @@ -19,7 +19,7 @@ </html> " height="310px">
Active and static buttons

To indicate active page number add the .active class to the .button.
Sometimes there are parts of the pagination that should not be clickable/focusable however they are like buttons, .static class will help you have this kind of element inside pagination.

index.html
<div class="button-group">
  <a href="#" class="button bordered">First</a>
  <a href="#" class="button bordered">12</a>
  <a href="#" class="button bordered active style-accent">13</a>
  <a href="#" class="button bordered">14</a>
  <a href="#" class="button bordered">Last</a>
</div>

<div class="button-group">
  <a class="button disabled">Previous</a>
  <a href="#" class="button">1</a>
  <a href="#" class="button">2</a>
  <a href="#" class="button">3</a>
  <a href="#" class="button">Next</a>
</div>

<div class="button-group">
  <a href="#" class="button">1</a>
  <a href="#" class="button active">2</a>
  <a href="#" class="button">3</a>
  <span class="button static">...</span>
  <a href="#" class="button">97</a>
  <a href="#" class="button">98</a>
  <a href="#" class="button">99</a>
</div>

<div class="flex-center">
  <span class="push-left">1 from 99</span>
  <div class="button-group">
    <a href="#" class="button active">1</a>
    <a href="#" class="button">2</a>
    <a href="#" class="button">3</a>
    <span class="button static">...</span>
    <a href="#" class="button">97</a>
    <a href="#" class="button">98</a>
    <a href="#" class="button">99</a>
  </div>
</div>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/popover.html b/docs/docs/components/popover.html index e8f2bbd0..b046789f 100644 --- a/docs/docs/components/popover.html +++ b/docs/docs/components/popover.html @@ -7,7 +7,7 @@ Popovers | FlatifyCSS - + @@ -18,7 +18,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Dropdown</title> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <div class="dropdown-wrapper"> <b id="my-popover-toggle" class="dropdown-toggle" aria-expanded="false"> Click me! </b> <div class="dropdown" aria-labelledby="my-popover-toggle" > Hello world! <span aria-hidden="true" class="pointer-arrow" style="position: absolute; left: 93px;"></span> </div> </div> Donec nec justo eget felis facilisis fermentum. </div> </body> </html> " height="150px">
The same as a dropdown

The HTML structure of popover is like a dropdown as said above, for offset and special styles you can add the .popover class to the .dropdown-wrapper.

index.html
<div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
  erat ut turpis.
  <div class="dropdown-wrapper popover">
    <b id="my-popover-toggle" class="dropdown-toggle" aria-expanded="false"> Click me! </b>
    <div class="dropdown" aria-labelledby="my-popover-toggle">
      Hello world!
      <span aria-hidden="true" class="pointer-arrow" style="position: absolute; left: 93px;"></span>
    </div>
  </div>
  Donec nec justo eget felis facilisis fermentum.
</div>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/progress.html b/docs/docs/components/progress.html index 6143df06..808a583c 100644 --- a/docs/docs/components/progress.html +++ b/docs/docs/components/progress.html @@ -7,7 +7,7 @@ Progress | FlatifyCSS - + @@ -46,7 +46,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Progress</title> <style> .my-custom-progress-bar{ --flatify__color-accent-primary: linear-gradient(to right, #8a2387, #e94057, #f27121); --flatify__color-accent-light: rgba(255,255,255,0.75); --flatify__progress-bg-color: #F5F7FA; --flatify__progress-txt-color: #fff; --flatify__progress-border-color: #f0c2ee; --flatify__progress-animation-duration: 1s; } </style> </head> <body> <div class="progress my-custom-progress-bar"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing my-custom-progress-bar"> <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress processing bordered my-custom-progress-bar" style="margin-bottom: 0"> <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> </body> </html> " height="140px">
index.html
<div class="progress my-custom-progress-bar">
  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress processing my-custom-progress-bar">
  <div class="progress-bar width-75p" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress processing bordered my-custom-progress-bar" style="margin-bottom: 0">
  <div class="progress-bar width-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    25%
  </div>
</div>
style.css
.my-custom-progress-bar {
  --flatify__color-accent-primary: linear-gradient(to right, #8a2387, #e94057, #f27121);
  --flatify__color-accent-light: rgba(255, 255, 255, 0.75);
  --flatify__progress-bg-color: #f5f7fa;
  --flatify__progress-txt-color: #fff;
  --flatify__progress-border-color: #f0c2ee;
  --flatify__progress-animation-duration: 1s;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/search-bar.html b/docs/docs/components/search-bar.html index 39e0e5d8..cba95213 100644 --- a/docs/docs/components/search-bar.html +++ b/docs/docs/components/search-bar.html @@ -7,7 +7,7 @@ Search bar | FlatifyCSS - + @@ -26,7 +26,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Search bar</title> <style> .search-bar{ width: 45%; margin: 5px; } </style> </head> <body class="flex-center" style="flex-wrap: wrap"> <div class="search-bar"> <input class="style-dark" type="search" placeholder="Search something..." /> <button class="search-button style-dark" aria-label="Search"></button> </div> <div class="search-bar"> <input class="style-light" type="search" placeholder="Search something..." /> <button class="search-button style-light" aria-label="Search"></button> </div> <div class="search-bar"> <input class="style-green-light" type="search" placeholder="Search something..." /> <button class="search-button style-green" aria-label="Search"></button> </div> <div class="search-bar"> <input class="style-blue" type="search" placeholder="Search something..." /> <button class="search-button style-blue" aria-label="Search"></button> </div> <div class="search-bar"> <input class="style-red" type="search" placeholder="Search something..." /> <button class="search-button style-red-light" aria-label="Search"></button> </div> <div class="search-bar"> <input class="style-orange" type="search" placeholder="Search something..." /> <button class="search-button style-orange-light" aria-label="Search"></button> </div> </body> </html> " height="250px">
index.html
<div class="search-bar">
  <input class="style-dark" type="search" placeholder="Search something..." />
  <button class="search-button style-dark" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-light" type="search" placeholder="Search something..." />
  <button class="search-button style-light" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-green-light" type="search" placeholder="Search something..." />
  <button class="search-button style-green" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-blue" type="search" placeholder="Search something..." />
  <button class="search-button style-blue" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-red" type="search" placeholder="Search something..." />
  <button class="search-button style-red-light" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-orange" type="search" placeholder="Search something..." />
  <button class="search-button style-orange-light" aria-label="Search"></button>
</div>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/components/tabs.html b/docs/docs/components/tabs.html index 7dade87e..7324925b 100644 --- a/docs/docs/components/tabs.html +++ b/docs/docs/components/tabs.html @@ -7,7 +7,7 @@ Tabs | FlatifyCSS - + @@ -27,6 +27,10 @@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script> </head> <body class="flex-column-center"> <div class="tabs-wrapper"> <div class="tabs-header flex-center" role="tablist"> <button role="tab" class="tab-button active" aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body> </html> +" height="310px">

Bordered tabs

It is also possible to have a bordered tabs component, add .bordered class to the .tabs-wrapper.

Animations

Tabs by default has blow in/out animation, however you can add .slide-animation, .fade-animation, .no-animation to .tabs-content.
By the way, it is possible to use a brand new animation to show/hide tabs, you can use CSS variables — that are defined for this purpose — to create your gorgeous animation.

Predefined animations

.slide-animation
.fade-animation
@@ -37,18 +41,18 @@ --flatify__tab-animation-hide

Do not use none for animations!

Never use none for these kinds of animations, because FlatifyCSS JavaScript listens to animationend event, so if you set none there won't be an animation, it means animationend is not going to be triggered. If you want to disable an animation just set animation-duration to 0s.
The example could be:

style.css
.no-animation-accordion {
  --flatify__tab-animation-show: flatify-fade-in 0s;
  --flatify__tab-animation-hide: flatify-fade-out 0s;
}

Animations example

Check out the examples below to understand use cases:

HTML

The examples above has the same HTML for different types, the only point is that animation classes should be added to the .tabs-content element.

style.css
/* Asteroid animation */
@keyframes my-asteroid-anim-show {
    from {
            opacity: 0;
            transform: scale(3) rotate(180deg);
    }
    to {
            opacity: 1;
            transform: scale(1) rotate(0);
    }
}

.my-custom-asteroid-animation {
    --flatify__tab-animation-show: my-asteroid-anim-show 1s cubic-bezier(0.59, -0.39, 0.36, 1.38);
    --flatify__tab-animation-hide: flatify-fade-out 0s;
}

/* Y asix slide animation */
@keyframes my-slide-top-anim-show {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes my-slide-bottom-anim-hide {
    from {
        opacity: 1
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(50%);
    }
}

.my-custom-slide-animation {
    --flatify__tab-animation-show: my-slide-top-anim-show 0.2s linear;
    --flatify__tab-animation-hide: my-slide-bottom-anim-hide 0.2s linear;
}

Animations for reduced motion users

Accessibility matters!

For reduced motion users, all animations will be fade in/out.

Original
Reduced motion

Sizes

To change tabs size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html
<div class="tabs-wrapper size-xs">...</div>
<div class="tabs-wrapper size-md">...</div>
<div class="tabs-wrapper size-2x">...</div>

Colors

There are helper classes for styling elements like tabs, first read about color setter classes. Note that you should add classes to the .tabs-wrapper or .tabs-header and .tabs-content separately.

index.html
<div class="tabs-wrapper bordered size-xs">...</div>
<div class="tabs-wrapper bordered size-md">...</div>
<div class="tabs-wrapper bordered size-2x">...</div>

Colors

There are helper classes for styling elements like tabs, first read about color setter classes. Note that you should add classes to the .tabs-wrapper or .tabs-header and .tabs-content separately.

index.html
<div class="tabs-wrapper style-dark">...</div>
<div class="tabs-wrapper style-blue-light">...</div>
<div class="tabs-wrapper style-pink">...</div>

Customization

FlatifyCSS has some CSS variables for customizing tabs, as we talked earlier about animations you can also change the colors of tabs with these variables.

--flatify__tab-txt-color
+" height="500px">

index.html
<div class="tabs-wrapper bordered style-dark">...</div>
<div class="tabs-wrapper bordered style-blue-light">...</div>
<div class="tabs-wrapper bordered style-pink">...</div>

Customization

FlatifyCSS has some CSS variables for customizing tabs, as we talked earlier about animations you can also change the colors of tabs with these variables.

--flatify__tab-txt-color
--flatify__tab-bg-color
--flatify__tab-border-color
--flatify__color-accent-primary (to customize active tab color)

and also animation CSS variables as we talked about them above:

--flatify__tab-animation-show-duration
@@ -56,10 +60,10 @@ --flatify__tab-animation-show
--flatify__tab-animation-hide

Created with ❤️ by FlatifyCSS's team and its contributors.
- +" height="200px">
Created with ❤️ by FlatifyCSS's team and its contributors.
+ \ No newline at end of file diff --git a/docs/docs/content/blockquote.html b/docs/docs/content/blockquote.html index ed42629c..ef319294 100644 --- a/docs/docs/content/blockquote.html +++ b/docs/docs/content/blockquote.html @@ -7,7 +7,7 @@ Blockquote | FlatifyCSS - + @@ -25,7 +25,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Quote</title> <style> .my-blockquote{ --flatify__blockquote-accent-color: #ff9600; } </style> </head> <body> <blockquote class="my-blockquote"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p> <cite>John Doe</cite> </blockquote> <blockquote class="style-green"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p> <cite>John Doe</cite> </blockquote> <blockquote class="large style-red" style="margin-bottom: 0"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p> <cite>John Doe</cite> </blockquote> </body> </html> " height="580px">
index.html
<blockquote class="my-blockquote">...</blockquote>

<blockquote class="style-green">...</blockquote>

<blockquote class="large style-red">...</blockquote>
style.css
.my-blockquote {
  --flatify__blockquote-accent-color: #ff9600;
}

Change quote icon

It is possible to change the blockquote icon with both _config.scss and CSS variables.

Inside _config.scss find $BLOCKQUOTE_ICON and set svg of customized icon with this format:

_config.scss
$BLOCKQUOTE_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css
--flatify__blockquote-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/content/figure.html b/docs/docs/content/figure.html index f50924f1..10b02810 100644 --- a/docs/docs/content/figure.html +++ b/docs/docs/content/figure.html @@ -7,7 +7,7 @@ Figure and image | FlatifyCSS - + @@ -30,7 +30,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Figure</title> </head> <body> <figure class="overlay-caption edge-sharp"> <img class="edge-sharp" src="https://picsum.photos/500/300" alt="a random image"/> <figcaption>A random image - high quality images</figcaption> <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a> </figure> <br> <br> <figure class="overlay-caption centered"> <img src="https://picsum.photos/500/300" alt="a random image"/> <figcaption>A random image - high quality images</figcaption> <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a> </figure> <br> <br> <figure class="overlay-caption fill"> <img src="https://picsum.photos/500/300" alt="a random image"/> <figcaption>A random image - high quality images</figcaption> <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a> </figure> </body> </html> " height="1250px">
index.html
<figure class="overlay-caption edge-sharp">
  <img class="edge-sharp" src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>

<figure class="overlay-caption centered">
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>

<figure class="overlay-caption fill">
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/content/highlight.html b/docs/docs/content/highlight.html index 2050c74b..0bee5104 100644 --- a/docs/docs/content/highlight.html +++ b/docs/docs/content/highlight.html @@ -7,7 +7,7 @@ Highlight | FlatifyCSS - + @@ -19,7 +19,7 @@ </html>" height="100px">
index.html
<mark class="inline">Lorem ipsum</mark> dolor sit amet, consectetuer <mark class="inline">adipiscing</mark> elit. Donec
odio. Quisque volutpat mattis eros. mattis eros.

Customization

You can customize highlights text and background color with color setter classes.

index.html
<mark class="inline style-green">Lorem ipsum</mark> dolor sit amet, consectetuer
<mark class="inline style-red">adipiscing</mark> elit.

<br />

Donec odio. Quisque volutpat mattis eros. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit
amet orci.
<mark class="style-purple">
  Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in,
  pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Donec nec justo eget felis facilisis fermentum. Aliquam
  porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus,
  tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.
</mark>
Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/content/keyboard-buttons.html b/docs/docs/content/keyboard-buttons.html index 6820c8a8..96e70e31 100644 --- a/docs/docs/content/keyboard-buttons.html +++ b/docs/docs/content/keyboard-buttons.html @@ -7,7 +7,7 @@ Keyboard buttons | FlatifyCSS - + @@ -17,7 +17,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Keyboard buttons</title> </head> <body> <kbd>Ctrl</kbd> + <kbd>F5</kbd> <br /><br /> <div class="size-2x"> <kbd class="style-red">⌘</kbd> + <kbd class="style-blue">S</kbd> </div> <br /><br /> <div class="size-3x"> <kbd class="style-orange">Ctrl</kbd> + <kbd class="style-yellow">Shift</kbd> + <kbd class="style-green">S</kbd> </div> </body> </html> " height="230px">
index.html
<kbd>Ctrl</kbd> + <kbd>F5</kbd>

<div class="size-2x">
  <kbd class="style-red">⌘</kbd> +
  <kbd class="style-blue">S</kbd>
</div>

<div class="size-3x">
  <kbd class="style-orange">Ctrl</kbd> + <kbd class="style-yellow">Shift</kbd> +
  <kbd class="style-green">S</kbd>
</div>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/content/separators.html b/docs/docs/content/separators.html index fc0cfde8..026724a8 100644 --- a/docs/docs/content/separators.html +++ b/docs/docs/content/separators.html @@ -7,7 +7,7 @@ Separators | FlatifyCSS - + @@ -20,7 +20,7 @@ </html>" height="80px">

Short line

Sometimes classic <hr> is more interrupting than it should be, however, a short one can be beneficial.

index.html
<hr class="short" />
<hr class="short style-green" />
<hr class="short style-warning" />
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/content/table.html b/docs/docs/content/table.html index 8c7b27cd..6f166140 100644 --- a/docs/docs/content/table.html +++ b/docs/docs/content/table.html @@ -7,7 +7,7 @@ Table | FlatifyCSS - + @@ -42,7 +42,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Table</title> <style> .my-table{ --flatify__table-border-color: #E0C341; --flatify__table-bg-color: #967ADC; --flatify__table-bg-color-dark: #6A50A7; --flatify__table-bg-color-darker: #4d3a79; --flatify__table-txt-color: #FFF; } </style> </head> <body> <table class="my-table bordered striped"> <thead> <tr> <th>Student</th> <th>Study time</th> <th>Homework</th> <th>Total grade</th> </tr> </thead> <tbody> <tr> <td>Alan</td> <td>6</td> <td>9/10</td> <td>95</td> </tr> <tr> <td>Carlos</td> <td>2</td> <td>7/10</td> <td>72</td> </tr> <tr> <td>Kim</td> <td>4</td> <td>7/10</td> <td>88</td> </tr> <tr> <td>Pat</td> <td>2</td> <td>4/10</td> <td>60</td> </tr> <tr> <td>Thomas</td> <td>5</td> <td>10/10</td> <td>98</td> </tr> </tbody> </table> </body> </html> " height="325px">
index.html
<table class="my-table bordered striped">
  ...
</table>
style.css
.my-table {
  --flatify__table-border-color: #e0c341;
  --flatify__table-bg-color: #967adc;
  --flatify__table-bg-color-dark: #6a50a7;
  --flatify__table-bg-color-darker: #4d3a79;
  --flatify__table-txt-color: #fff;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/forms/checkbox.html b/docs/docs/forms/checkbox.html index b8e6b82a..ebe5b766 100644 --- a/docs/docs/forms/checkbox.html +++ b/docs/docs/forms/checkbox.html @@ -7,7 +7,7 @@ Checkbox | FlatifyCSS - + @@ -34,7 +34,7 @@ --flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css
.checkbox-wrapper {
  --flatify__form-element-accent-color: #37bc9b;
  --flatify__form-element-bg-color: #ffce54;
  --flatify__form-element-txt-color: #434a54;
  --flatify__form-element-border-color: #e0c341;
  --flatify__form-element-border-color__focus: #f6bb42;
  --flatify__form-element-border-color__valid: #5d9cec;
  --flatify__form-element-border-color__warning: #8067b7;
  --flatify__form-element-border-color__invalid: #bf263c;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/forms/inputs.html b/docs/docs/forms/inputs.html index c3e702aa..04fb5604 100644 --- a/docs/docs/forms/inputs.html +++ b/docs/docs/forms/inputs.html @@ -7,7 +7,7 @@ Inputs | FlatifyCSS - + @@ -44,7 +44,7 @@ --flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css
:root {
    --flatify__form-element-accent-color: #37BC9B;
    --flatify__form-element-bg-color: #ffce54;
    --flatify__form-element-txt-color: #434a54;
    --flatify__form-element-border-color: #ffce54;
    --flatify__form-element-border-color__focus: #f6bb42;
    --flatify__form-element-border-color__valid: #5d9cec;
    --flatify__form-element-border-color__warning: #8067b7;
    --flatify__form-element-border-color__invalid: #bf263c;ch
}
Style every input differently!

Note that you do not have to set these variables as root, you can style .input-wrapper or each input element as well.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/forms/radio.html b/docs/docs/forms/radio.html index 07d58dc3..9ff26550 100644 --- a/docs/docs/forms/radio.html +++ b/docs/docs/forms/radio.html @@ -7,7 +7,7 @@ Radio | FlatifyCSS - + @@ -30,7 +30,7 @@ --flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css
.radio-wrapper {
  --flatify__form-element-accent-color: #37bc9b;
  --flatify__form-element-bg-color: #ffce54;
  --flatify__form-element-txt-color: #434a54;
  --flatify__form-element-border-color: #e0c341;
  --flatify__form-element-border-color__focus: #f6bb42;
  --flatify__form-element-border-color__valid: #5d9cec;
  --flatify__form-element-border-color__warning: #8067b7;
  --flatify__form-element-border-color__invalid: #bf263c;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/forms/select.html b/docs/docs/forms/select.html index 182f4151..5609e629 100644 --- a/docs/docs/forms/select.html +++ b/docs/docs/forms/select.html @@ -7,7 +7,7 @@ Select | FlatifyCSS - + @@ -15,7 +15,7 @@
Skip to main content

Select

FlatifyCSS gives styles to the native <select> which can be denied by adding .default class Changing size and adding colors is similar to inputs.

Size and colors

index.html
<label for="cars" class="form-label size-sm">Choose your car</label>
<select name="cars" id="cars" class="size-xs">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<label for="cars2" class="form-label">Choose your car</label>
<select name="cars2" id="cars2" class="style-red">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<label for="cars3" class="form-label size-lg">Choose your car</label>
<select name="cars3" id="cars3" class="style-dark size-lg">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<label for="cars4" class="form-label size-2x">Choose your cars</label>
<select multiple name="cars4" id="cars4" class="style-green size-2x">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Change select icon

It is possible to change the select select icon with both _config.scss and CSS variables.

Inside _config.scss find $SELECT_ICON and set svg of customized icon with this format:

_config.scss
$SELECT_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css
--flatify__select-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/forms/toggle.html b/docs/docs/forms/toggle.html index b6353d7c..09e5acf4 100644 --- a/docs/docs/forms/toggle.html +++ b/docs/docs/forms/toggle.html @@ -7,7 +7,7 @@ Toggle switch | FlatifyCSS - + @@ -29,7 +29,7 @@ --flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css
.toggle-wrapper {
  --flatify__form-element-accent-color: #37bc9b;
  --flatify__form-element-bg-color: #ffce54;
  --flatify__form-element-txt-color: #434a54;
  --flatify__form-element-border-color: #e0c341;
  --flatify__form-element-border-color__focus: #f6bb42;
  --flatify__form-element-border-color__valid: #5d9cec;
  --flatify__form-element-border-color__warning: #8067b7;
  --flatify__form-element-border-color__invalid: #bf263c;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/alignment.html b/docs/docs/helpers/alignment.html index bb50b28c..4983843c 100644 --- a/docs/docs/helpers/alignment.html +++ b/docs/docs/helpers/alignment.html @@ -7,7 +7,7 @@ Alignment & positioning | FlatifyCSS - + @@ -51,7 +51,7 @@ .fixed-bottom
.fixed-left
.fixed-right

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/animation.html b/docs/docs/helpers/animation.html index 43b8e229..f5434ca3 100644 --- a/docs/docs/helpers/animation.html +++ b/docs/docs/helpers/animation.html @@ -7,7 +7,7 @@ Animations | FlatifyCSS - + @@ -47,7 +47,7 @@ .anim-fade-out (one time)

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/color-setters.html b/docs/docs/helpers/color-setters.html index 19beb552..89989ffd 100644 --- a/docs/docs/helpers/color-setters.html +++ b/docs/docs/helpers/color-setters.html @@ -7,7 +7,7 @@ Color setters | FlatifyCSS - + @@ -17,7 +17,7 @@ </html>" height="165px">
index.html
<div class="my-box flex-center style-blue">
  <p class="text-centered">Hello Everybody!</p>
</div>

<div class="my-box flex-center style-red">
  <p class="text-centered">Hello Everybody!</p>
</div>

<div class="my-box flex-center style-green">
  <p class="text-centered">Hello Everybody!</p>
</div>
style.css
.my-box {
  width: 200px;
  height: 100px;
  margin: 0.5em;
  border: 0.25em solid;
  border-radius: 1em;
}

Main colors

.style-accent
UI primary color.
.style-accent-light
UI primary color but lighter.

Palette colors

These colors can be declared from the _config.scss file or reset with CSS, for more information read this page.

.style-blue-light
.style-blue
.style-green-light
.style-green
.style-yellow-light
.style-yellow
.style-orange-light
.style-orange
.style-red-light
.style-red
.style-pink-light
.style-pink
.style-purple-light
.style-purple
.style-light-light
.style-light
.style-dark-light
.style-dark

State colors

Colors are an important part of expressing feelings in the process of designing a UI, this helper classes are specifically here to help you achieve it.

.style-success-light
.style-success
.style-info-light
.style-info
.style-warning-light
.style-warning
.style-danger-light
.style-danger

Text colors

There are also some useful classes for changing texts color.

.color-accent-light  Light lorem ipsum dolor sit amet.

.color-accent  Lorem ipsum dolor sit amet.


.color-blue-light  Light lorem ipsum dolor sit amet.

.color-blue  Lorem ipsum dolor sit amet.

.color-green-light  Light lorem ipsum dolor sit amet.

.color-green  Lorem ipsum dolor sit amet.

.color-yellow-light  Light lorem ipsum dolor sit amet.

.color-yellow  Lorem ipsum dolor sit amet.

.color-orange-light  Light lorem ipsum dolor sit amet.

.color-orange  Lorem ipsum dolor sit amet.

.color-red-light  Light lorem ipsum dolor sit amet.

.color-red  Lorem ipsum dolor sit amet.

.color-pink-light  Light lorem ipsum dolor sit amet.

.color-pink  Lorem ipsum dolor sit amet.

.color-purple-light  Light lorem ipsum dolor sit amet.

.color-purple  Lorem ipsum dolor sit amet.


.color-success-light  Light lorem ipsum dolor sit amet.

.color-success  Lorem ipsum dolor sit amet.

.color-info-light  Light lorem ipsum dolor sit amet.

.color-info  Lorem ipsum dolor sit amet.

.color-warning-light  Light lorem ipsum dolor sit amet.

.color-warning  Lorem ipsum dolor sit amet.

.color-danger-light  Light lorem ipsum dolor sit amet.

.color-danger  Lorem ipsum dolor sit amet.

.color-light-light  Light lorem ipsum dolor sit amet.

.color-light  Lorem ipsum dolor sit amet.

.color-dark-light  Light lorem ipsum dolor sit amet.

.color-dark  Lorem ipsum dolor sit amet.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/containers.html b/docs/docs/helpers/containers.html index 2cadefcf..abc53d95 100644 --- a/docs/docs/helpers/containers.html +++ b/docs/docs/helpers/containers.html @@ -7,7 +7,7 @@ Containers | FlatifyCSS - + @@ -17,7 +17,7 @@ .container-lg
.container-xl
.container-xxl

These classes are generated based on the $RESPONSIVE_BREAKPOINTS variable inside the _config.scss file:

_config.scss
$RESPONSIVE_BREAKPOINTS: (
  xs: 575.98px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/opacity-setters.html b/docs/docs/helpers/opacity-setters.html index 88b27ecf..587d2613 100644 --- a/docs/docs/helpers/opacity-setters.html +++ b/docs/docs/helpers/opacity-setters.html @@ -7,7 +7,7 @@ Opacity setters | FlatifyCSS - + @@ -16,7 +16,7 @@ you can change the impact an element can have on others by adjusting opacity.

.opacity-0
.opacity-10
.opacity-20
.opacity-30
.opacity-40
.opacity-50
.opacity-60
.opacity-70
.opacity-80
.opacity-90
.opacity-100

Custom helper classes

Note that these classes can be customized in _config.scss file, there is a variable called $OPACITY_LIST, all classes are generated from this list. So it is possible to create customized helper classes for opacity simply!

_config.scss
// This list will be converted to helper classes.
// .opacity-[]
$OPACITY_LIST: (0, 5, 8, 10, 20, 30, 40, 50, 55, 60, 70, 80, 90, 100);
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/overlay-layer.html b/docs/docs/helpers/overlay-layer.html index 79a8c1cd..4f4a3436 100644 --- a/docs/docs/helpers/overlay-layer.html +++ b/docs/docs/helpers/overlay-layer.html @@ -7,7 +7,7 @@ Overlay layer | FlatifyCSS - + @@ -20,7 +20,7 @@ --flatify__overlay-layer-backdrop-filter Default is none

In the below example, we have a box with an image inside it, basically, we need an overlay layer to change image color with mix-blend-mode CSS property and add some effect with backdrop-filter CSS property.

index.html
<div class="my-img-fx">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-1 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-2 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-3 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-4 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-5 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-6 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>

<div class="my-img-fx fx-7 overlay-layer">
  <img src="https://picsum.photos/500/300" alt="a random image" />
</div>
style.scss
.my-img-fx {
  overflow: hidden;
  width: 300px;
  height: 150px;
  margin: 0.5em;
  border-radius: 1em;
}
.my-img-fx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fx-1 {
  --flatify__overlay-layer-bg-color: linear-gradient(to right, #2c5364, #203a43, #0f2027);
  --flatify__overlay-layer-blending-mode: overlay;
}

.fx-2 {
  --flatify__overlay-layer-bg-color: linear-gradient(to right, #8e2de2, #4a00e0);
  --flatify__overlay-layer-blending-mode: hard-light;
}

.fx-3 {
  --flatify__overlay-layer-bg-color: linear-gradient(to right, #f12711, #f5af19);
  --flatify__overlay-layer-blending-mode: multiply;
  --flatify__overlay-layer-opacity: 0.75;
}

.fx-4 {
  --flatify__overlay-layer-bg-color: rgba(255, 255, 255, 0.5);
  --flatify__overlay-layer-backdrop-filter: blur(3px) contrast(120%);
}

.fx-5 {
  --flatify__overlay-layer-bg-color: trasparent;
  --flatify__overlay-layer-backdrop-filter: contrast(400%) saturate(400%) grayscale(50%) sepia(50%) hue-rotate(10deg);
}

.fx-6 {
  --flatify__overlay-layer-bg-color: trasparent;
  --flatify__overlay-layer-backdrop-filter: sepia(75%) hue-rotate(-25deg);
}

.fx-7 {
  --flatify__overlay-layer-bg-color: trasparent;
  --flatify__overlay-layer-backdrop-filter: grayscale(100%) contrast(140%) brightness(85%);
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/pulse.html b/docs/docs/helpers/pulse.html index 5a881bfe..0d336e53 100644 --- a/docs/docs/helpers/pulse.html +++ b/docs/docs/helpers/pulse.html @@ -7,7 +7,7 @@ Pulse | FlatifyCSS - + @@ -17,7 +17,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Pulse</title> <style> .my-box{ width: 150px; height: 100px; margin: 50px; } @media screen and (max-width: 650px){ .flex-center{ flex-wrap: wrap; } .my-box { width: 40% !important; } } </style> </head> <body> <div class="flex-center"> <div class="my-box style-blue pulse flex-center edge-round-md">Hello!</div> <div class="my-box style-orange pulse flex-center edge-round-md">Hola!</div> <div class="my-box style-green pulse flex-center edge-round-md">Salut!</div> </div> </body> </html> " height="250px">
index.html
<div class="pulse my-box style-blue flex-center edge-round-md">Hello!</div>
<div class="pulse my-box style-orange flex-center edge-round-md">Hola!</div>
<div class="pulse my-box style-green flex-center edge-round-md">Salut!</div>
style.css
.my-box {
  width: 150px;
  height: 100px;
  margin: 50px;
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/roundness-setters.html b/docs/docs/helpers/roundness-setters.html index 96f7b295..9b079ac3 100644 --- a/docs/docs/helpers/roundness-setters.html +++ b/docs/docs/helpers/roundness-setters.html @@ -7,7 +7,7 @@ Roundness setters | FlatifyCSS - + @@ -16,7 +16,7 @@ there is a variable called $BORDER_RADIUS_LIST, These classes are generated from this list. So it is possible to create customized helper classes for roundness simply!

_config.scss
// This list will be converted to helper classes.
// .edge-[]
$BORDER_RADIUS_LIST: (
  sharp: 0em,
  round-xs: 0.32em,
  round-sm: 0.5em,
  round-md: 0.75em,
  round-lg: 1em,
  circle: 50em,
  oval: 50%,
  triangle: 100% 50% 50% 100% / 75% 69% 69% 75%,
  round-pillow: 88% 12% 89% 11% / 12% 89% 11% 88%,
  round-rice: 100% 0% 100% 0% / 100% 0% 100% 0%,
  round-flower: 1em 0.25em 1em 0.25em,
);
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/scrollable.html b/docs/docs/helpers/scrollable.html index 8c4dfc38..982aa264 100644 --- a/docs/docs/helpers/scrollable.html +++ b/docs/docs/helpers/scrollable.html @@ -7,7 +7,7 @@ Scrollable | FlatifyCSS - + @@ -17,7 +17,7 @@ .scrollable-y

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/size-setters.html b/docs/docs/helpers/size-setters.html index 181d192a..21159677 100644 --- a/docs/docs/helpers/size-setters.html +++ b/docs/docs/helpers/size-setters.html @@ -7,7 +7,7 @@ Size setters | FlatifyCSS - + @@ -29,7 +29,7 @@ there is a variable called $FONT_SIZE_LIST, These classes are generated from this list. So it is possible to create customized helper classes for font sizes simply!

_config.scss
// This list will be converted to helper classes.
// .size-[] | .text-[]
$FONT_SIZE_LIST: (
  xs: 0.5em,
  sm: 0.75em,
  md: 1em,
  lg: 1.5em,
  2x: 2.15em,
  3x: 2.5em,
  4x: 3.14em,
  5x: 3.75em,
  custom-largest: 8em,
) !default;
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/text-truncation.html b/docs/docs/helpers/text-truncation.html index e0aef7b5..8c0b58cf 100644 --- a/docs/docs/helpers/text-truncation.html +++ b/docs/docs/helpers/text-truncation.html @@ -7,7 +7,7 @@ Text truncation | FlatifyCSS - + @@ -21,7 +21,7 @@ <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://raw.githack.com/amir2mi/FlatifyCSS/master/dist/css/flatify-min.css" /> <title>Text truncation</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"></script> </head> <body> <p class="truncate toggle-truncate show-text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. </p> <p class="truncate my-truncated-text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. </p> <button class="button toggle-truncate" data-truncation-target=".my-truncated-text">Toggle truncate</button> </body> </html> " height="340px">
index.html
<p class="truncate toggle-truncate show-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
  erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis
  facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
</p>

<p class="truncate my-truncated-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
  erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis
  facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
</p>

<button class="button toggle-truncate" data-truncation-target=".my-truncated-text">Toggle truncate</button>
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/helpers/width-and-height-setters.html b/docs/docs/helpers/width-and-height-setters.html index b8b019e1..1dc5a4ae 100644 --- a/docs/docs/helpers/width-and-height-setters.html +++ b/docs/docs/helpers/width-and-height-setters.html @@ -7,7 +7,7 @@ Width & height setters | FlatifyCSS - + @@ -44,7 +44,7 @@ height-95p
height-100p

Custom helper classes

Note that these classes can be customized in _config.scss file, there are two variable called $WIDTH_LIST and $HEIGHT_LIST, all classes are generated from this list. So it is possible to create customized helper classes for width and height simply!

_config.scss
// This list will be converted to helper classes.
// .width-[]
$WIDTH_LIST: (
  0p: 0,
  10p: 10%,
  15p: 15%,
  25p: 25%,
  30p: 30%,
  50p: 50%,
  60p: 60%,
  75p: 75%,
  90p: 90%,
  95p: 95%,
  100p: 100%,
  50-pixels: 50px,
  5-em: 5em,
);

// This list will be converted to helper classes.
// .height-[]
$HEIGHT_LIST: (
  0p: 0,
  10p: 10%,
  15p: 15%,
  25p: 25%,
  30p: 30%,
  50p: 50%,
  60p: 60%,
  75p: 75%,
  90p: 90%,
  95p: 95%,
  100p: 100%,
  50-pixels: 50px,
  5-em: 5em,
);
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/intro.html b/docs/docs/intro.html index 02285c7e..53139e3f 100644 --- a/docs/docs/intro.html +++ b/docs/docs/intro.html @@ -7,7 +7,7 @@ Introduction | FlatifyCSS - + @@ -21,7 +21,7 @@ flatify-rtl-noprefix.css
flatify-rtl-noprefix-min.css

JS

Note that FlatifyCSS needs Popperjs for dropdowns and popovers, but this library is not included inside the JavaScript file of FlatifyCSS, so it is up to you to include it inside your webpage.

flatify.js
flatify-min.js

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/a11y.html b/docs/docs/overview/a11y.html index bbfe13bb..ac282a26 100644 --- a/docs/docs/overview/a11y.html +++ b/docs/docs/overview/a11y.html @@ -7,7 +7,7 @@ Accessibility | FlatifyCSS - + @@ -21,7 +21,7 @@ -flatify__long-transition
-flatify__bouncing-transition

Animations

Optimized reduced motion for loading component

We use flatify-fade-in, flatify-fade-in-out and flatify-fade-out animations instead of primary, also it is a good practice to limit animation steps for complex animations like what we do for spinner loadings:

Visual disabilities

The palette is wide enough to handle basic functionalities, it is up to you to consider using the best practices for color-blind users while designing.

Color blindness simulation

The Mozilla Firefox browser has a great accessibility panel that simulates diffrent types of color blindness, you can easily check contrast issues and fix them besides other helpful tools like keyboard and text labels checker.

Visual disabilities - Normal
Normal
Visual disabilities - No red color
No red color (Protanopia)
Visual disabilities - No green color
No green color (Deuteranopia)
Visual disabilities - No blue color
No blue color (Tritanopia)
Visual disabilities - No color
No color
Visual disabilities - Constrast loss
Constrast loss

High contrast

FlatifyCSS colors contrast is not scored 100% you can create a special version for people with contrast loss issues (high contrast) by tweaking some percents. For example, here is the blue color variables inside _config.scss file:

_config.scss
$BLUE: #1cb0f6;
$BLUE_LIGHT: tint($BLUE, 40%);
$BLUE_DARK: shade($BLUE, 15%);
$BLUE_DARKER: shade($BLUE, 50%);

And what is looks like:

Default contrast button

First with Coolors, find the base color shades then choose the darker shade of it and increase the shade() and tint() value as percent.

_config.scss
$BLUE: #0884bd;
$BLUE_LIGHT: tint($BLUE, 60%);
$BLUE_DARK: shade($BLUE, 50%);
$BLUE_DARKER: shade($BLUE, 70%);

The result will be:

High contrast button

Anchors

By default FlatifyCSS anchors and link buttons do not have borders because of designerish reasons, but if your audience is specific or you want to have a more accessible website you can change anchors basic styles with the _config.scss file.
Default styles for anchors are these:

_config.scss
// color
$LINK_COLOR: $ACCENT_COLOR;
$LINK_COLOR_HOVER: $ACCENT_COLOR_LIGHT;
$LINK_COLOR_FOCUS: $ACCENT_COLOR_DARK;
// text-decoration
$LINK_DECORATION: none;
$LINK_DECORATION_HOVER: underline 0.125em currentColor;
$LINK_DECORATION_FOCUS: none;

A typical link for a user with the contrast loss issue will be hard to find:

Default link

Nonetheless, we can customize links color and text-decoration to be more accessible:

_config.scss
// color
$LINK_COLOR: $ACCENT_COLOR_DARK;
$LINK_COLOR_HOVER: $ACCENT_COLOR;
$LINK_COLOR_FOCUS: $ACCENT_COLOR_LIGHT;
// text-decoration
$LINK_DECORATION: underline 0.125em currentColor;
$LINK_DECORATION_HOVER: underline 0.125em currentColor;
$LINK_DECORATION_FOCUS: underline 0.125em currentColor;

The result is:

Custom link
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/colors.html b/docs/docs/overview/colors.html index 3e19ec96..9def2830 100644 --- a/docs/docs/overview/colors.html +++ b/docs/docs/overview/colors.html @@ -7,13 +7,13 @@ Colors | FlatifyCSS - +
Skip to main content

Colors

FlatifyCSS comes with a set of predefined colors and color setter helper classes. On this page, we listed all the colors that are related to FlatifyCSS.

#ffffff
#eff2f6
#ced9e3
#aec0d0
#809cb6
#6d8dab
#547492
#415a71
#2f4051
#1e2a35
#090d10
#BFE9FC
#9EDEFB
#77d0fa
#5EC7F8
#3EBCF7
#1cb0f6
#099EE3
#1896d1
#0884BD
#0e587b
#04425E
#F2DEFF
#E5BDFF
#daa2ff
#D392FF
#CB7CFF
#c164ff
#B84DFF
#a455d9
#8846B4
#613280
#4C2765
#FFDCF2
#FFCBEB
#ffb6e3
#FFA8DD
#FF96D7
#ff86d0
#FF69C5
#d972b1
#D04D9D
#96286C
#804368
#FFCCCC
#FFB3B3
#ff9393
#FF8080
#FF6666
#ff4b4b
#FF3333
#d94040
#D62F2F
#B82424
#802626
#FFD9A4
#FFCA80
#ffc066
#FFB349
#FFA424
#ff9600
#F08C00
#d98000
#BC6E00
#9D5B00
#804b00
#FFF5B6
#FFF092
#ffeb66
#FFE749
#FFE224
#ffde00
#EDCD00
#d9bd00
#B69E00
#a69000
#806E00
#C1FE93
#A9FD68
#90FD3C
#77FD11
#62E002
#58cc02
#4bad02
#3b8901
#327401
#2c6601
#295f01
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/customization.html b/docs/docs/overview/customization.html index 3ec9d283..3952a6fd 100644 --- a/docs/docs/overview/customization.html +++ b/docs/docs/overview/customization.html @@ -7,7 +7,7 @@ Customization | FlatifyCSS - + @@ -15,7 +15,7 @@
Skip to main content

Customization

If you read about development tools you will find out that you can use Sass, so it is possible to customize the basic styles of FlatifyCSS.

Sass

The first level of customization happens in the _config.scss file, in this file variables for colors, fonts, and other basic configs are defined, for example, by changing the $CSS_VAR_PFX variable all generated CSS variables will be prefixed with this value.

Take a look at the config file to see how it works. Variables in this file are categorized by their type, general, design, colors, motion, typography, and icons. So you can change their value and see how the changes affect the generated CSS and frontend.

For example here is the list of variables that are defined for z-index:

_config.scss
$ZINDEX_DROPDOWN: 1000;
$ZINDEX_STICKY: 1010;
$ZINDEX_FIXED: 1020;
$ZINDEX_FIREWORKS: 1025;
$ZINDEX_BACKDROP: 1030;
$ZINDEX_MODAL_BACKDROP: 1030;
$ZINDEX_MODAL: 1040;
$ZINDEX_POPOVER: 1060;

You can change their value based on the number of the z-index you use in your project.

CSS

The next level after customization with Sass is CSS variables. These variables get their values from Sass variables, so if you just want to work with compiled CSS, it is the best choice to change them. The benefits of CSS variables are they can be customized modularly, which means you can have different components with different colors, fonts, etc, just by changing the value of the variables.

Default CSS variables are defined as :root, most of them are defined in the _root.scss file, the rest are defined inside each file which is a separate component, for example, table CSS variables are inside the _table.scss file.

The example of customization each component is provided in the component's documentation page. For example check the table component customization guide.

JavaScript

There is a JSON file inside the /js folder called config.json, which provides you the most important configuration options for the JavaScript code, for example, you can disable logging errors in the console when something goes wrong.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/darkmode.html b/docs/docs/overview/darkmode.html index 6bfeabc1..d7a4b8ab 100644 --- a/docs/docs/overview/darkmode.html +++ b/docs/docs/overview/darkmode.html @@ -7,7 +7,7 @@ Dark mode | FlatifyCSS - + @@ -15,7 +15,7 @@
Skip to main content

Dark mode

If you use Sass to develop, there is a predefined placeholder selector for dark mode, this file is in /scss/helpers/_dark-mode.scss, in this file the %dark-mode selector is defined you can create your selectors by extending it.
Here is an example of a dark mode selector:

style.scss
html.dark {
  @extend %dark-mode;
}

or you can detect automatically if users prefer dark theme with CSS @media feature:

style.scss
@media (prefers-color-scheme: dark) {
  :root {
    @extend %dark-mode;
  }
}

Now if the <html> tag has the .dark class or the user prefers to have a dark theme, the dark mode will be applied.
Note that you should extend this selector as <html> tag because it changes CSS variables that are defined as the :root.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/design-system.html b/docs/docs/overview/design-system.html index 6848b963..60eb24e8 100644 --- a/docs/docs/overview/design-system.html +++ b/docs/docs/overview/design-system.html @@ -7,14 +7,14 @@ Design system | FlatifyCSS - +
Skip to main content

Design system

FlatifyCSS is not a design system itself and it follows the Duolingo design system principles. It is a collection of design system components that can be used to build a web page.

No blurred shadows1- No blurred shadows
Borders are cool2- Borders are cool
Round but not much3- Round but not much

Shadows

There are no blurred shadows in FlatifyCSS. Instead, we have sharp and subtle shadows, it helps to have a clean and user-friendly interface.

Roundness

Elements are round — but not too much. It does not mean there is no element with circle corners at all, but elements tend to be round enough to be usable. We have rounded elements for buttons, cards, and other elements.

For example, an ordinary element like a button would have 1em for border-radius, and based on its portion roundness value can be less or more.

Color

"The world is a diverse and wonderful place. We want to reflect that in the people we see, and the colors we use — that's why we've developed a bright and beautiful palette."
You use defined palette of FlatifyCSS here.

Typography

As we prefer roundness for elements, the main typeface should be round as well to keep the rhyme. Read more about Typography here.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/development.html b/docs/docs/overview/development.html index 62d619dd..955e0dd4 100644 --- a/docs/docs/overview/development.html +++ b/docs/docs/overview/development.html @@ -7,7 +7,7 @@ Development | FlatifyCSS - + @@ -16,7 +16,7 @@ There are two files in this directory: flatify.scss and flatify-rtl.scss. The flatify.scss file is the main file we use to extend the base stylesheet, and the flatify-rtl.scss file is used to compile stylesheets for RTL. Afterward to write your code to extend the current features create a file e.g. _my-file.scss and import it into the flatify.scss file.

JavaScript

JavaScript is the same as Sass, in the /js directory use the flatify.js file to extend features, we use Webpack so it is possible to use the import and export feature of ES6.

Gulp tasks

Inside the gulpfile.js all tasks are defined, you can use these tasks to compile files or watch for changes automatically.

gulp

Run a single task to compile scss and js files, this is the default task and consider changes as prerelease.

Parameters

You can use the --ver parameter to set the desired version or use --type to change the bump version type. For example: --ver "1.0.0" or --type "minor". The default bump version type is prerelease.

gulp watch

Use this task to watch for changes in the scss and js directories to compile them, note that this task use development settings to speed up the compile process, so generated files are not safe for product usage.

gulp release

This task will create a release candidate, it will compile the scss and js files, bump version with patch type, commit all changes and create a tag.

Parameters

You can use the --ver parameter to set the desired version or use --type to change the bump version type. For example: --ver "1.0.0" or --type "minor". The default bump version type is patch.
To change the commit and tag label you can set either --m or --desc parameters. For example: --m "Release 1.0.0" or --desc "Release 1.0.0".

Prevent auto commit and tag

To prevent auto commit and tag you can set --desc or --m parameters to empty string, for example: gulp release --m "".

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/grid-system.html b/docs/docs/overview/grid-system.html index 77785021..fe258a29 100644 --- a/docs/docs/overview/grid-system.html +++ b/docs/docs/overview/grid-system.html @@ -7,14 +7,14 @@ Grid system | FlatifyCSS - +
Skip to main content

Grid system

FlatifyCSS does not provide a grid system, in the humble opinion of the FlatifyCSS team, it is not necessary. At this point in time you can create impressive layouts with the mixture of CSS flexbox and grid. Therefore there is no need to add a bunch of code that is not even flexible enough for any layout, you can make something better with the technologies mentioned above.

If you still want to use a grid system, you can add the Bootstrap grid file to your project.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/responsive.html b/docs/docs/overview/responsive.html index bd1e0aed..69feeb13 100644 --- a/docs/docs/overview/responsive.html +++ b/docs/docs/overview/responsive.html @@ -7,7 +7,7 @@ Responsive | FlatifyCSS - + @@ -22,7 +22,7 @@ break-xl-min()
break-xl-max()

Extra extra large

break-xxl()
break-xxl-max()

Use responsive mixins

The example below indicates how to use the mixins to make conditions for responsive design.

custom-style.scss
body {
  padding: 50px;

  @include break-sm {
    padding: 10px;
  }
}

What will be compiled is:

custom-style.css
body {
  padding: 50px;
}

/* Small breakpoint */
@media screen and (min-width: 576px) and (max-width: 767px) {
  body {
    padding: 10px;
  }
}
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/rtl.html b/docs/docs/overview/rtl.html index ba0f6392..ce7430c6 100644 --- a/docs/docs/overview/rtl.html +++ b/docs/docs/overview/rtl.html @@ -7,13 +7,13 @@ Right to left | FlatifyCSS - +
Skip to main content

Right to left

FlatifyCSS supports the right to left languages, we provide files with the -rtl suffix. on development page we have disgusted how files are compiled. if you run gulp or gulp release you will get the RTL files, however gulp watch does not compile files to RTL.

There is a file called flatify-rtl.scss it is just the main file but $IS_LTR is set to FALSE so we will get the RTL version of the files.

With Sass we decide values based on the $IS_LTR variable, for example:

body {
  @if $IS_LTR {
    direction: ltr;
  } @else {
    direction: rtl;
  }
}

The snippet above will be compiled to (Left to right):

body {
  direction: ltr;
}

and for (Right to left):

body {
  direction: rtl;
}

So you can extend features for both LTR and RTL with this condition easily.

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/docs/overview/typography.html b/docs/docs/overview/typography.html index f765b02b..535c9ece 100644 --- a/docs/docs/overview/typography.html +++ b/docs/docs/overview/typography.html @@ -7,7 +7,7 @@ Typography | FlatifyCSS - + @@ -15,7 +15,7 @@
Skip to main content

Typography

Typefaces

FlatifyCSS uses Nunito typeface by Vernon Adams for its default typography. For code the default is Fira Code.
However these typefaces are not included in the FlatifyCSS package. You can add them in your web page using the following code:

index.html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Nunito:wght@400;600;700&display=swap"
  rel="stylesheet"
/>

or import it in your CSS file:

style.css
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Nunito:wght@400;600;700&display=swap");

Configuring typography

Inside the _config.scss there is a section for typography configuration.

Font size

FlatifyCSS set the main font size as the :root property, but it depends on the screen size. So there are two variables to set minimum and maximum font sizes inside _config.scss:

_config.scss
$MIN_FONT_SIZE: 14; // must be without unit
$MAX_FONT_SIZE: 16; // must be without unit

Based on this fluid font size you can use the em unit to have the responsive font size and elements, also using em as a unit for elements property gives you better control of the element size, you do not have to change every property to change the element size, just change the font-size property for the element wrapper, this is how size setter helper classes work.

Font family

There are Sass variables to change the font family for different elements:

_config.scss
$PRIMARY_FONT_FAMILY: "Nunito", sans-serif;
$HEADING_FONT_FAMILY: $PRIMARY_FONT_FAMILY;
$CODE_FONT_FAMILY: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

you can also change them as CSS variables:

style.css
--flatify__primary-font-family: "Nunito", sans-serif;
--flatify__heading-font-family: var(--flatify__primary-font-family);
--flatify__code-font-family: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Font size

There are helper classes to change the size of elements, they change the font size based on their size, you can change them to your own sizes:

_config.scss
$FONT_SIZE_LIST: (
  xs: 0.75em,
  sm: 0.9em,
  md: 1em,
  lg: 1.25em,
  2x: 1.5em,
  3x: 2.2em,
  4x: 2.5em,
  5x: 3.14em,
);

Font weight

You can change default font weights based on the typeface your are using:

_config.scss
$MEDIUM_FONT_WEIGHT: 600;
$BOLD_FONT_WEIGHT: 700;
$EXTRA_BOLD_FONT_WEIGHT: 900;
$HEADING_FONT_WEIGHT: bold;

or change their CSS variables:

style.css
--flatify__medium-font-weight: 600;
--flatify__bold-font-weight: 700;
--flatify__extra-bold-font-weight: 900;
--flatify__heading-font-weight: bold;

Line height

Based on the element line height will be different, you can default line heights with these variables:

_config.scss
$BASE_LINE_HEIGHT: 1.5;
$SMALL_LINE_HEIGHT: 1.2;
$LARGE_LINE_HEIGHT: 1.8;

or change their CSS variables:

style.css
--flatify__base-line-height: 1.5;
--flatify__small-line-height: 1.2;
--flatify__large-line-height: 1.8;
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 89015b38..85b740cc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,14 +7,14 @@ FlatifyCSS - The web flat design framework | FlatifyCSS - +
Skip to main content

FlatifyCSS

Modern flat design framework for the web — inspired by Duolingo design system.

Get Started

Clean & cool

Whitespace plays a big role and borders result in the layout that is clean at the users' first sight.

Concise but powerful

With only ~15 kb size, you can start a new project having just must-haves like components, helper classes, and so on.

Components

The most used patterns, highly composable and customizable.

Helpers

Immutable and reusable classes to speed the development process up.

Forms

Custom and native elements to create modern forms.

Quick start

Start a new project or add FlatifyCSS in less than a minute.

npm

Install the package with one command.

npm install flatifycss

CDN

No worry about files, jsDelivr takes it over.

<link href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" rel="stylesheet" crossorigin="anonymous"/>
<script src="https://unpkg.com/@popperjs/core@2" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/flatifycss/dist/js/flatify.min.js" crossorigin="anonymous"></script>

Keep it breathing

We need your help to make it better than what it is!

ContributeGithub
Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/docs/search.html b/docs/search.html index 4f352b6d..af8131b6 100644 --- a/docs/search.html +++ b/docs/search.html @@ -7,13 +7,13 @@ Search the documentation | FlatifyCSS - +
Skip to main content

Search the documentation

Created with ❤️ by FlatifyCSS's team and its contributors.
- + \ No newline at end of file diff --git a/website/docs/components/tabs.mdx b/website/docs/components/tabs.mdx index e195632e..e696acfc 100644 --- a/website/docs/components/tabs.mdx +++ b/website/docs/components/tabs.mdx @@ -181,6 +181,54 @@ By adding `.flex-center` class to the `.tabs-header` element, tabs will be cente ' /> + +### Bordered tabs + +It is also possible to have a bordered tabs component, add `.bordered` class to the `.tabs-wrapper`. + + + ## Animations Tabs by default has blow in/out animation, however you can add `.slide-animation`, `.fade-animation`, `.no-animation` to `.tabs-content`. @@ -274,7 +322,7 @@ Check out the examples below to understand use cases:

Slide animation

-
+

Fade animation

-
+

No animation

-
+

Custom: Asteroid animation

-
+

Custom: Y axis slide animation

-
+
-
+
-
+
-
+
-
+