https://github.com/netlify/netlify-example-styles
Simple styles for Netlify examples and demos
https://github.com/netlify/netlify-example-styles
Last synced: 4 months ago
JSON representation
Simple styles for Netlify examples and demos
- Host: GitHub
- URL: https://github.com/netlify/netlify-example-styles
- Owner: netlify
- Created: 2024-05-26T18:16:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-28T12:06:24.000Z (over 1 year ago)
- Last Synced: 2025-02-25T13:15:45.857Z (10 months ago)
- Language: HTML
- Size: 189 KB
- Stars: 0
- Watchers: 8
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Netlify Example Styles
Quickly apply some simple branding to Netlify examples and demos
https://example-styles.netlify.app
## Usage
### CSS via CDN
A minified CSS file is available to use directly in your sites by linking to this stylesheet URL. To ease the performance hit of sourcing the fonts from another domain via this CSS, we should preload those too
```html
```
### HTML snippets
In addition to using the provided CSS, a number of HTML snippets are available to include in your examples and demos in order to add some boilerplate page elements. These are provided here as HTML so that they can be used in whatever framework or components your project employs.
#### Header and global navigation
```html
- Active page
- Navigation
Example title
Short description of example
```
## Development and deployment
We use Lightning CSS to bundle and minify our CSS. After cloning this repository you can install the dependencies and run a local dev server to facilitate development of the styles and boilerplate.
### Prerequisites
- [pnpm](https://pnpm.io/) (recommended to manage dependencies due to its more efficient use of local packages)
- [Netlify Dev](https://developers.netlify.com/cli)
```shell
# install dependencies
pnpm i
# run local build a and dev server
ntl dev
```
### Deployment
This repo is the source of the site deployed at https://example-styles.netlify.app. Pushing to the `main` branch will update the site.