{"id":19614319,"url":"https://github.com/fpapado/proto","last_synced_at":"2026-06-13T19:32:10.716Z","repository":{"id":96505055,"uuid":"135894244","full_name":"fpapado/proto","owner":"fpapado","description":"Develop sites. Pick the things you need to focus on, and forget about the rest.","archived":false,"fork":false,"pushed_at":"2018-06-16T18:08:47.000Z","size":396,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-26T17:47:39.138Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://proto.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fpapado.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-03T10:25:14.000Z","updated_at":"2018-06-16T18:08:48.000Z","dependencies_parsed_at":"2023-04-30T19:01:13.322Z","dependency_job_id":null,"html_url":"https://github.com/fpapado/proto","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fpapado/proto","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fproto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fproto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fproto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fproto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fpapado","download_url":"https://codeload.github.com/fpapado/proto/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fproto/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34298247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T10:51:07.421Z","updated_at":"2026-06-13T19:32:10.083Z","avatar_url":"https://github.com/fpapado.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Proto\n\n\u003e Making websites: fun mode.\n\n## What is this?\nA starter template for quickly prototyping static websites.\n\nThe main idea is to allow you to pick the things you need to focus on, and forget about the rest.\n\nThere are a few guiding principles:\n- Prototypes have an end in sight;\n- Prototypes and random stuff should be fun to **explore**, **develop** and **share**;\n- Specifics will change, but patterns are transferable;\n- A prototyping system will be different for each user. This specific system might not be for everyone, and that is ok :)\n\nUses x0, react and styled-system.\nBased on [x0-styled](https://github.com/mrmrs/x0-styled).\n\n## Concepts\nHere are the main development concepts:\n- React handles the views and HTML output;\n- Routing mirrors the filesystem;\n- Styled-system takes care of outputting styles from the **values** in your design;\n- The output is a static site;\n- Sharing is instant using `zeit.co/now`.\n\nThe tech world often calls these setups \"opinions\".\nI do not find that characterisation frutiful.\nI would rather think of this setup as \"my current happy place\".\nOver time, the prototyping setup I use changes, in a loop between \"learning to make something new\" and \"learning a new way to make something\".\nIn other words, it allows me to focus on the things I am interested in at a certain moment, by leveraging familiar patterns and APIs.\n\nDifferent versions of the setup will be tagged in [Releases](https://github.com/fpapado/proto/releases) for future reference.\n\n### I have not used this setup before, can I build with it?\nYes! How relaxed you will be depends on how familiar you are with each of the development concepts/tools above.\nIf you have worked with React before, I think that styled-system will probably be the new variable.\nIf you have not worked with React before, but know CSS and HTML, I am also optimistic about it.\n\nI generally try to keep as many \"unknowns\" static when building something new. Usually that tends to be the thing I am building, and not the technology.\nHowever, it is equally beautiful to keep the technology as an \"unknown\" and keep the project as a \"known\" (e.g. you might have implemented similar functionality before).\nIf your scenario falls in the latter case, I hope your time prototyping will be worth it.\n\n## How do I install this?\nYou don't.\nInstead, you are encouraged to clone the repository and make it your own.\n\nIf you have [git](https://git-scm.com/) installed, you can clone and disassociate it from the command line:\n```\ngit clone https://github.com/fpapado/proto myprojectname\ncd myprojectname\nrm -rf .git/\n```\n\nI also like using [degit](https://github.com/Rich-Harris/degit) for doing exactly those steps:\n```shell\ndegit https://github.com/fpapado/proto myprojectname\n```\n\nI would love to chat about what you've built or how your own setup has diverged!\n\n## Getting Started\nAfter downloading the directory and navigating to it in your terminal, run:\n\n```\nnpm install \u0026\u0026 npm start\n```\n\nThen open your browser at [localhost:8080](http://localhost:8080)\n\nYou can edit `pages/index.js` and you should see those adjustments update live in the browser.\n\nIf you want to customise the title and description of your site, look under the `x0` field in `package.json`.\n\n## Adding a new page\nx0 creates routes based on the filesystem, mirroring the setup under the `pages/` directory.\n\nFist add a new page in the `pages/` directory.\nYou can copy `index.js` and rename it to something else, like `Gallery.js`.\n\nSee [x0's docs on Routing](https://github.com/c8r/x0#routing) for more details.\n\n## Building\nWhen you are ready to build for production, run:\n\n```shell\nnpm run build\n```\n\nThis will create the static site under the `site/` directory.\nIt will also write a `bundle.js` file, which will rehydrate (i.e. \"pick up / take over\") the client application in `index.html`.\n\n[Read more about x0 in their docs](https://compositor.io/x0/docs)\n\n## Styling\nThe main part of this repository is under the `elements/` directory.\nReact components under that directory are thin wrappers on top of HTML elements (e.g. `\u003cp\u003e`, `\u003cdiv\u003e`).\nThey provide extra \"styling superpowers\" from [styled-system](https://jxnblk.com/styled-system/).\nThe design system values are mapped to css classnames dynamically, using the [emotion](https://github.com/emotion-js/emotion) css-in-js library.\nIn that sense, CSS is more like the target, but the imporant stuff is in the values.\n\nIn the shortest way I can put it:\n\nA \"theme\" file exists under `theme.js`. It covers some basic **design values** and scales in your system, such as typography, spacing, and colours.\nComponents in your system use those values, and combine to make greater things.\nTo make working with these values more ergonomic, styled-system links them to React props.\n\nFor example, consider a Card component:\n\n```jsx\nconst Card = ({imageSrc, imageAlt, text}) =\u003e\n  // Div with padding scale value of 3 and colours\n  \u003cDiv p={3} bg=\"white.1\" color=\"black.1\"\u003e\n    \u003cImg width={100} src={imageSrc} alt={imageAlt} /\u003e\n    \u003cP\u003e{text}\u003c/P\u003e\n  \u003c/Div\u003e\n```\n\n### Further reading on styling\nIf you have not used styled-system before, I highly recommend [their documentation](https://jxnblk.com/styled-system/getting-started).\n\nVarun Vachar has another great on styling as props, that motivates things from the ground up:\nhttps://varun.ca/styled-system/\n\nThe page under [localhost:8080/elements](localhost:8080/elements) has a playground.\n\n## Deploying\nThere are many ways to deploy a static site.\nThe tool the example site uses is [Zeit's now](https://zeit.co/now).\n\nYou can customise the specifics by modifying `now.json`.\nLook at their docs for the [full now.json specification](https://zeit.co/docs/features/configuration#now.json).\n\nYou also have to install their CLI once, probably globally:\n\n```shell\nnpm install -g now\n```\n\nThen, whenever you want to deploy:\n\n```shell\nnpm run build \u0026\u0026 npm run deploy:now\n```\n\nThis part of the project is easy to remove, and mostly a convenience.\n\n## Credits, Thanks, Inspiration\nBased on work by @mrmrs, @jxnblk, and @johno.\nI have drawn a lot of ideas from them in the past few years.\nThough I will likely never meet them, their work has been inspiring.\n\nThe initial set up was by @mrmrs on the x0-styled repository:\nhttps://github.com/mrmrs/x0-styled\n\nThe setup was adapted for x0 v5, uses Emotion, and has my own take on the docs.\nI find the \"elements\" analogy valuable in showing how they map to HTML elements, that have some \"styling superpowers\".\nSuperpowers is what I felt I had when I started using styled-system (and further back, [tachyons](https://tachyons.io/)), so it seems fitting.\nThat, combined with the zero-config of x0 gives me a simple way to replicate my ideal prototyping setup.\nI hope you find something valuable here!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffpapado%2Fproto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffpapado%2Fproto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffpapado%2Fproto/lists"}