mirror of
https://github.com/primer/css.git
synced 2025-01-06 05:33:07 +03:00
stub out landing page ✨
This commit is contained in:
Shawn Allen
parent
0f22531698
commit
fc8139b4d7
@ -3,4 +3,49 @@ title: Docs
|
||||
hero: true
|
||||
---
|
||||
|
||||
# Hello, world!
|
||||
import {Box, Flex, Heading, Text} from '@primer/components'
|
||||
import {
|
||||
MetaPackageBox,
|
||||
OverviewTitle,
|
||||
OverviewText,
|
||||
PrimerPackageBox,
|
||||
PrimitivesOverview,
|
||||
StylesOverview
|
||||
} from '../../src/landing'
|
||||
import packages from './packages.json'
|
||||
|
||||
# Introduction
|
||||
|
||||
Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.
|
||||
|
||||
<Box my={6}>
|
||||
<Heading fontSize={5} fontWeight="normal" textAlign="center">Highly reusable, flexible styles</Heading>
|
||||
<Text is="p" fontSize={3}>Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into three categories:</Text>
|
||||
</Box>
|
||||
|
||||
<StylesOverview m={6} />
|
||||
|
||||
<Box my={6}>
|
||||
<Heading fontSize={5} fontWeight="normal" textAlign="center">Systematically designed for GitHub</Heading>
|
||||
<Text is="p" fontSize={3}>Primer is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.</Text>
|
||||
</Box>
|
||||
|
||||
<PrimitivesOverview />
|
||||
|
||||
## Primer packages
|
||||
|
||||
Each component or group of styles is packaged up and distributed via npm. Primer includes 23 packages that are grouped into useful meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
|
||||
|
||||
<PrimerPackageBox data={packages.primer} count={Object.keys(packages).length - 1} mb={4} />
|
||||
|
||||
<Flex justifyContent="space-around">
|
||||
<MetaPackageBox title="Core" data={packages['primer-core']} width={1/3}>
|
||||
The core package contains modules that are shared between GitHub product and marketing websites.
|
||||
</MetaPackageBox>
|
||||
<MetaPackageBox title="Product" data={packages['primer-product']} width={1/3}>
|
||||
The product package contains modules that are used on GitHub product websites.
|
||||
</MetaPackageBox>
|
||||
<MetaPackageBox title="Marketing" data={packages['primer-marketing']} width={1/3}>
|
||||
The marketing package contains modules that are used on GitHub marketing websites.
|
||||
</MetaPackageBox>
|
||||
</Flex>
|
||||
|
||||
29
docs/src/landing/ColorImage.svg
Normal file
29
docs/src/landing/ColorImage.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="100" height="108" viewBox="0 0 108 108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Group</title>
|
||||
<desc>Created using Figma</desc>
|
||||
<g id="Canvas" transform="translate(-12627 -7962)">
|
||||
<g id="Group">
|
||||
<g id="Ellipse 3">
|
||||
<use xlink:href="#path0_fill" transform="translate(12647.8 8003.54)" fill="#2088FF" fill-opacity="0.3"></use>
|
||||
</g>
|
||||
<g id="Ellipse 3">
|
||||
<use xlink:href="#path0_fill" transform="translate(12668.5 7970.31)" fill="#2088FF" fill-opacity="0.3"></use>
|
||||
</g>
|
||||
<g id="Ellipse 3">
|
||||
<use xlink:href="#path0_fill" transform="translate(12627 7970.31)" fill="#2088FF" fill-opacity="0.3"></use>
|
||||
</g>
|
||||
<g id="Ellipse 3">
|
||||
<use xlink:href="#path0_fill" transform="translate(12627 7995.23)" fill="#2088FF" fill-opacity="0.3"></use>
|
||||
</g>
|
||||
<g id="Ellipse 3">
|
||||
<use xlink:href="#path0_fill" transform="translate(12668.5 7995.23)" fill="#2088FF" fill-opacity="0.3"></use>
|
||||
</g>
|
||||
<g id="Ellipse 3">
|
||||
<use xlink:href="#path0_fill" transform="translate(12647.8 7962)" fill="#2088FF" fill-opacity="0.3"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path id="path0_fill" d="M 66.4615 33.2308C 66.4615 51.5836 51.5836 66.4615 33.2308 66.4615C 14.8779 66.4615 0 51.5836 0 33.2308C 0 14.8779 14.8779 0 33.2308 0C 51.5836 0 66.4615 14.8779 66.4615 33.2308Z"></path>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
docs/src/landing/ComponentsImage.svg
Normal file
1
docs/src/landing/ComponentsImage.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 73.15 55.6" class="mb-3" width="72"><title>styles</title><path d="M70.1 55.6H42.55a3 3 0 0 1-3-3v-9.46a1 1 0 0 1 2 0v9.46a1 1 0 0 0 1 1h27.6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-27.6a1 1 0 0 0-1 1v10.8a1 1 0 1 1-2 0V3a3 3 0 0 1 3-3h27.6a3 3 0 0 1 3 3v49.6a3 3 0 0 1-3 3h-.05zM30.55 47.8H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h27.55a3 3 0 0 1 3 3v10.8a1 1 0 0 1-2 0V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v41.8a1 1 0 0 0 1 1h27.55a1 1 0 0 0 1-1v-1.62a1 1 0 0 1 2 0v1.62a3 3 0 0 1-3 3z" fill="#79b8ff"></path><path fill="#79b8ff" d="M40.5 8.6h31v2h-31zM1.6 8.6h31v2h-31z"></path><path d="M62.3 38.15H21.9a3 3 0 0 1-3-3v-13.9a3 3 0 0 1 3-3h40.4a3 3 0 0 1 3 3v13.9a3 3 0 0 1-3 3zm-40.4-17.9a1 1 0 0 0-1 1v13.9a1 1 0 0 0 1 1h40.4a1 1 0 0 0 1-1v-13.9a1 1 0 0 0-1-1H21.9z" fill="#2088ff"></path><path d="M31.3 32.25h-3.64a2.39 2.39 0 0 1-2.11-2.3v-3.5a2.33 2.33 0 0 1 2.3-2.3h3.5a2.33 2.33 0 0 1 2.2 2.3v3.5a2.33 2.33 0 0 1-2.25 2.3zm-3.41-2h3.41a.32.32 0 0 0 .3-.3v-3.5a.32.32 0 0 0-.3-.3h-3.5a.32.32 0 0 0-.3.3v3.5a.43.43 0 0 0 .39.3zM57.1 29.15H38.7a1 1 0 0 1 0-2h18.4a1 1 0 0 1 0 2zM15.92 29.22a1 1 0 0 1-.45-.11l-.47-.2a6.86 6.86 0 0 1-.66-.26 1 1 0 0 1 .89-1.79l.47.2a6.86 6.86 0 0 1 .66.28 1 1 0 0 1-.44 1.88zM11.95 26.76a1 1 0 0 1-.71-.29 12.44 12.44 0 0 1-1.69-2.06 1 1 0 0 1 1.68-1.08A10.39 10.39 0 0 0 12.65 25a1 1 0 0 1-.7 1.76zM9.29 21.83a1 1 0 0 1-1-.76 6.13 6.13 0 0 1-.12-1.47 1 1 0 0 1 2 0 4.78 4.78 0 0 0 .06 1 1 1 0 0 1-.74 1.2z" fill="#2088ff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
docs/src/landing/ObjectsImage.svg
Normal file
1
docs/src/landing/ObjectsImage.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 53.46 55.1" class="mb-3" width="60"><title>objects</title><path d="M38.1 41.9L2 41.8a2.08 2.08 0 0 1-2-2L.1 2a2 2 0 0 1 2-2l36.1.1a2 2 0 0 1 2 2l-.1 37.8a2 2 0 0 1-2 2zM2 39.75l36.1.16.1-37.8L2.1 2z" fill="#2088ff"></path><path d="M44.9 48.5L8 48.4a1 1 0 1 1 0-2l36.8.1.1-38.4a1 1 0 0 1 1-1 1 1 0 0 1 1 1l-.1 38.5a1.9 1.9 0 0 1-1.9 1.9z" fill="#79b8ff"></path><path d="M51.5 55.1L14.56 55a1 1 0 1 1 0-2l36.8.1.1-38.4a1 1 0 0 1 1-1 1 1 0 0 1 1 1l-.06 38.49a1.9 1.9 0 0 1-1.89 1.91z" fill="#79b8ff"></path><path d="M29.7 32.6H10.5a1 1 0 1 1 0-2h19.2a1 1 0 0 1 0 2zM29.7 25.5H10.5a1 1 0 1 1 0-2h19.2a1 1 0 0 1 0 2zM29.7 18.4H10.5a1 1 0 1 1 0-2h19.2a1 1 0 1 1 0 2zM20.1 11.3h-9.6a1 1 0 1 1 0-2h9.6a1 1 0 1 1 0 2z" fill="#2088ff"></path></svg>
|
||||
|
After Width: | Height: | Size: 812 B |
27
docs/src/landing/SpacingImage.svg
Normal file
27
docs/src/landing/SpacingImage.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="100" height="100" viewBox="0 0 120 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Group</title>
|
||||
<desc>Created using Figma</desc>
|
||||
<g id="Canvas" transform="translate(-12622 -7539)">
|
||||
<g id="Group">
|
||||
<g id="Line 5">
|
||||
<use xlink:href="#path0_stroke" transform="matrix(6.13546e-17 1 -1 6.11103e-17 12740 7539)" fill="#2088FF"></use>
|
||||
</g>
|
||||
<g id="Line 5">
|
||||
<use xlink:href="#path0_stroke" transform="matrix(6.12323e-17 1 -1 6.12323e-17 12622 7539)" fill="#2088FF"></use>
|
||||
</g>
|
||||
<g id="Line 5">
|
||||
<use xlink:href="#path0_stroke" transform="matrix(6.16285e-17 1 -1 6.08387e-17 12681 7539)" fill="#79B8FF"></use>
|
||||
</g>
|
||||
<g id="Rectangle 10">
|
||||
<use xlink:href="#path1_fill" transform="translate(12640.2 7559.69)" fill="#79B8FF"></use>
|
||||
</g>
|
||||
<g id="Rectangle 10">
|
||||
<use xlink:href="#path1_fill" transform="translate(12699.2 7559.69)" fill="#79B8FF"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path id="path0_stroke" d="M 0 0L 100 0L 100 -2L 0 -2L 0 0Z"></path>
|
||||
<path id="path1_fill" d="M 0 0L 22.5588 0L 22.5588 58.6207L 0 58.6207L 0 0Z"></path>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
docs/src/landing/UtilitiesImage.svg
Normal file
1
docs/src/landing/UtilitiesImage.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 58.5 58.7" class="mb-3" width="62"><title>utilities</title><path d="M41.6 15.6l-1.4-1.4a1 1 0 1 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM33.9 7.9a1 1 0 1 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM27.9 26.6a1 1 0 0 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM21.6 20.2a1 1 0 0 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM15.4 38.7a1 1 0 0 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4zM9.3 32.7a1 1 0 1 0-1.4 1.4l1.4 1.4a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4z" fill="#6bbcff"></path><path d="M26.6 13.4V1a.94.94 0 0 0-1-1H1a.94.94 0 0 0-1 1v24.8a.94.94 0 0 0 1 1h12.4a.94.94 0 0 0 1-1V14.4h11.2a1.08 1.08 0 0 0 1-1zm-2-1H13.4a.94.94 0 0 0-1 1v11.4H2V2h22.6v10.4zM58.2 19.9a.91.91 0 0 0-.7-.3H45.1a.94.94 0 0 0-1 1v11.3H33.9a1.9 1.9 0 0 0-1.9 1.9v10.6H21.5a1.9 1.9 0 0 0-1.9 1.9v10.5a1.9 1.9 0 0 0 1.9 1.9h36a.94.94 0 0 0 1-1V20.6a.91.91 0 0 0-.3-.7zm-1.7 1.7v22.8H46.1V21.7zM44.1 34v21.1L33.9 44.9 33.8 34h10.3zM21.5 46.4h11l10.4 10.4H21.5V46.4zm24.6 10.3V46.4h10.4v10.4z" fill="#008fff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
165
docs/src/landing/index.js
Normal file
165
docs/src/landing/index.js
Normal file
@ -0,0 +1,165 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {BorderBox, Box, Flex, Heading, Link, Text} from '@primer/components'
|
||||
import {getAssetPath} from '../utils'
|
||||
import UtilitiesImage from './UtilitiesImage.svg'
|
||||
import ObjectsImage from './ObjectsImage.svg'
|
||||
import ComponentsImage from './ComponentsImage.svg'
|
||||
import SpacingImage from './SpacingImage.svg'
|
||||
import ColorImage from './ColorImage.svg'
|
||||
|
||||
export const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
|
||||
export const OverviewText = props => <Text fontSize={1} {...props} />
|
||||
|
||||
export function StylesOverview(props) {
|
||||
const styleTypes = [
|
||||
{
|
||||
name: 'Utilities',
|
||||
desc: 'Single purpose, immutable styles, that do one thing well.',
|
||||
image: UtilitiesImage
|
||||
},
|
||||
{
|
||||
name: 'Objects',
|
||||
desc: 'Scaffolding for common page and content layouts.',
|
||||
image: ObjectsImage
|
||||
},
|
||||
{
|
||||
name: 'Components',
|
||||
desc: 'Abstracted patterns for frequently used visual styles.',
|
||||
image: ComponentsImage
|
||||
}
|
||||
]
|
||||
return (
|
||||
<Flex {...props}>
|
||||
{styleTypes.map(({name, desc, image}) => (
|
||||
<Flex.Item is={Text} textAlign="center" mx={4}>
|
||||
<Image src={image} height={90} mb={2} />
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
</Flex.Item>
|
||||
))}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
StylesOverview.propTypes = {
|
||||
types: PropTypes.arrayOf(PropTypes.shape({
|
||||
name: PropTypes.node,
|
||||
desc: PropTypes.node,
|
||||
image: PropTypes.func
|
||||
}))
|
||||
}
|
||||
|
||||
export function PrimitivesOverview(props) {
|
||||
const primitiveTypes = [
|
||||
{
|
||||
name: 'Highly composable spacing scale',
|
||||
desc: `The base-8 spacing scale is highly composable and works with the density of GitHub’s content. Margin and padding spacers bring consistency to vertical and horizontal rhythm, while remaining flexible so you can tweak layouts to work for every context.`,
|
||||
image: SpacingImage
|
||||
},
|
||||
{
|
||||
name: 'Customizable typography',
|
||||
desc: `Font size and line-height options work together to result in more sensible numbers. Font styles come in a range of weights and sizes so that we can style appropriately for content and readability. Type utilities allow us to change the visual styles while keeping markup semantic.`,
|
||||
image: getAssetPath('typography.png')
|
||||
},
|
||||
{
|
||||
name: 'Meaningful color',
|
||||
desc: `The color system allows us to add meaningful signals to content and interactions. Color variables and utilities offer thematic styling options without being tied to structure. Text and background colors come in a range of accessible combinations to ensure we build inclusive interfaces.`,
|
||||
image: ColorImage
|
||||
}
|
||||
]
|
||||
return (
|
||||
<Box width={["auto", "auto", 10/12]} mx="auto" {...props}>
|
||||
{primitiveTypes.map(({name, desc, image}) => (
|
||||
<Flex key={name} my={6} alignItems="center">
|
||||
<Box width={300} mr={6} py={2}>
|
||||
<Image src={image} />
|
||||
</Box>
|
||||
<Box>
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
PrimitivesOverview.propTypes = {
|
||||
types: PropTypes.arrayOf(PropTypes.shape({
|
||||
name: PropTypes.node,
|
||||
desc: PropTypes.node,
|
||||
image: PropTypes.func
|
||||
}))
|
||||
}
|
||||
|
||||
function Image(props) {
|
||||
const {src, ...rest} = props
|
||||
switch (typeof src) {
|
||||
case 'string':
|
||||
return <Box is="img" width="100%" {...props} />
|
||||
case 'function':
|
||||
return <Box is={src} {...rest} />
|
||||
default:
|
||||
throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
|
||||
}
|
||||
}
|
||||
|
||||
export function PrimerPackageBox({data, count, ...rest}) {
|
||||
return (
|
||||
<Flex justifyContent="space-around" {...rest}>
|
||||
<BorderBox bg="gray.1" width="auto" px={6} py={3} my={4}>
|
||||
<Flex alignItems="center" justifyContent="space-around">
|
||||
<Text fontSize={3} fontWeight="bold" mb={2} textAlign="center">
|
||||
<Link href={packageSourceURL('primer')} color="inherit">Primer</Link>
|
||||
{' '}
|
||||
<Link href={packageURL('primer')}>
|
||||
{data.version}
|
||||
</Link>
|
||||
</Text>
|
||||
<Link href="https://travis-ci.org/primer/primer" mt={-1}>
|
||||
<img alt="Build Status" src="https://travis-ci.org/primer/primer.svg?branch=master" />
|
||||
</Link>
|
||||
</Flex>
|
||||
{count ? (
|
||||
<Text is="div" textAlign="center">
|
||||
This package includes all {count} Primer modules.
|
||||
</Text>
|
||||
) : null}
|
||||
</BorderBox>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export function MetaPackageBox({children, data, title, ...rest}) {
|
||||
const deps = data.dependencies || []
|
||||
return (
|
||||
<Flex.Item is={BorderBox} bg="white" mx={4} flexShrink={0} {...rest}>
|
||||
<Heading fontSize={2} is={BorderBox} bg="gray.1" border={0} borderBottom={1} px={3} py={2}>
|
||||
<Link href={packageSourceURL(data.name)}>{title}</Link>
|
||||
{' '}
|
||||
<Link href={packageURL(data.name)} ml={2}>{data.version}</Link>
|
||||
</Heading>
|
||||
<Text is="div" fontSize={1} p={3}>
|
||||
{children}
|
||||
<Text fontWeight="bold" is="div" mt={4} mb={2}>
|
||||
{deps.length} packages:
|
||||
</Text>
|
||||
<ul className="list-style-none pl-0">
|
||||
{deps.map(dep => (
|
||||
<li><Link href={packageURL(dep)}>{dep}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</Text>
|
||||
</Flex.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function packageURL(name) {
|
||||
return `https://www.npmjs.com/package/${name}`
|
||||
}
|
||||
|
||||
function packageSourceURL(name) {
|
||||
// TODO get this from Metalsmith or page metadata???
|
||||
return `https://github.com/primer/primer/blob/master/modules/${name}`
|
||||
}
|
||||
BIN
docs/static/typography.png
vendored
Normal file
BIN
docs/static/typography.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Loading…
Reference in New Issue
Block a user