https://github.com/catamphetamine/social-components-react
React implementation of `social-components` data structures
https://github.com/catamphetamine/social-components-react
Last synced: 3 months ago
JSON representation
React implementation of `social-components` data structures
- Host: GitHub
- URL: https://github.com/catamphetamine/social-components-react
- Owner: catamphetamine
- License: mit
- Created: 2022-05-30T13:54:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-09T15:41:44.000Z (12 months ago)
- Last Synced: 2025-01-11T01:48:17.930Z (5 months ago)
- Language: JavaScript
- Size: 427 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# `social-components-react`
A React implemenation of [`social-components`](https://npmjs.com/package/social-components) data structures, along with generic social service React components.
## Install
Clone the repository:
```
git clone https://gitlab.com/catamphetamine/frontend-lib.git
git clone https://gitlab.com/catamphetamine/social-components-react.git
```
## Use
Simply `import` components from the repository directory:
```js
import Post from '../../social-components-react/components/Post.js'
```
The reason for using these components as source code instead of importing them from an npm package is because a developer might prefer to modify them.
### Styles
Styles are defined in [`./style/variables.css`](https://gitlab.com/catamphetamine/social-components-react/blob/master/style/variables.css) and should be included on a page.
```css
@import "../../social-components-react/style/variables.css";
```
A developer might want to define some global "defaults", along with overriding some of the variables' values:
```css
@import "../../social-components-react/style/variables.css";
:root {
/* A "modular grid" unit. */
--unit: 14px;
/* The color of the white color. Could be dimmed a little bit in Dark Mode. */
--white-color: white;
/* Text settings. */
--SocialComponents-fontFamily: sans-serif;
--SocialComponents-fontFamily--text: serif;
--SocialComponents-lineHeight: 1.35em;
/* Color (from light to dark) */
--SocialComponents-color-100: #eaeaea;
--SocialComponents-color-200: #dddddd;
--SocialComponents-color-300: #cecece;
--SocialComponents-color-400: #b7b7b7;
--SocialComponents-color-500: #999999;
--SocialComponents-color-600: #7b7b7b;
--SocialComponents-color-700: #666666;
--SocialComponents-color-800: #555555;
--SocialComponents-color-900: #444444;
/* Background Color */
--SocialComponents-backgroundColor: white;
/* Clickable Color */
--SocialComponentsClickable-color: orange;
--SocialComponentsClickable-color--active: yellow;
/* "Clickable text" buttons are usually colored a bit darker. */
--SocialComponentsClickable-color--text: brown;
}
```
Light Mode / Dark Mode styles are defined by `"light"` or `"dark"` CSS class being added to the `