"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1778],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return d}});var o=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,o,i=function(e,t){if(null==e)return{};var n,o,i={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=o.createContext({}),c=function(e){var t=o.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},u=function(e){var t=c(e.components);return o.createElement(l.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},f=o.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,l=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),f=c(n),d=i,m=f["".concat(l,".").concat(d)]||f[d]||p[d]||r;return n?o.createElement(m,a(a({ref:t},u),{},{components:n})):o.createElement(m,a({ref:t},u))}));function d(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,a=new Array(r);a[0]=f;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:i,a[1]=s;for(var c=2;c<r;c++)a[c]=n[c];return o.createElement.apply(null,a)}return o.createElement.apply(null,n)}f.displayName="MDXCreateElement"},7380:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return s},contentTitle:function(){return l},metadata:function(){return c},toc:function(){return u},default:function(){return f}});var o=n(7462),i=n(3366),r=(n(7294),n(3905)),a=["components"],s={title:"Customization",sidebar_position:9},l=void 0,c={unversionedId:"overview/customization",id:"overview/customization",isDocsHomePage:!1,title:"Customization",description:"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.",source:"@site/docs/overview/customization.mdx",sourceDirName:"overview",slug:"/overview/customization",permalink:"/docs/overview/customization",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/customization.mdx",tags:[],version:"current",sidebarPosition:9,frontMatter:{title:"Customization",sidebar_position:9},sidebar:"tutorialSidebar",previous:{title:"Dark mode",permalink:"/docs/overview/darkmode"},next:{title:"Development",permalink:"/docs/overview/development"}},u=[{value:"Sass",id:"sass",children:[],level:2},{value:"CSS",id:"css",children:[],level:2},{value:"JavaScript",id:"javascript",children:[],level:2}],p={toc:u};function f(e){var t=e.components,n=(0,i.Z)(e,a);return(0,r.kt)("wrapper",(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"If you read about ",(0,r.kt)("a",{parentName:"p",href:"/docs/overview/development"},"development tools")," you will find out that you can use Sass, so it is possible to customize the basic styles of FlatifyCSS."),(0,r.kt)("h2",{id:"sass"},"Sass"),(0,r.kt)("p",null,"The first level of customization happens in the ",(0,r.kt)("inlineCode",{parentName:"p"},"_config.scss")," file, in this file variables for colors, fonts, and other basic configs are defined, for example, by changing the ",(0,r.kt)("inlineCode",{parentName:"p"},"$CSS_VAR_PFX")," variable all generated CSS variables will be prefixed with this value."),(0,r.kt)("p",null,"Take a look at ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/amir2mi/flatifycss/blob/master/scss/_config.scss"},"the config file")," to see how it works.\nVariables in this file are categorized by their type, general, design, colors, motion, typography, and icons.\nSo you can change their value and see how the changes affect the generated CSS and frontend.  "),(0,r.kt)("p",null,"For example here is the list of variables that are defined for ",(0,r.kt)("inlineCode",{parentName:"p"},"z-index"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$ZINDEX_DROPDOWN: 1000;\n$ZINDEX_STICKY: 1010;\n$ZINDEX_FIXED: 1020;\n$ZINDEX_FIREWORKS: 1025;\n$ZINDEX_BACKDROP: 1030;\n$ZINDEX_MODAL_BACKDROP: 1030;\n$ZINDEX_MODAL: 1040;\n$ZINDEX_POPOVER: 1060;\n$ZINDEX_TOAST: 1100;\n")),(0,r.kt)("p",null,"You can change their value based on the number of the ",(0,r.kt)("inlineCode",{parentName:"p"},"z-index")," you use in your project."),(0,r.kt)("h2",{id:"css"},"CSS"),(0,r.kt)("p",null,"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."),(0,r.kt)("p",null,"Default CSS variables are defined as ",(0,r.kt)("inlineCode",{parentName:"p"},":root"),", most of them are defined in the ",(0,r.kt)("inlineCode",{parentName:"p"},"_root.scss")," file, the rest are defined inside each file which is a separate component, for example, table CSS variables are inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"_table.scss")," file."),(0,r.kt)("p",null,"The example of customization each component is provided in the component's documentation page. For example check the ",(0,r.kt)("a",{parentName:"p",href:"/docs/content/table#customization"},"table component customization guide"),"."),(0,r.kt)("h2",{id:"javascript"},"JavaScript"),(0,r.kt)("p",null,"There is a JSON file inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"/js")," folder called ",(0,r.kt)("inlineCode",{parentName:"p"},"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."))}f.isMDXComponent=!0}}]);