https://github.com/shgysk8zer0/core-css
A collection of CSS styles, categoiezed by files, which are useful on common projects
https://github.com/shgysk8zer0/core-css
animations css css3 custom-properties fonts mathml styles
Last synced: 19 days ago
JSON representation
A collection of CSS styles, categoiezed by files, which are useful on common projects
- Host: GitHub
- URL: https://github.com/shgysk8zer0/core-css
- Owner: shgysk8zer0
- License: mit
- Created: 2015-05-25T20:34:47.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2026-03-22T23:12:41.000Z (about 1 month ago)
- Last Synced: 2026-03-23T17:46:18.553Z (about 1 month ago)
- Topics: animations, css, css3, custom-properties, fonts, mathml, styles
- Language: CSS
- Homepage: https://npmjs.com/package/@shgysk8zer0/core-css
- Size: 1.65 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# core-css
A collection of stylesheets that enable quick and easy styling with customization
[](https://dependabot.com)
[](https://github.com/shgysk8zer0/core-css/actions)
[](https://github.com/shgysk8zer0/core-css/actions?query=workflow%3A%22Lint+Code+Base%22)
[](https://github.com/shgysk8zer0/core-css/blob/master/LICENSE)
[](https://github.com/shgysk8zer0/core-css/issues)
[](https://github.com/shgysk8zer0/core-css/pulls)
[](https://github.com/shgysk8zer0/core-css/commits/master)
[](https://github.com/shgysk8zer0/core-css/releases)
[](https://github.com/shgysk8zer0/core-css/stargazers)
[](https://twitter.com/shgysk8zer0)
[](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
- - -
## Helpful Links
- [Overview](#overview)
- [Example](#example)
- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
- [Contributing](./.github/CONTRIBUTING.md)
- [Issues](https://github.com/shgysk8zer0/core-css/issues)
- [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
## Overview
Unlike many CSS libraries, this one has the aim of allowing customization and
advanced features by utilizing the amazing features of modern CSS. Just changing
a `--custom-property` or two can completely change the theme of a site and, since
this is native CSS, you can edit these **in your browser and see the results live.**
For best results, namely in production, you should transpile your CSS using PostCSS
using:
- `cssnano`
- `cssnano-preset-default`
- `postcss`
- `postcss-cli`
- `postcss-import`
- `postcss-preset-env`
- `postcss-url`
It is intended to be used with [shgysk8zer0/fonts](https://github.com/shgysk8zer0/fonts),
but that is completely optional. Simply don't use `fonts.css` and use whatever
font stylesheet(s) you want instead.
## Example
```css
@import url("./viewport.css");
@import url("./rem.css");
@import url("./fonts.css");
@import url("./animations.css");
@import url("./element.css");
@import url("./class-rules.css");
@import url("./jekyll-highlight.css");
:root {
/*================= Font Size and loading =================*/
--desktop-rem: 1.3vw;
--tablet-rem: 1.5vw;
--mobile-rem: 3.3vw;
--main-font: "Roboto";
--title-font: "Ubuntu";
--header-font: "Alice";
--article-font: "Ubuntu";
--article-header-font: var(--header-font);
--font-display: optional;
/*================= Set color vars here =================*/
--default-color: #010101;
--alt-color: #FAFAFA;
--primary-color: #E0E0E0;
--link-color: var(--accent-color);
--accent-color: #135f9d;
--accent-color-2: #0d4a7c;
--border-color: #2D2D2D;
/*================= Button styles and config =================*/
--button-background: var(--accent-color);
--button-active-background: var(--accent-color-2);
--button-disabled-background: var(--button-active-background);
--button-border: border;
--button-disabled-border: var(--button-border);
--button-active-border: var(--button-disabled-border);
--button-color: var(--alt-color);
--button-active-color: var(--button-color);
--button-border-radius: 4px;
--button-accept-background: #1e8709;
--button-reject-background: #b41e1e;
/*================== Animation properties ==================*/
--animation-stagger: 150ms;
/* ================= Syntax Highlighting ====================*/
--highlight-color: black;
--highlight-background: #efefef;
--highlight-literal-number-color: #CCA418;
}
```
```html
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
```