A webpage built using the principles of universal design, showcasing the techniques and benefits of universal design.
Built using React, typescript, sass, and webpack based on the react-create-app
boilderplate on npm (but managed with yarn). To get started locally, clone this repo and run yarn install
to install node packages. If you don't have yarn installed you can run npm install -g yarn
. If you don't have node installed, this project is probably a few steps past where you're at (no shade, it was for me at a time).
To start a development server run yarn start
To build for a production environment, run yarn build
├── package.json
├── public
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── README.md
├── src
│ ├── App.scss
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── content
│ │ ├── content.jsx
│ │ └── img
│ │ └── cute-dog.jpg
│ ├── index.scss
│ ├── index.tsx
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ ├── reset.scss
│ ├── responsive.scss
│ └── setupTests.ts
├── tsconfig.json
└── yarn.lock
build/
holds final compiled project. Not very human readable, but very efficient.public/
holds publicly served content. These are used for development server but minimized when built for production.index.html
is the main web page this is built on.
src/
holds the source files which are compiled into publicly served content.index.tsx
is the Typescript as XML entry point. Most code is not in here, however.App.tsx
is where most of the code is. This mainly holds logic for rendering the site.content/
holds the actual copy text incontent.tsx
as well as the images inimg/
.*.scss
are sass style sheets.index
is the entry point,App
has the bulk of the rules,responsive
handles media queries for content resizing, andreset
has a minimal CSS reset.
Most of the other files are autogenerated for package managers or other automations. Necessary, but not something to mess with unless you know what you're doing.