[{"data":1,"prerenderedAt":746},["Reactive",2],{"content-query-1DxZ1vYQk5":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":8,"image":9,"head":10,"body":24,"_type":741,"_id":742,"_source":743,"_file":744,"_extension":745},"/","",false,"Zharikov UI","Фрейморк ZUI","/public/favicon.icn",{"meta":11},[12,15,18,21],{"name":13,"content":14},"keywords","css, framework, scss, sass",{"name":16,"content":17},"robots","index, follow",{"name":19,"content":20},"author","Alexander Zharikov",{"name":22,"content":23},"copyright","© 2023 Zharikov.design",{"type":25,"children":26,"toc":734},"root",[27,36,51,57,80,86,95,150,156,169,694,700,728],{"type":28,"tag":29,"props":30,"children":32},"element","h2",{"id":31},"установка-пакета",[33],{"type":34,"value":35},"text","Установка пакета",{"type":28,"tag":37,"props":38,"children":39},"p",{},[40,42,49],{"type":34,"value":41},"Начните работу с ZUI, создав новый проект или добавив его в существующее приложение ",{"type":28,"tag":43,"props":44,"children":46},"code",{"className":45},[],[47],{"type":34,"value":48},"npm install zharikov-ui",{"type":34,"value":50},".",{"type":28,"tag":29,"props":52,"children":54},{"id":53},"обновление-пакета",[55],{"type":34,"value":56},"Обновление пакета",{"type":28,"tag":37,"props":58,"children":59},{},[60,66,68,72,78],{"type":28,"tag":43,"props":61,"children":63},{"className":62},[],[64],{"type":34,"value":65},"npm outdated",{"type":34,"value":67}," - проверяем если ли обновления для пакетов;",{"type":28,"tag":69,"props":70,"children":71},"br",{},[],{"type":28,"tag":43,"props":73,"children":75},{"className":74},[],[76],{"type":34,"value":77},"npm install zharikov-ui@latest",{"type":34,"value":79}," - забираем крайнию верисю.",{"type":28,"tag":29,"props":81,"children":83},{"id":82},"структура",[84],{"type":34,"value":85},"Структура",{"type":28,"tag":87,"props":88,"children":90},"pre",{"code":89},"zharikov-ui/\n  scss/\n    _animation\n    _elements\n    _global\n    _mixin\n    _variables\n    styles.scss\n",[91],{"type":28,"tag":43,"props":92,"children":93},{"__ignoreMap":5},[94],{"type":34,"value":89},{"type":28,"tag":37,"props":96,"children":97},{},[98,104,106,109,115,117,120,126,128,131,137,139,142,148],{"type":28,"tag":43,"props":99,"children":101},{"className":100},[],[102],{"type":34,"value":103},"_animation",{"type":34,"value":105}," - css анимация;",{"type":28,"tag":69,"props":107,"children":108},{},[],{"type":28,"tag":43,"props":110,"children":112},{"className":111},[],[113],{"type":34,"value":114},"_elements",{"type":34,"value":116}," - кнопки, формы, чипсы, типографика и т.д;",{"type":28,"tag":69,"props":118,"children":119},{},[],{"type":28,"tag":43,"props":121,"children":123},{"className":122},[],[124],{"type":34,"value":125},"_global",{"type":34,"value":127}," - глобальные стили проекта (body, container);",{"type":28,"tag":69,"props":129,"children":130},{},[],{"type":28,"tag":43,"props":132,"children":134},{"className":133},[],[135],{"type":34,"value":136},"_mixin",{"type":34,"value":138}," - набор scss миксинов;",{"type":28,"tag":69,"props":140,"children":141},{},[],{"type":28,"tag":43,"props":143,"children":145},{"className":144},[],[146],{"type":34,"value":147},"_variables",{"type":34,"value":149}," - scss переменные.",{"type":28,"tag":29,"props":151,"children":153},{"id":152},"импорты",[154],{"type":34,"value":155},"Импорты",{"type":28,"tag":37,"props":157,"children":158},{},[159,161,167],{"type":34,"value":160},"Содержит ",{"type":28,"tag":43,"props":162,"children":164},{"className":163},[],[165],{"type":34,"value":166},"@import",{"type":34,"value":168}," всех файлов для сборки.",{"type":28,"tag":87,"props":170,"children":174},{"code":171,"language":172,"meta":5,"className":173,"style":5},"@import '_variables/color';\n@import '_variables/size';\n@import '_variables/fonts';\n@import '_variables/typography';\n\n@import '_mixins/align';\n@import '_mixins/breakpoint';\n@import '_mixins/decoration';\n@import '_mixins/flex';\n@import '_mixins/form';\n@import '_mixins/grid';\n@import '_mixins/tt';\n@import '_mixins/typography';\n@import '_mixins/scrollbar';\n@import '_mixins/icons';\n\n@import '_animations/rotation';\n\n@import '_global/reset';\n@import '_global/base';\n\n@import '_elements/typography.scss';\n@import '_elements/input';\n@import '_elements/textarea';\n@import '_elements/checkbox';\n@import '_elements/radio';\n@import '_elements/toggle';\n@import '_elements/chips';\n@import '_elements/snackbar';\n@import '_elements/label';\n@import '_elements/button';\n@import '_elements/form';\n","scss","language-scss shiki shiki-themes github-light github-dark",[175],{"type":28,"tag":43,"props":176,"children":177},{"__ignoreMap":5},[178,201,218,235,252,262,279,296,313,330,347,364,381,398,415,432,440,457,465,482,499,507,524,541,558,575,592,609,626,643,660,677],{"type":28,"tag":179,"props":180,"children":183},"span",{"class":181,"line":182},"line",1,[184,189,195],{"type":28,"tag":179,"props":185,"children":187},{"style":186},"--shiki-default:#D73A49;--shiki-dark:#F97583",[188],{"type":34,"value":166},{"type":28,"tag":179,"props":190,"children":192},{"style":191},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[193],{"type":34,"value":194}," '_variables/color'",{"type":28,"tag":179,"props":196,"children":198},{"style":197},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[199],{"type":34,"value":200},";\n",{"type":28,"tag":179,"props":202,"children":204},{"class":181,"line":203},2,[205,209,214],{"type":28,"tag":179,"props":206,"children":207},{"style":186},[208],{"type":34,"value":166},{"type":28,"tag":179,"props":210,"children":211},{"style":191},[212],{"type":34,"value":213}," '_variables/size'",{"type":28,"tag":179,"props":215,"children":216},{"style":197},[217],{"type":34,"value":200},{"type":28,"tag":179,"props":219,"children":221},{"class":181,"line":220},3,[222,226,231],{"type":28,"tag":179,"props":223,"children":224},{"style":186},[225],{"type":34,"value":166},{"type":28,"tag":179,"props":227,"children":228},{"style":191},[229],{"type":34,"value":230}," '_variables/fonts'",{"type":28,"tag":179,"props":232,"children":233},{"style":197},[234],{"type":34,"value":200},{"type":28,"tag":179,"props":236,"children":238},{"class":181,"line":237},4,[239,243,248],{"type":28,"tag":179,"props":240,"children":241},{"style":186},[242],{"type":34,"value":166},{"type":28,"tag":179,"props":244,"children":245},{"style":191},[246],{"type":34,"value":247}," '_variables/typography'",{"type":28,"tag":179,"props":249,"children":250},{"style":197},[251],{"type":34,"value":200},{"type":28,"tag":179,"props":253,"children":255},{"class":181,"line":254},5,[256],{"type":28,"tag":179,"props":257,"children":259},{"emptyLinePlaceholder":258},true,[260],{"type":34,"value":261},"\n",{"type":28,"tag":179,"props":263,"children":265},{"class":181,"line":264},6,[266,270,275],{"type":28,"tag":179,"props":267,"children":268},{"style":186},[269],{"type":34,"value":166},{"type":28,"tag":179,"props":271,"children":272},{"style":191},[273],{"type":34,"value":274}," '_mixins/align'",{"type":28,"tag":179,"props":276,"children":277},{"style":197},[278],{"type":34,"value":200},{"type":28,"tag":179,"props":280,"children":282},{"class":181,"line":281},7,[283,287,292],{"type":28,"tag":179,"props":284,"children":285},{"style":186},[286],{"type":34,"value":166},{"type":28,"tag":179,"props":288,"children":289},{"style":191},[290],{"type":34,"value":291}," '_mixins/breakpoint'",{"type":28,"tag":179,"props":293,"children":294},{"style":197},[295],{"type":34,"value":200},{"type":28,"tag":179,"props":297,"children":299},{"class":181,"line":298},8,[300,304,309],{"type":28,"tag":179,"props":301,"children":302},{"style":186},[303],{"type":34,"value":166},{"type":28,"tag":179,"props":305,"children":306},{"style":191},[307],{"type":34,"value":308}," '_mixins/decoration'",{"type":28,"tag":179,"props":310,"children":311},{"style":197},[312],{"type":34,"value":200},{"type":28,"tag":179,"props":314,"children":316},{"class":181,"line":315},9,[317,321,326],{"type":28,"tag":179,"props":318,"children":319},{"style":186},[320],{"type":34,"value":166},{"type":28,"tag":179,"props":322,"children":323},{"style":191},[324],{"type":34,"value":325}," '_mixins/flex'",{"type":28,"tag":179,"props":327,"children":328},{"style":197},[329],{"type":34,"value":200},{"type":28,"tag":179,"props":331,"children":333},{"class":181,"line":332},10,[334,338,343],{"type":28,"tag":179,"props":335,"children":336},{"style":186},[337],{"type":34,"value":166},{"type":28,"tag":179,"props":339,"children":340},{"style":191},[341],{"type":34,"value":342}," '_mixins/form'",{"type":28,"tag":179,"props":344,"children":345},{"style":197},[346],{"type":34,"value":200},{"type":28,"tag":179,"props":348,"children":350},{"class":181,"line":349},11,[351,355,360],{"type":28,"tag":179,"props":352,"children":353},{"style":186},[354],{"type":34,"value":166},{"type":28,"tag":179,"props":356,"children":357},{"style":191},[358],{"type":34,"value":359}," '_mixins/grid'",{"type":28,"tag":179,"props":361,"children":362},{"style":197},[363],{"type":34,"value":200},{"type":28,"tag":179,"props":365,"children":367},{"class":181,"line":366},12,[368,372,377],{"type":28,"tag":179,"props":369,"children":370},{"style":186},[371],{"type":34,"value":166},{"type":28,"tag":179,"props":373,"children":374},{"style":191},[375],{"type":34,"value":376}," '_mixins/tt'",{"type":28,"tag":179,"props":378,"children":379},{"style":197},[380],{"type":34,"value":200},{"type":28,"tag":179,"props":382,"children":384},{"class":181,"line":383},13,[385,389,394],{"type":28,"tag":179,"props":386,"children":387},{"style":186},[388],{"type":34,"value":166},{"type":28,"tag":179,"props":390,"children":391},{"style":191},[392],{"type":34,"value":393}," '_mixins/typography'",{"type":28,"tag":179,"props":395,"children":396},{"style":197},[397],{"type":34,"value":200},{"type":28,"tag":179,"props":399,"children":401},{"class":181,"line":400},14,[402,406,411],{"type":28,"tag":179,"props":403,"children":404},{"style":186},[405],{"type":34,"value":166},{"type":28,"tag":179,"props":407,"children":408},{"style":191},[409],{"type":34,"value":410}," '_mixins/scrollbar'",{"type":28,"tag":179,"props":412,"children":413},{"style":197},[414],{"type":34,"value":200},{"type":28,"tag":179,"props":416,"children":418},{"class":181,"line":417},15,[419,423,428],{"type":28,"tag":179,"props":420,"children":421},{"style":186},[422],{"type":34,"value":166},{"type":28,"tag":179,"props":424,"children":425},{"style":191},[426],{"type":34,"value":427}," '_mixins/icons'",{"type":28,"tag":179,"props":429,"children":430},{"style":197},[431],{"type":34,"value":200},{"type":28,"tag":179,"props":433,"children":435},{"class":181,"line":434},16,[436],{"type":28,"tag":179,"props":437,"children":438},{"emptyLinePlaceholder":258},[439],{"type":34,"value":261},{"type":28,"tag":179,"props":441,"children":443},{"class":181,"line":442},17,[444,448,453],{"type":28,"tag":179,"props":445,"children":446},{"style":186},[447],{"type":34,"value":166},{"type":28,"tag":179,"props":449,"children":450},{"style":191},[451],{"type":34,"value":452}," '_animations/rotation'",{"type":28,"tag":179,"props":454,"children":455},{"style":197},[456],{"type":34,"value":200},{"type":28,"tag":179,"props":458,"children":460},{"class":181,"line":459},18,[461],{"type":28,"tag":179,"props":462,"children":463},{"emptyLinePlaceholder":258},[464],{"type":34,"value":261},{"type":28,"tag":179,"props":466,"children":468},{"class":181,"line":467},19,[469,473,478],{"type":28,"tag":179,"props":470,"children":471},{"style":186},[472],{"type":34,"value":166},{"type":28,"tag":179,"props":474,"children":475},{"style":191},[476],{"type":34,"value":477}," '_global/reset'",{"type":28,"tag":179,"props":479,"children":480},{"style":197},[481],{"type":34,"value":200},{"type":28,"tag":179,"props":483,"children":485},{"class":181,"line":484},20,[486,490,495],{"type":28,"tag":179,"props":487,"children":488},{"style":186},[489],{"type":34,"value":166},{"type":28,"tag":179,"props":491,"children":492},{"style":191},[493],{"type":34,"value":494}," '_global/base'",{"type":28,"tag":179,"props":496,"children":497},{"style":197},[498],{"type":34,"value":200},{"type":28,"tag":179,"props":500,"children":502},{"class":181,"line":501},21,[503],{"type":28,"tag":179,"props":504,"children":505},{"emptyLinePlaceholder":258},[506],{"type":34,"value":261},{"type":28,"tag":179,"props":508,"children":510},{"class":181,"line":509},22,[511,515,520],{"type":28,"tag":179,"props":512,"children":513},{"style":186},[514],{"type":34,"value":166},{"type":28,"tag":179,"props":516,"children":517},{"style":191},[518],{"type":34,"value":519}," '_elements/typography.scss'",{"type":28,"tag":179,"props":521,"children":522},{"style":197},[523],{"type":34,"value":200},{"type":28,"tag":179,"props":525,"children":527},{"class":181,"line":526},23,[528,532,537],{"type":28,"tag":179,"props":529,"children":530},{"style":186},[531],{"type":34,"value":166},{"type":28,"tag":179,"props":533,"children":534},{"style":191},[535],{"type":34,"value":536}," '_elements/input'",{"type":28,"tag":179,"props":538,"children":539},{"style":197},[540],{"type":34,"value":200},{"type":28,"tag":179,"props":542,"children":544},{"class":181,"line":543},24,[545,549,554],{"type":28,"tag":179,"props":546,"children":547},{"style":186},[548],{"type":34,"value":166},{"type":28,"tag":179,"props":550,"children":551},{"style":191},[552],{"type":34,"value":553}," '_elements/textarea'",{"type":28,"tag":179,"props":555,"children":556},{"style":197},[557],{"type":34,"value":200},{"type":28,"tag":179,"props":559,"children":561},{"class":181,"line":560},25,[562,566,571],{"type":28,"tag":179,"props":563,"children":564},{"style":186},[565],{"type":34,"value":166},{"type":28,"tag":179,"props":567,"children":568},{"style":191},[569],{"type":34,"value":570}," '_elements/checkbox'",{"type":28,"tag":179,"props":572,"children":573},{"style":197},[574],{"type":34,"value":200},{"type":28,"tag":179,"props":576,"children":578},{"class":181,"line":577},26,[579,583,588],{"type":28,"tag":179,"props":580,"children":581},{"style":186},[582],{"type":34,"value":166},{"type":28,"tag":179,"props":584,"children":585},{"style":191},[586],{"type":34,"value":587}," '_elements/radio'",{"type":28,"tag":179,"props":589,"children":590},{"style":197},[591],{"type":34,"value":200},{"type":28,"tag":179,"props":593,"children":595},{"class":181,"line":594},27,[596,600,605],{"type":28,"tag":179,"props":597,"children":598},{"style":186},[599],{"type":34,"value":166},{"type":28,"tag":179,"props":601,"children":602},{"style":191},[603],{"type":34,"value":604}," '_elements/toggle'",{"type":28,"tag":179,"props":606,"children":607},{"style":197},[608],{"type":34,"value":200},{"type":28,"tag":179,"props":610,"children":612},{"class":181,"line":611},28,[613,617,622],{"type":28,"tag":179,"props":614,"children":615},{"style":186},[616],{"type":34,"value":166},{"type":28,"tag":179,"props":618,"children":619},{"style":191},[620],{"type":34,"value":621}," '_elements/chips'",{"type":28,"tag":179,"props":623,"children":624},{"style":197},[625],{"type":34,"value":200},{"type":28,"tag":179,"props":627,"children":629},{"class":181,"line":628},29,[630,634,639],{"type":28,"tag":179,"props":631,"children":632},{"style":186},[633],{"type":34,"value":166},{"type":28,"tag":179,"props":635,"children":636},{"style":191},[637],{"type":34,"value":638}," '_elements/snackbar'",{"type":28,"tag":179,"props":640,"children":641},{"style":197},[642],{"type":34,"value":200},{"type":28,"tag":179,"props":644,"children":646},{"class":181,"line":645},30,[647,651,656],{"type":28,"tag":179,"props":648,"children":649},{"style":186},[650],{"type":34,"value":166},{"type":28,"tag":179,"props":652,"children":653},{"style":191},[654],{"type":34,"value":655}," '_elements/label'",{"type":28,"tag":179,"props":657,"children":658},{"style":197},[659],{"type":34,"value":200},{"type":28,"tag":179,"props":661,"children":663},{"class":181,"line":662},31,[664,668,673],{"type":28,"tag":179,"props":665,"children":666},{"style":186},[667],{"type":34,"value":166},{"type":28,"tag":179,"props":669,"children":670},{"style":191},[671],{"type":34,"value":672}," '_elements/button'",{"type":28,"tag":179,"props":674,"children":675},{"style":197},[676],{"type":34,"value":200},{"type":28,"tag":179,"props":678,"children":680},{"class":181,"line":679},32,[681,685,690],{"type":28,"tag":179,"props":682,"children":683},{"style":186},[684],{"type":34,"value":166},{"type":28,"tag":179,"props":686,"children":687},{"style":191},[688],{"type":34,"value":689}," '_elements/form'",{"type":28,"tag":179,"props":691,"children":692},{"style":197},[693],{"type":34,"value":200},{"type":28,"tag":29,"props":695,"children":697},{"id":696},"импорт-в-проект",[698],{"type":34,"value":699},"Импорт в проект",{"type":28,"tag":37,"props":701,"children":702},{},[703,705,711,713,718,720,726],{"type":34,"value":704},"Их папки ",{"type":28,"tag":43,"props":706,"children":708},{"className":707},[],[709],{"type":34,"value":710},"node_modules/zharikov-ui",{"type":34,"value":712}," переносим папку ",{"type":28,"tag":43,"props":714,"children":716},{"className":715},[],[717],{"type":34,"value":172},{"type":34,"value":719}," и файл ",{"type":28,"tag":43,"props":721,"children":723},{"className":722},[],[724],{"type":34,"value":725},"styles.scss",{"type":34,"value":727}," к себе в проект.",{"type":28,"tag":729,"props":730,"children":731},"style",{},[732],{"type":34,"value":733},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":5,"searchDepth":203,"depth":203,"links":735},[736,737,738,739,740],{"id":31,"depth":203,"text":35},{"id":53,"depth":203,"text":56},{"id":82,"depth":203,"text":85},{"id":152,"depth":203,"text":155},{"id":696,"depth":203,"text":699},"markdown","content:0.index.md","content","0.index.md","md",1731665134532]