https://github.com/pglevy/include-component
An experiment with options for including components with dynamic content
https://github.com/pglevy/include-component
Last synced: 12 months ago
JSON representation
An experiment with options for including components with dynamic content
- Host: GitHub
- URL: https://github.com/pglevy/include-component
- Owner: pglevy
- License: other
- Created: 2022-01-02T21:23:42.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-05T03:06:14.000Z (over 4 years ago)
- Last Synced: 2025-02-17T11:38:14.389Z (over 1 year ago)
- Language: CSS
- Size: 89.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# USWDS Boilerplate
A starting point for rapid web prototyping using a hosted version of the U.S. Web Design System
This template is set up with USWDS core CSS and JS files from [CDNJS](https://cdnjs.com/libraries/uswds).
- Last updated: November 24, 2021
- Version: 2.12.2
- More information: [How to use USWDS](https://designsystem.digital.gov/how-to-use-uswds/)
[Use template on GitHub](https://github.com/Bixal/uswds-boilerplate/generate).
Or [try it out first on CodePen](https://codepen.io/pglevy/pen/abBgJbe).
## Getting started
### Copying the template and setting up publishing
1. Press the `Use this template` button on the `Code` tab.
1. Go to the `Settings` tab and scroll down to the `GitHub Pages` section.
1. Set the `Source` to `main` and press `Save`.
You'll see a URL show up, but the site takes a few minutes before it's actually live. In the meantime, try creating a page.
### Creating your first page
1. Go to the `Code` tab.
1. Press the `Add File` button and select `Create new file`.
1. Give the page a title, for example, `first-page.md`. (Note the lack of spaces and the inclusion of the .md extension.)
1. Add some content using [markdown](https://guides.github.com/features/mastering-markdown/) syntax. For example, you could start with a heading and paragraph like this:
```
# First page
This is my first page.
```
5. Scroll down to the bottom of the page and press `Commit new file`.
### Checking your page online
1. On the Code tab, find and press the `Environments` link. (It may be in the right column.)
1. On the next page (Deployments), press the `View deployment` button. (You should see the default homepage load.)
1. In the address bar of the browser, add the name of your page _using the HTML extension_ and press return. For example: `first-page.html`. (The full address will be something like this: `https://pglevy.github.io/uswds-boilerplate/first-page.html`)
You should see the new page you created.
## Next steps
Now that you know how to create pages, here are some other things you can do:
- Create more pages.
- Update `index.md` (the homepage) with your own content.
- Add links between pages so it works like a website.
- Copy component code snippets from the [U.S. Web Design System](https://designsystem.digital.gov/components/overview/) to add more advanced functionality to your pages.
## What to do if you're having problems
- Try starting over with a new repository and follow the instructions again.
- If it's still not working, [create an issue in the original repo](https://github.com/Bixal/uswds-template), and I'll try to help.
## Building the running the site locally on your computer (for advanced users)
To run the site locally, you'll need to install [Jekyll](https://jekyllrb.com/), which requires a few steps. See the [official installation instructions](https://jekyllrb.com/docs/installation/).
## Credit and license
This project was created primarly using the [GitHub Pages gem for Jekyll](https://github.com/github/pages-gem) and some inspiration from [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate). It is licensed under [The Unlicense](https://github.com/Bixal/uswds-template/blob/main/LICENSE), which allows everything and promises nothing. 😎