primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 19:53:11 +03:00
Code Issues Projects Releases Wiki Activity

fix some syntax highlighting

Browse Source
This commit is contained in:
Shawn Allen 2018-12-04 22:41:52 -08:00
parent 7a99f8257b
commit 6d19cda887
2 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/pages/css/getting-started/index.md
View File

@ -51,32 +51,26 @@ sass:
It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import your primer code and any other custom code you write.
```css
---
---
```scss
@import "primer-core/index.scss";
/* These files live in the same directory as the index file. */
@import "custom-1.scss";
@import "custom-2.scss";
// These files live in the same directory as the index file.
@import "./custom-1.scss";
@import "./custom-2.scss";
```
Here's an example of how it might look if you installed only a few primer components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`.
```css
---
---
```scss
@import "primer-utilities/index.scss";
@import "primer-buttons/index.scss";
/* Import color variables for custom code */
// Import color variables for custom code
@import "primer-support/index.scss";
/* Override default blue*/
// Override default blue
$blue: #0000ff;
@import "custom-that-uses-primer-variables.scss";
@import "./custom-that-uses-primer-variables.scss";
.foo {
background: $blue;
@ -93,7 +87,7 @@ Don't forget to add the compiled CSS to the `<head>` section of your page.
## Using primer on a static site
You won't need to install any node modules for a static site, you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/primer/build/build.css) from the npm module and host it yourself. But if that is not an option you can include the cdn link in your html.
You won't need to install any node modules for a static site, you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/primer/build/build.css) from the npm module and host it yourself. If that's not an option, you can include a CDN link in your html:
```html
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet">

10
docs/pages/css/principles/index.md
View File

@ -68,7 +68,7 @@ Components make it easier to mark up a set of elements that are commonly grouped
* **Separate structure and skin:** This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various components to achieve a large amount of visual variety without much code.
* **Separate container and content:** Essentially, this means “rarely use location-dependent styles”. A component should look the same no matter where you put it.
```css
```scss
// structure
.flash {...}
@ -138,7 +138,7 @@ Utilities provide the building blocks for layout and handle a range common use c
Examples:
```css
```scss
.text-white { color: #fff !important; }
.bg-gray-light { background-color: #ddd !important; }
@ -186,11 +186,11 @@ Inline styles are performant and deal with one off use cases that don't need to
The most common use case is for applying widths and heights to images. Other use cases might be to apply a custom width to a div to work with it's content.
```html
// Image width and height
<!-- Image width and height -->
<img src="images/avatar.png" width="20" height="20">
// Custom width for a div that is not a repeated pattern
<div class="d-table-cell py-3 pr-3" style="width:72px">
<!-- Custom width for a div that is not a repeated pattern -->
<div class="d-table-cell py-3 pr-3" style="width: 72px">
```
## Further reading