Update documentation
This commit is contained in:
parent
b399c584c7
commit
0c0d951185
|
@ -0,0 +1 @@
|
||||||
|
"use strict";(self.webpackChunklogos_docs_template=self.webpackChunklogos_docs_template||[]).push([[4675],{96718:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>u});var i=n(87462),a=(n(67294),n(3905)),l=n(72797);const s={title:"Web Environment",sidebar_position:1},o=void 0,r={unversionedId:"visual-language/grid-and-layout/web-environment",id:"visual-language/grid-and-layout/web-environment",title:"Web Environment",description:"Spacing",source:"@site/docs/visual-language/grid-and-layout/web-environment.mdx",sourceDirName:"visual-language/grid-and-layout",slug:"/visual-language/grid-and-layout/web-environment",permalink:"/visual-language/grid-and-layout/web-environment",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Web Environment",sidebar_position:1},sidebar:"main",previous:{title:"Overview",permalink:"/visual-language/grid-and-layout/overview"},next:{title:"Non-web Environment",permalink:"/visual-language/grid-and-layout/non-web-environment"}},d={},u=[{value:"Spacing",id:"spacing",level:2},{value:"Grid",id:"grid",level:2},{value:"Web grid templates",id:"web-grid-templates",level:3}],g={toc:u};function p(e){let{components:t,...s}=e;return(0,a.kt)("wrapper",(0,i.Z)({},g,s,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"spacing"},"Spacing"),(0,a.kt)("p",null,"Spacing tokens serve as the building blocks for maintaining consistency in components, grids, and page layouts. Our base unit is 8, and the spacing scale uses multiples of the base unit."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"Untitled",src:n(5767).Z,width:"1592",height:"1459"})),(0,a.kt)("h2",{id:"grid"},"Grid"),(0,a.kt)("p",null,"Our web grid system is flexible. We typically structure grids and layouts based on our spacing scale."),(0,a.kt)("p",null,"Commonly used web grids:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Desktop: 24 / 16 columns"),(0,a.kt)("li",{parentName:"ul"},"Tablet: 16 / 12 columns"),(0,a.kt)("li",{parentName:"ul"},"Mobile: 2 columns")),(0,a.kt)("p",null,"Gutter size - 16px."),(0,a.kt)("p",null,(0,a.kt)("img",{alt:"image 1.png",src:n(36796).Z,width:"7800",height:"4684"})),(0,a.kt)("h3",{id:"web-grid-templates"},"Web grid templates"),(0,a.kt)(l.ExternalResourceCard,{title:"Logos templates",description:"www.figma.com",href:"https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=215%3A8&mode=design&t=0bOCaBBwhofQKq0c-1",logoSrc:"/icons/figma.svg",style:{maxWidth:"390px"},mdxType:"ExternalResourceCard"}))}p.isMDXComponent=!0},5767:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/Untitled-ffb6a322ab56fa7536d9b5c731d1e4db.png"},36796:(e,t,n)=>{n.d(t,{Z:()=>i});const i=n.p+"assets/images/image_1-a1d200f65c6215b529a7339077712bf1.png"}}]);
|
|
@ -1 +0,0 @@
|
||||||
"use strict";(self.webpackChunklogos_docs_template=self.webpackChunklogos_docs_template||[]).push([[4675],{96718:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>m,frontMatter:()=>s,metadata:()=>o,toc:()=>g});var a=i(87462),n=(i(67294),i(3905)),l=i(72797);const s={title:"Web Environment",sidebar_position:1},d=void 0,o={unversionedId:"visual-language/grid-and-layout/web-environment",id:"visual-language/grid-and-layout/web-environment",title:"Web Environment",description:"Spacing",source:"@site/docs/visual-language/grid-and-layout/web-environment.mdx",sourceDirName:"visual-language/grid-and-layout",slug:"/visual-language/grid-and-layout/web-environment",permalink:"/visual-language/grid-and-layout/web-environment",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Web Environment",sidebar_position:1},sidebar:"main",previous:{title:"Overview",permalink:"/visual-language/grid-and-layout/overview"},next:{title:"Non-web Environment",permalink:"/visual-language/grid-and-layout/non-web-environment"}},r={},g=[{value:"Spacing",id:"spacing",level:2},{value:"Grid",id:"grid",level:2},{value:"Web grid templates",id:"web-grid-templates",level:3},{value:"Examples",id:"examples",level:2},{value:"Desktop",id:"desktop",level:3},{value:"Tablet",id:"tablet",level:3},{value:"Mobile",id:"mobile",level:3}],p={toc:g};function m(e){let{components:t,...s}=e;return(0,n.kt)("wrapper",(0,a.Z)({},p,s,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h2",{id:"spacing"},"Spacing"),(0,n.kt)("p",null,"Spacing tokens serve as the building blocks for maintaining consistency in components, grids, and page layouts. Our base unit is 8, and the spacing scale uses multiples of the base unit."),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"Untitled",src:i(5767).Z,width:"1592",height:"1459"})),(0,n.kt)("h2",{id:"grid"},"Grid"),(0,n.kt)("p",null,"Our web grid system is flexible. We typically structure grids and layouts based on our spacing scale."),(0,n.kt)("p",null,"Commonly used web grids:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},"Desktop: 24 / 16 columns"),(0,n.kt)("li",{parentName:"ul"},"Tablet: 16 / 12 columns"),(0,n.kt)("li",{parentName:"ul"},"Mobile: 2 columns")),(0,n.kt)("p",null,"Gutter size - 16px."),(0,n.kt)("p",null,(0,n.kt)("img",{alt:"image 1.png",src:i(36796).Z,width:"7800",height:"4684"})),(0,n.kt)("h3",{id:"web-grid-templates"},"Web grid templates"),(0,n.kt)(l.ExternalResourceCard,{title:"Logos templates",description:"www.figma.com",href:"https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=215%3A8&mode=design&t=0bOCaBBwhofQKq0c-1",logoSrc:"/icons/figma.svg",style:{maxWidth:"390px"},mdxType:"ExternalResourceCard"}),(0,n.kt)("h2",{id:"examples"},"Examples"),(0,n.kt)("h3",{id:"desktop"},"Desktop"),(0,n.kt)(l.ImageGrid,{md:{cols:2,gap:"16px"},images:[{src:"/Untitled-1.png"},{src:"/Untitled-2.png"},{src:"/Untitled-3.png"},{src:"/Untitled-4.png"}],mdxType:"ImageGrid"}),(0,n.kt)("h3",{id:"tablet"},"Tablet"),(0,n.kt)(l.ImageGrid,{md:{cols:2,gap:"16px"},images:[{src:"/Untitled-5.png"},{src:"/Untitled-6.png"}],mdxType:"ImageGrid"}),(0,n.kt)("h3",{id:"mobile"},"Mobile"),(0,n.kt)(l.ImageGrid,{md:{cols:2,gap:"16px"},images:[{src:"/Untitled-7.png"},{src:"/Untitled-8.png"}],mdxType:"ImageGrid"}))}m.isMDXComponent=!0},5767:(e,t,i)=>{i.d(t,{Z:()=>a});const a=i.p+"assets/images/Untitled-ffb6a322ab56fa7536d9b5c731d1e4db.png"},36796:(e,t,i)=>{i.d(t,{Z:()=>a});const a=i.p+"assets/images/image_1-a1d200f65c6215b529a7339077712bf1.png"}}]);
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue