Repository: NextStepWebs/simple-html-invoice-template
Branch: master
Commit: 7d74fe34c862
Files: 11
Total size: 17.2 KB
Directory structure:
gitextract_tlvho0_r/
├── .github/
│ ├── pull_request_template.md
│ └── workflows/
│ └── main.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── invoice.html
├── package.json
└── website/
└── index.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/pull_request_template.md
================================================
<!-- Thanks for your interest in contributing! Please read the contributing guide (CONTRIBUTING.md) before submitting a PR. -->
================================================
FILE: .github/workflows/main.yml
================================================
name: Main CI
on:
push:
branches:
- master
tags:
- v[0-9]+.[0-9]+.[0-9]+
- v[0-9]+.[0-9]+.[0-9]+-alpha.[0-9]+
- v[0-9]+.[0-9]+.[0-9]+-beta.[0-9]+
- v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+
pull_request:
branches:
- master
jobs:
lint:
name: Lint code
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'yarn'
- run: yarn install --frozen-lockfile --prefer-offline
- run: yarn lint
deploy:
name: Deploy to GitHub Pages
runs-on: ubuntu-latest
needs:
- lint
if: github.ref == 'refs/heads/master'
steps:
- uses: actions/checkout@v4
- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@4.0.0
with:
branch: gh-pages
folder: website
================================================
FILE: .gitignore
================================================
node_modules/
.eslintcache*
.DS_Store*
yarn-debug.log*
yarn-error.log*
================================================
FILE: .prettierignore
================================================
node_modules/
================================================
FILE: .prettierrc.json
================================================
{
"jsxSingleQuote": true,
"printWidth": 120,
"singleQuote": true,
"trailingComma": "es5",
"useTabs": true
}
================================================
FILE: CONTRIBUTING.md
================================================
# How to contribute
First of all, thanks for your willingness to help improve this project! 🎉
We strive to make contributing to our open source projects easy, in part by following industry standard conventions and workflows, and by making testing and code formatting simple.
_If you’ve never contributed to an open source project before, check out [this project](https://github.com/firstcontributions/first-contributions), which guides people through their first contribution._
## A high-level overview
From a high-level, here’s what the contribution process looks like:
1. Choose something to contribute
1. Fork this repository
1. Prepare your local environment
1. Make the proposed changes
1. Test your changes
1. Update the docs/README
1. Format the code
1. Commit your changes
1. Open a PR
1. Iterate through the review cycle
1. Changes are accepted 🚀
It looks like a lot of steps, but it’s actually pretty easy. If you’ve contributed to open source projects before, it’s probably a familiar process. Let’s go over each step in more detail…
## 1. Choose something to contribute
Check out the issues tab if you don’t already have something in mind. We usually keep ideas for future improvements in there.
Choose one cohesive thing to work on per PR, rather than lumping together unrelated changes.
## 2. Fork this repository
This one is pretty straightforward. If you’re not a designated collaborator on this project (usually reserved for Sparksuite engineers), you won’t be able to create a new branch inside _this_ repository. But, by forking the repository (making a copy in your own account or organization), you’ll be able to create a new branch in the forked repository and commit your proposed changes there.
## 3. Prepare your local environment
Start by cloning the forked repository, then create a new branch off of `master`. Check out that new branch, then hop over to your favorite terminal. At the root of the repository, run `yarn dev` to prepare the repository for local development.
_Note: good branch names are usually succinct phrases that describe the change. So, for example, if a change fixes a typo in the README file, the branch name might read `fix-typo-in-readme`._
## 4. Make the proposed changes
Using the IDE of your choice, code your changes into existence. Try to follow the conventions and patterns already established in this codebase, particularly when it comes to commenting, spacing, naming, etc. Also, code readability and maintainability are very important; try to avoid “clever” code. During the review process, we’ll help catch anything that doesn’t look quite right.
## 5. Test your changes
You can do this by running `yarn test` at the root of the repository using your favorite terminal. All PRs have to pass every test before they can be accepted.
If you’ve introduced functionality that isn’t already covered by a test, which is often the case, you should add appropriate test(s). If you don’t know where or how to add test(s), just skip this step for now and let us know you need help with this part when you open the PR.
## 6. Update the docs/README
Many, but not all, changes will require updates to the documentation and/or README. Take some time to update those as necessary so that they remain accurate and up-to-date.
## 7. Format the code
To standardize the code’s stylization into our preferred format, run `yarn format` at the root of the repository. Most problems can automatically be fixed, but if some can’t, go ahead and address those manually.
## 8. Commit your changes
Commit your changes to the new branch you created in your forked repository. For organization, you may want to break up your work into multiple commits. Try to use descriptive and succinct commit messages.
_Note: if your commit messages are low quality, we’ll probably end up squash-merging your changes so that your commit messages don’t pollute the `master` branch’s commit history._
## 9. Open a PR
Visit your forked repository and open a new pull request. Make sure the source branch is the new branch you created, and the target branch is the `master` branch on this repository (not the `master` branch on your forked repository).
Try to describe the changes as best as you can in the description, including why you think the change is needed, how to take advantage of the change (if applicable), your design rationale, etc.
If your PR closes one or more issues, write `Closes #X` for each in the PR description (`X` being the issue number).
_Note: If your implementation or tests are incomplete, we recommend opening the pull request as a draft. This helps indicate there’s still more work left to be done._
## 10. Iterate through the review cycle
Opening a PR will notify Sparksuite’s engineers on Slack, and one of us will review your proposed contribution. If it’s not a good fit for our project, we’ll let you know why and will close the PR. Otherwise, we’ll leave feedback as necessary to help ensure the contribution meets our high standards of quality. Make any requested changes and then let us know when you want us to take another look.
## 11. Changes are accepted 🚀
Eventually, the PR will reach a point where we’re satisfied with the quality and we’ll incorporate your work into our project! The changes will usually be deployed with the next published release.
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021 Sparksuite
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.
================================================
FILE: README.md
================================================
# <div align="center">Simple HTML Invoice Template</div>
<p align="center">
<a href="https://validator.w3.org/check?uri=https%3A%2F%2Fsparksuite.github.io%2Fsimple-html-invoice-template%2F"><img alt="W3C Validation" src="https://img.shields.io/w3c-validation/default?targetUrl=https%3A%2F%2Fsparksuite.github.io%2Fsimple-html-invoice-template%2F"></a>
<a href="https://github.com/prettier/prettier"><img alt="license" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg"></a>
<a href="https://github.com/sparksuite/simple-html-invoice-template/blob/master/LICENSE"><img alt="license" src="https://img.shields.io/github/license/sparksuite/simple-html-invoice-template"></a>
</p>
A modern, clean, and very simple responsive HTML invoice template, because sometimes you just need something quick and simple.
- ✨ Simple design
- 📱 Responsive
- 🔧 Easily customizable
- 🌍 RTL support
## Demo
[Find a demo here](https://sparksuite.github.io/simple-html-invoice-template/)
## How to use
Open the [invoice.html](https://github.com/sparksuite/simple-html-invoice-template/blob/master/invoice.html) file and use its HTML and CSS in your application.
## Printer-friendly styling
By default, the appearance of the invoice when printed is the same as when viewed on a screen. If the invoice is the primary or only element on the page, you may want to consider removing the box-shadow and border, and letting the invoice extend the full width of the page. That can be accomplished with this CSS:
```css
@media print {
.invoice-box {
max-width: unset;
box-shadow: none;
border: 0px;
}
}
```
## RTL support
Replace `<div class="invoice-box">` with `<div class="invoice-box rtl">`
## Preview
<img width="1325" alt="Preview" src="https://github.com/sparksuite/simple-html-invoice-template/assets/3850064/5d34c8d2-5ac4-45cf-93f9-1eeaaf23765e">
## Contributing
We love contributions! Contributing is easy; [learn how](https://github.com/sparksuite/simple-html-invoice-template/blob/master/CONTRIBUTING.md).
================================================
FILE: invoice.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.invoice-box.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.invoice-box.rtl table {
text-align: right;
}
.invoice-box.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img
src="https://sparksuite.github.io/simple-html-invoice-template/images/logo.png"
style="width: 100%; max-width: 300px"
/>
</td>
<td>
Invoice #: 123<br />
Created: January 1, 2023<br />
Due: February 1, 2023
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br />
12345 Sunny Road<br />
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br />
John Doe<br />
john@example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>Payment Method</td>
<td>Check #</td>
</tr>
<tr class="details">
<td>Check</td>
<td>1000</td>
</tr>
<tr class="heading">
<td>Item</td>
<td>Price</td>
</tr>
<tr class="item">
<td>Website design</td>
<td>$300.00</td>
</tr>
<tr class="item">
<td>Hosting (3 months)</td>
<td>$75.00</td>
</tr>
<tr class="item last">
<td>Domain name (1 year)</td>
<td>$10.00</td>
</tr>
<tr class="total">
<td></td>
<td>Total: $385.00</td>
</tr>
</table>
</div>
</body>
</html>
================================================
FILE: package.json
================================================
{
"scripts": {
"dev": "yarn install --frozen-lockfile",
"test": "echo 'This project does not contain automated tests'",
"lint": "prettier --check '**/*.{json,html,yml}'",
"format": "prettier --write '**/*.{json,html,yml}'",
"clean": "git clean -X -d --force && find . -type d -empty -delete"
},
"devDependencies": {
"prettier": "^2.2.1"
}
}
================================================
FILE: website/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A simple, clean, and responsive HTML invoice template</title>
<!-- Favicon -->
<link rel="icon" href="./images/favicon.png" type="image/x-icon" />
<!-- Invoice styling -->
<style>
body {
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
text-align: center;
color: #777;
}
body h1 {
font-weight: 300;
margin-bottom: 0px;
padding-bottom: 0px;
color: #000;
}
body h3 {
font-weight: 300;
margin-top: 10px;
margin-bottom: 20px;
font-style: italic;
color: #555;
}
body a {
color: #06f;
}
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
border-collapse: collapse;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<h1>A simple, clean, and responsive HTML invoice template</h1>
<h3>Because sometimes, all you need is something simple.</h3>
Find the code on <a href="https://github.com/sparksuite/simple-html-invoice-template">GitHub</a>. Licensed under the
<a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>.<br /><br /><br />
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="./images/logo.png" alt="Company logo" style="width: 100%; max-width: 300px" />
</td>
<td>
Invoice #: 123<br />
Created: January 1, 2023<br />
Due: February 1, 2023
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br />
12345 Sunny Road<br />
Sunnyville, TX 12345
</td>
<td>
Acme Corp.<br />
John Doe<br />
john@example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>Payment Method</td>
<td>Check #</td>
</tr>
<tr class="details">
<td>Check</td>
<td>1000</td>
</tr>
<tr class="heading">
<td>Item</td>
<td>Price</td>
</tr>
<tr class="item">
<td>Website design</td>
<td>$300.00</td>
</tr>
<tr class="item">
<td>Hosting (3 months)</td>
<td>$75.00</td>
</tr>
<tr class="item last">
<td>Domain name (1 year)</td>
<td>$10.00</td>
</tr>
<tr class="total">
<td></td>
<td>Total: $385.00</td>
</tr>
</table>
</div>
</body>
</html>
gitextract_tlvho0_r/
├── .github/
│ ├── pull_request_template.md
│ └── workflows/
│ └── main.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── invoice.html
├── package.json
└── website/
└── index.html
Condensed preview — 11 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (20K chars).
[
{
"path": ".github/pull_request_template.md",
"chars": 128,
"preview": "<!-- Thanks for your interest in contributing! Please read the contributing guide (CONTRIBUTING.md) before submitting a "
},
{
"path": ".github/workflows/main.yml",
"chars": 929,
"preview": "name: Main CI\n\non:\n push:\n branches:\n - master\n tags:\n - v[0-9]+.[0-9]+.[0-9]+\n - v[0-9]+.[0-9]+.["
},
{
"path": ".gitignore",
"chars": 71,
"preview": "node_modules/\n.eslintcache*\n.DS_Store*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": ".prettierignore",
"chars": 14,
"preview": "node_modules/\n"
},
{
"path": ".prettierrc.json",
"chars": 113,
"preview": "{\n\t\"jsxSingleQuote\": true,\n\t\"printWidth\": 120,\n\t\"singleQuote\": true,\n\t\"trailingComma\": \"es5\",\n\t\"useTabs\": true\n}\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 5347,
"preview": "# How to contribute\n\nFirst of all, thanks for your willingness to help improve this project! 🎉\n\nWe strive to make contri"
},
{
"path": "LICENSE",
"chars": 1067,
"preview": "MIT License\n\nCopyright (c) 2021 Sparksuite\n\nPermission is hereby granted, free of charge, to any person obtaining a copy"
},
{
"path": "README.md",
"chars": 2026,
"preview": "# <div align=\"center\">Simple HTML Invoice Template</div>\n\n<p align=\"center\">\n<a href=\"https://validator.w3.org/check?uri"
},
{
"path": "invoice.html",
"chars": 3488,
"preview": "<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>A simple, clean, and responsive HTML invoice template"
},
{
"path": "package.json",
"chars": 357,
"preview": "{\n\t\"scripts\": {\n\t\t\"dev\": \"yarn install --frozen-lockfile\",\n\t\t\"test\": \"echo 'This project does not contain automated test"
},
{
"path": "website/index.html",
"chars": 4094,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width,"
}
]
About this extraction
This page contains the full source code of the NextStepWebs/simple-html-invoice-template GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 11 files (17.2 KB), approximately 5.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.