Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ymcatwincities/sandboxes_html
CodeShare/Virtual Y/Membership sandboxes index page
https://github.com/ymcatwincities/sandboxes_html
Last synced: about 1 month ago
JSON representation
CodeShare/Virtual Y/Membership sandboxes index page
- Host: GitHub
- URL: https://github.com/ymcatwincities/sandboxes_html
- Owner: ymcatwincities
- Created: 2020-02-26T16:56:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-08T13:26:14.000Z (over 2 years ago)
- Last Synced: 2023-09-14T10:31:03.112Z (over 1 year ago)
- Language: SCSS
- Homepage:
- Size: 2.11 MB
- Stars: 0
- Watchers: 8
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# YMCA CodeShare Sandboxes landing page
## Source
### Design wireframes
https://xd.adobe.com/view/4c680fc3-feba-4ad1-409f-09efedcd66ac-3a59/
There are 3 variations:
- Mobile Phone (MIN)
- Mobile Tablet
- Desktop (Fixed MAX)
### Images
https://drive.google.com/drive/folders/1j40bjO1l7fD7M6w3QEEcgkkLHZB7N8hn?usp=sharing
### Page text
```
Sandbox
Welcome to the YMCA CodeShare demo site! Compare the three themes currently offered on YMCA CodeShare and discover the range of
capabilities across different installation levels of the platform.
```
### Sandbox Domain Names
- sandboxes.y.org
- sandbox-carnation-cus.y.org
- sandbox-carnation-ext.y.org
- sandbox-carnation-std.y.org
- sandbox-lily-cus.y.org
- sandbox-lily-ext.y.org
- sandbox-lily-std.y.org
- sandbox-rose-cus.y.org
- sandbox-rose-ext.y.org
- sandbox-rose-std.y.org
### Header
The logo and "back to YMCA CodeShare.org" point to https://ycloud.y.org/open-y-association-websites/.
The logo is to be taken from openy.org.
The header is sticky for desktops.
### Fonts
The used fonts:
- Quicksand, regular
- Quicksand, bold
- Roboto, regular
- Roboto, medium
The fonts are to be taken from Google fonts.
### Theme palette
- black #000000
- white #FFFFFF
- red #F41938 (+ #D0343A for contrast with white)
- light-grey #F2F2F2
# Development
## Approach
The responsive layout.
The mobile first approach is to be used.
The page is to be built with Bootstrap 4.
Webpack is to be used to provide development environment and build production artifacts.
## Usage
Project installation:
`npm install`
To start local environment:
`npm start`
To build production artifacts:
`npm run build`
## Project structure
- `webpack.*.js` - the Webpack configuration files;
- `src/` - contains all the source files for the project:
- `index.handlebars` - the root Handlebars file for building `index.html`;
- `main.scss` - the root SCSS file for building `main.css`;
- `data.json` - contains the page content;
- `assets/` - all the images used in the page;
- `partials/` - contains Handlebars component templates;
- `scss/` - contains SCSS modules.
### data.json
The file describes all the content needed to build the static page.
Structure:
- `title` - the page title, used in meta tags;
- `description` - the page description, used in meta tags, must not exceed 155 characters;
- `url` - the URL where this page is hosted, used in meta tags;
- `header` - the content header (see the wireframes);
- `intro` - the intro text (see the wireframes), non-sanitized, can contain HTML markup;
- `cards` - the array of card objects, used to build the markup for cards:
- `id` - the card id, used as a HTML `id` attribute, used in CSS;
- `link` - a link to a sandbox website, used in the "Preview" links;
- `title` - a card title, e.g "Rose: Standard install";
- `description` - a card body content, non-sanitized, can contain HTML markup.
## TODOs
- [NORMAL] improve IE11 rendering;
- [MINOR] migrate to Gatsby;
- [MINOR] automate removing of `main.js` from the build artifact `dist/index.html`.