mirror of
https://github.com/primer/css.git
synced 2024-12-25 07:03:35 +03:00
import subhead component (product)
This commit is contained in:
Shawn Allen
parent
56d4d8968a
commit
6498a0f1b2
@ -54,7 +54,8 @@
|
||||
"primer-tables": "1.3.0",
|
||||
"primer-tooltips": "1.3.0",
|
||||
"primer-truncate": "1.3.0",
|
||||
"primer-utilities": "4.6.0"
|
||||
"primer-utilities": "4.6.0",
|
||||
"primer-subhead": "0.0.1"
|
||||
},
|
||||
"keywords": [
|
||||
"primer",
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
"primer-dropdown": "0.1.0",
|
||||
"primer-labels": "1.4.0",
|
||||
"primer-markdown": "3.6.0",
|
||||
"primer-support": "4.3.0"
|
||||
"primer-support": "4.3.0",
|
||||
"primer-subhead": "0.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
21
modules/primer-subhead/LICENSE
Normal file
21
modules/primer-subhead/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
124
modules/primer-subhead/README.md
Normal file
124
modules/primer-subhead/README.md
Normal file
@ -0,0 +1,124 @@
|
||||
# Primer CSS / Subhead
|
||||
|
||||
[](https://www.npmjs.org/package/primer-subhead)
|
||||
[](https://travis-ci.org/primer/primer-css)
|
||||
|
||||
> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
|
||||
|
||||
This repository is a module of the full [primer-css][primer-css] repository.
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-subhead` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-subhead
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
|
||||
```scss
|
||||
@import "primer-subhead/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
<!-- %docs
|
||||
title: Subhead
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/101
|
||||
-->
|
||||
|
||||
The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It's an `<h2>` sized heading with normal font-weight.
|
||||
|
||||
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Plain subhead</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.
|
||||
|
||||
```html
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<div class="Subhead-heading">Spacious subhead</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can add a one line description to the subhead with `.Subhead-description`.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with description</div>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Plain subhead</div>
|
||||
</div>
|
||||
<p>
|
||||
This is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have <strong>bold</strong> text. <a href="#">Click to learn more.</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with button</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
</div>
|
||||
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<div class="Subhead-heading">Subhead with link</div>
|
||||
<div class="Subhead-actions"><a href="#url">Learn more</a></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use all the elements together to create a Subhead with actions and a description.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading">Subhead with actions and description</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users.
|
||||
|
||||
```html
|
||||
<div class="Subhead">
|
||||
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer-css]: https://github.com/primer/primer
|
||||
[docs]: http://primercss.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
3
modules/primer-subhead/index.scss
Normal file
3
modules/primer-subhead/index.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// support files
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/subhead.scss";
|
||||
39
modules/primer-subhead/lib/subhead.scss
Normal file
39
modules/primer-subhead/lib/subhead.scss
Normal file
@ -0,0 +1,39 @@
|
||||
// Subhead styles
|
||||
.Subhead {
|
||||
display: flex;
|
||||
padding-bottom: $spacer-2;
|
||||
margin-bottom: $spacer-3;
|
||||
border-bottom: $border;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
// Modifier class to give a lot of breathing room between sections of content.
|
||||
.Subhead--spacious {
|
||||
margin-top: $spacer-6;
|
||||
}
|
||||
|
||||
// <h2> sized heading with normal font weight
|
||||
.Subhead-heading {
|
||||
font-size: $h2-size;
|
||||
font-weight: normal;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
// Make the text bold and red for dangerous content
|
||||
.Subhead-heading--danger {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
// One-liner of supporting text
|
||||
.Subhead-description {
|
||||
font-size: $body-font-size;
|
||||
color: $text-gray;
|
||||
flex: 1 100%;
|
||||
}
|
||||
|
||||
// Add 1 or 2 buttons to the right of the heading
|
||||
.Subhead-actions {
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
32
modules/primer-subhead/package.json
Normal file
32
modules/primer-subhead/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"name": "primer-subhead",
|
||||
"description": "The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.",
|
||||
"homepage": "http://primercss.io/",
|
||||
"primer": {
|
||||
"category": "product",
|
||||
"module_type": "components"
|
||||
},
|
||||
"author": "GitHub, Inc.",
|
||||
"license": "MIT",
|
||||
"style": "index.scss",
|
||||
"main": "build/index.js",
|
||||
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-subhead",
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer-css/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"test-docs": "../../script/test-docs",
|
||||
"build": "../../script/npm-run primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"lint": "../../script/lint-scss",
|
||||
"test": "../../script/npm-run-all build lint test-docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"primer-support": "4.3.0"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
"primer"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user