├── BACKERS.md
├── pages
├── nodemon.json
├── src
│ ├── docs
│ │ ├── form
│ │ │ ├── index.pug
│ │ │ ├── range.md
│ │ │ ├── textarea.md
│ │ │ ├── radio.md
│ │ │ └── checkbox.md
│ │ ├── components
│ │ │ ├── index.pug
│ │ │ ├── pagination.md
│ │ │ ├── nav.md
│ │ │ ├── breadcrumb.md
│ │ │ ├── placeholder.md
│ │ │ └── tabs.md
│ │ ├── container
│ │ │ ├── index.pug
│ │ │ ├── element-group.md
│ │ │ └── basic.md
│ │ ├── elements
│ │ │ ├── index.pug
│ │ │ ├── note-block.md
│ │ │ ├── divider.md
│ │ │ ├── progress.md
│ │ │ ├── spinner.md
│ │ │ ├── avatar.md
│ │ │ ├── tooltip.md
│ │ │ └── chip.md
│ │ ├── helpers
│ │ │ └── index.pug
│ │ ├── general
│ │ │ ├── index.pug
│ │ │ ├── breakpoints.md
│ │ │ ├── build-variants.md
│ │ │ ├── theme.md
│ │ │ ├── build-a-theme.md
│ │ │ └── getting-started.md
│ │ ├── _includes
│ │ │ ├── copy-toast.pug
│ │ │ ├── sponsors.pug
│ │ │ ├── tail.pug
│ │ │ ├── footer.pug
│ │ │ ├── bottombar.pug
│ │ │ ├── head.pug
│ │ │ └── sidenav.pug
│ │ ├── swBase.js
│ │ ├── base.pug
│ │ └── navigationData.json
│ ├── _includes
│ │ └── tail.pug
│ ├── stylesheets
│ │ ├── imports
│ │ │ ├── _theme.scss
│ │ │ ├── docsearch
│ │ │ │ ├── main.scss
│ │ │ │ └── _variables.scss
│ │ │ ├── _footer.scss
│ │ │ ├── _values.scss
│ │ │ ├── _dimmer.scss
│ │ │ ├── _navbar.scss
│ │ │ ├── _searchbar.scss
│ │ │ ├── _worker-toast.scss
│ │ │ ├── _search.scss
│ │ │ ├── _bottombar.scss
│ │ │ ├── editor
│ │ │ │ └── theme.scss
│ │ │ └── _highlight.scss
│ │ ├── 404.scss
│ │ ├── doc-front.scss
│ │ ├── download.scss
│ │ ├── homepage.scss
│ │ └── support.scss
│ ├── scripts
│ │ └── worker.js
│ ├── _mixins.pug
│ ├── 404.pug
│ └── support.pug
├── tocopy
│ ├── docs
│ │ ├── offliner.js
│ │ └── manifest.json
│ ├── mainOffliner.js
│ ├── resources
│ │ ├── lexend.ttf
│ │ ├── favicon.png
│ │ ├── icon-512.png
│ │ ├── profile.png
│ │ ├── brand_logo.png
│ │ ├── varela-round.ttf
│ │ ├── jetbrains-mono.ttf
│ │ ├── material-icons.woff2
│ │ ├── patreon.svg
│ │ ├── ko-fi.svg
│ │ ├── fonts.css
│ │ ├── codepen.svg
│ │ ├── zusty.svg
│ │ └── jsfiddle.svg
│ └── scripts
│ │ ├── theme-apply.js
│ │ ├── homepage.js
│ │ └── site.js
├── b
│ ├── config.js
│ ├── workbox-config.js
│ ├── buildSassData.js
│ ├── runAutoprefixer.js
│ ├── copyFiles.js
│ ├── browserSync.js
│ ├── renderSass.js
│ ├── renderPug.js
│ ├── renderMd.js
│ └── mdPlugins.js
├── webpack.config.js
├── Syntax.md
├── README.md
└── package.json
├── .gitattributes
├── scss
├── variants
│ ├── zusty-prefixless.scss
│ ├── parted
│ │ ├── theme.scss
│ │ └── zusty.scss
│ └── theme.scss
├── helpers
│ ├── _.scss
│ └── text.scss
├── core
│ ├── _.scss
│ ├── _var-only.scss
│ ├── _parted.scss
│ ├── extends.scss
│ ├── reset.scss
│ ├── colors.scss
│ ├── mixins.scss
│ ├── base-styles.scss
│ └── functions.scss
├── form
│ ├── _.scss
│ ├── range.scss
│ ├── radio.scss
│ ├── container.scss
│ ├── textarea.scss
│ ├── switch.scss
│ └── checkbox.scss
├── elements
│ ├── _.scss
│ ├── divider.scss
│ ├── note-block.scss
│ ├── chip.scss
│ ├── avatar.scss
│ ├── table.scss
│ ├── progress.scss
│ └── spinner.scss
└── components
│ ├── _.scss
│ ├── nav.scss
│ ├── breadcrumb.scss
│ ├── placeholder.scss
│ ├── card.scss
│ ├── pagination.scss
│ ├── badge.scss
│ └── tabs.scss
├── .gitignore
├── postcss.config.js
├── .browserslistrc
├── updateVer.js
├── zusty.scss
├── .travis.yml
├── .github
├── workflows
│ └── nodejs.yml
└── ISSUE_TEMPLATE
│ ├── feature_request.md
│ └── bug_report.md
├── LICENSE.md
├── stylelint.config.js
├── README.md
└── package.json
/BACKERS.md:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/nodemon.json:
--------------------------------------------------------------------------------
1 | {
2 | "ignore": ["*.json"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * linguist-vendored
2 | *.css linguist-vendored=false
3 |
--------------------------------------------------------------------------------
/pages/src/docs/form/index.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | +redirect('basics')
3 |
--------------------------------------------------------------------------------
/pages/tocopy/docs/offliner.js:
--------------------------------------------------------------------------------
1 | self.registration.unregister({ immediate: true })
2 |
--------------------------------------------------------------------------------
/pages/tocopy/mainOffliner.js:
--------------------------------------------------------------------------------
1 | self.registration.unregister({ immediate: true })
2 |
--------------------------------------------------------------------------------
/pages/src/docs/components/index.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | +redirect('badge')
3 |
--------------------------------------------------------------------------------
/pages/src/docs/container/index.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | +redirect('basic')
3 |
--------------------------------------------------------------------------------
/pages/src/docs/elements/index.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | +redirect('avatar')
3 |
--------------------------------------------------------------------------------
/pages/src/docs/helpers/index.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | +redirect('general')
3 |
--------------------------------------------------------------------------------
/scss/variants/zusty-prefixless.scss:
--------------------------------------------------------------------------------
1 | $prefix: '';
2 |
3 | @import '../../zusty';
4 |
--------------------------------------------------------------------------------
/pages/b/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | debug: false,
3 | version: '1.2.0'
4 | }
5 |
--------------------------------------------------------------------------------
/pages/src/docs/general/index.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | +redirect('getting-started')
3 |
--------------------------------------------------------------------------------
/scss/helpers/_.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | @import "color";
4 | @import "general";
5 | @import "text";
6 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/lexend.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/lexend.ttf
--------------------------------------------------------------------------------
/pages/tocopy/resources/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/favicon.png
--------------------------------------------------------------------------------
/pages/tocopy/resources/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/icon-512.png
--------------------------------------------------------------------------------
/pages/tocopy/resources/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/profile.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 |
4 | demo/
5 | pages/public/
6 |
7 | *.dat
8 | *.map
9 | *.cmd
10 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/brand_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/brand_logo.png
--------------------------------------------------------------------------------
/pages/tocopy/resources/varela-round.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/varela-round.ttf
--------------------------------------------------------------------------------
/pages/src/_includes/tail.pug:
--------------------------------------------------------------------------------
1 | if (!debug)
2 | script(src='/scripts/worker.js')
3 | script.
4 | registerWorker('/offliner.js');
5 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/jetbrains-mono.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/jetbrains-mono.ttf
--------------------------------------------------------------------------------
/pages/tocopy/resources/material-icons.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarsamurmu/zusty/HEAD/pages/tocopy/resources/material-icons.woff2
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | require('cssnano')({
4 | preset: 'default'
5 | })
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/scss/core/_.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | @import "var-only";
4 | @import "theme-colors-css";
5 | @import "base-styles";
6 | @import "reset";
7 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/copy-toast.pug:
--------------------------------------------------------------------------------
1 | .copy-toast#copyToast
2 | span.zust-icon.zust-large
3 | i.material-icons check
4 | span.text Successfully Copied
5 |
--------------------------------------------------------------------------------
/scss/core/_var-only.scss:
--------------------------------------------------------------------------------
1 | @import "functions";
2 | @import "colors";
3 | @import "theme-colors-var";
4 | @import "variables";
5 | @import "mixins";
6 | @import "extends";
7 |
--------------------------------------------------------------------------------
/scss/variants/parted/theme.scss:
--------------------------------------------------------------------------------
1 | @import '../../core/functions';
2 | @import '../../core/variables';
3 | @import '../../core/colors';
4 | @import '../../core/theme-colors-var';
5 | @import '../../core/theme-colors-css';
6 |
--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | last 5 Chrome versions
2 | last 5 Firefox versions
3 | last 5 Explorer versions
4 | last 5 iOS versions
5 | last 5 Opera versions
6 | last 5 Safari versions
7 | last 5 Android versions
8 | last 5 Edge versions
9 |
--------------------------------------------------------------------------------
/scss/variants/theme.scss:
--------------------------------------------------------------------------------
1 | $just-base-theme: true;
2 |
3 | @import '../core/functions';
4 | @import '../core/variables';
5 | @import '../core/colors';
6 | @import '../core/theme-colors-var';
7 | @import '../core/theme-colors-css';
8 |
--------------------------------------------------------------------------------
/scss/form/_.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | @import "checkbox";
4 | @import "container";
5 | @import "input";
6 | @import "radio";
7 | @import "range";
8 | @import "select";
9 | @import "switch";
10 | @import "textarea";
11 |
--------------------------------------------------------------------------------
/scss/core/_parted.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | @import "functions";
4 | @import "colors";
5 | @import "theme-colors-var";
6 | @import "variables";
7 | @import "mixins";
8 | @import "extends";
9 | @import "base-styles";
10 | @import "reset";
11 |
--------------------------------------------------------------------------------
/scss/variants/parted/zusty.scss:
--------------------------------------------------------------------------------
1 | $css-variable-enabled: true;
2 |
3 | @import '../../core/_parted';
4 | @import '../../elements/';
5 | @import '../../form/';
6 | @import '../../components/';
7 | @import '../../helpers/';
8 | @import '../../container';
9 |
--------------------------------------------------------------------------------
/updateVer.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const pkg = require('./package.json');
3 |
4 | let scssFile = fs.readFileSync('./zusty.scss').toString();
5 |
6 | scssFile = scssFile.replace(/v([\d\.]+)/g, `v${pkg.version}`);
7 |
8 | fs.writeFileSync('./zusty.scss', scssFile);
9 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/_theme.scss:
--------------------------------------------------------------------------------
1 | :root, [zust-theme="light"] {
2 | --scrollbar-color: #BDBDBD;
3 | --sidenav-bg-color: hsl(0, 0%, 96%);
4 | }
5 |
6 | [zust-theme="dark"] {
7 | --scrollbar-color: #616161;
8 | --sidenav-bg-color: hsl(0, 0%, 18%);
9 | }
10 |
--------------------------------------------------------------------------------
/scss/core/extends.scss:
--------------------------------------------------------------------------------
1 | %full-width {
2 | width: -webkit-fill-available;
3 | width: -moz-available;
4 | width: fill-available;
5 | }
6 |
7 | %full-height {
8 | height: -webkit-fill-available;
9 | height: -moz-available;
10 | height: fill-available;
11 | }
12 |
--------------------------------------------------------------------------------
/scss/elements/_.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | @import "avatar";
4 | @import "button";
5 | @import "chip";
6 | @import "divider";
7 | @import "icon";
8 | @import "note-block";
9 | @import "progress";
10 | @import "spinner";
11 | @import "table";
12 | @import "tooltip";
13 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/docsearch/main.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 | @import 'dropdown';
3 | @import 'searchbox';
4 |
5 | $searchbox: true !default;
6 |
7 | @if ($searchbox == true) {
8 | @include searchbox($searchbox-config...);
9 | }
10 |
11 | @include dropdown($dropdown-config...);
12 |
--------------------------------------------------------------------------------
/scss/components/_.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | @import "badge";
4 | @import "breadcrumb";
5 | @import "card";
6 | @import "dropdown";
7 | @import "modal";
8 | @import "nav";
9 | @import "navbar";
10 | @import "pagination";
11 | @import "placeholder";
12 | @import "raw-progress";
13 | @import "tabs";
14 |
--------------------------------------------------------------------------------
/pages/b/workbox-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | globDirectory: 'public/',
3 | globPatterns: [
4 | '**/*.{js,html,png,svg,css,json,ttf,woff2}'
5 | ],
6 | globIgnores: [
7 | 'mainOffliner.js'
8 | ],
9 | swSrc: 'src/docs/swBase.js',
10 | swDest: 'public/offliner.js',
11 | maximumFileSizeToCacheInBytes: 5 * 1024 * 1024
12 | };
13 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/_footer.scss:
--------------------------------------------------------------------------------
1 | .site-footer {
2 | position: absolute;
3 | left: 0;
4 | right: 0;
5 | margin-top: 20px;
6 | background-color: var(--light-color);
7 | font-family: 'Lexend', sans-serif !important;
8 | padding: 10px 30px;
9 | font-size: 14px;
10 |
11 | * {
12 | font-family: 'Lexend', sans-serif !important;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/pages/b/buildSassData.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const glob = require('glob');
3 |
4 | const dataJson = {};
5 |
6 | glob.sync('./node_modules/zusty/**/*.scss').forEach((path) => {
7 | dataJson[path.replace('./node_modules/zusty/', '')] = fs.readFileSync(path).toString();
8 | });
9 |
10 | fs.writeFileSync('public/scripts/sassData.json', JSON.stringify(dataJson));
11 |
--------------------------------------------------------------------------------
/zusty.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 |
3 | /*!
4 | * Zusty v1.2.0
5 | * Copyright (c) Sarsa Murmu 2019-present
6 | * Repository https://github.com/sarsamurmu/zusty
7 | * Licensed under The MIT License
8 | */
9 |
10 | @import "scss/core/";
11 | @import "scss/elements/";
12 | @import "scss/form/";
13 | @import "scss/components/";
14 | @import "scss/helpers/";
15 | @import "scss/container";
16 |
--------------------------------------------------------------------------------
/pages/b/runAutoprefixer.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const glob = require('glob');
3 |
4 | const autoprefixer = require('autoprefixer');
5 | const postcss = require('postcss');
6 |
7 | glob.sync('./public/stylesheets/*.css').forEach((filePath) => {
8 | postcss([ autoprefixer ]).process(fs.readFileSync(filePath).toString(), { from: undefined }).then((result) => {
9 | fs.writeFileSync(filePath, result.css);
10 | })
11 | });
12 |
--------------------------------------------------------------------------------
/pages/src/docs/swBase.js:
--------------------------------------------------------------------------------
1 | importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.1/workbox-sw.js');
2 |
3 | workbox.core.setCacheNameDetails({ prefix: 'Zusty' });
4 | workbox.core.skipWaiting();
5 | workbox.core.clientsClaim();
6 |
7 | workbox.precaching.precacheAndRoute(self.__WB_MANIFEST, {
8 | cleanUrls: true
9 | });
10 |
11 | workbox.googleAnalytics.initialize();
12 | workbox.precaching.cleanupOutdatedCaches();
13 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/_values.scss:
--------------------------------------------------------------------------------
1 | // Screen Sizes
2 | $tablet: 769px;
3 | $desktop: 1024px;
4 |
5 | // Text Sizes
6 | $xlarge-text: x-large;
7 | $large-text: larger;
8 | $medium-text: medium;
9 | $small-text: small;
10 |
11 | // Button
12 | $button-border-radius: 6px;
13 |
14 | // z-indexs
15 | $dropdown-z-index: 5;
16 |
17 | // Misc; Don't change them
18 | $border-radius-full: 999999px;
19 | $primary-transition: 0.2s;
20 | $secondary-transition: 0.5s;
21 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "12"
4 | script: npm run build
5 | # For Discord Webhook
6 | after_success:
7 | - wget https://raw.githubusercontent.com/sarsamurmu/travis-ci-discord-webhook/master/send.sh
8 | - chmod +x send.sh
9 | - ./send.sh success $WEBHOOK_URL
10 | after_failure:
11 | - wget https://raw.githubusercontent.com/sarsamurmu/travis-ci-discord-webhook/master/send.sh
12 | - chmod +x send.sh
13 | - ./send.sh failure $WEBHOOK_URL
14 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/_dimmer.scss:
--------------------------------------------------------------------------------
1 | .dimmer {
2 | z-index: 9;
3 | background-color: var(--dimmer-bg-color);
4 | position: fixed;
5 | top: 0;
6 | left: 0;
7 | width: 100%;
8 | height: 100%;
9 | opacity: 0;
10 | visibility: hidden;
11 | transition: all 0.5s ease 0s, visibility 0s ease 0.5s;
12 |
13 | &.zust--visible {
14 | opacity: 1;
15 | visibility: visible;
16 | transition: all 0.5s ease 0.1s, visibility 0s ease 0s;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/scss/core/reset.scss:
--------------------------------------------------------------------------------
1 | // Resetting Outline
2 | *, *:focus, *:hover, *:active, *:focus-within {
3 | outline: none !important;
4 | outline-width: 0 !important;
5 | outline-color: $transparent !important;
6 | }
7 |
8 | .#{$prefix}btn, label {
9 | @include large {
10 | cursor: pointer;
11 | }
12 |
13 | @include until-large {
14 | cursor: default;
15 | }
16 | }
17 |
18 | *, *:after, *:before {
19 | box-sizing: border-box;
20 | -webkit-tap-highlight-color: $transparent;
21 | }
22 |
--------------------------------------------------------------------------------
/pages/src/docs/base.pug:
--------------------------------------------------------------------------------
1 | doctype html
2 | html(lang='en' dir='ltr')
3 | include ../_mixins.pug
4 | head
5 | title #{title} - Zusty CSS
6 | meta(property="og:title" content=`${title} - Zusty CSS`)
7 | include _includes/head.pug
8 | block extraHead
9 | | !{extraHead}
10 | body
11 | include _includes/bottombar.pug
12 | include _includes/sidenav.pug
13 |
14 | +updateBanner
15 |
16 | block content
17 | | !{inner}
18 |
19 | include _includes/tail.pug
20 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/404.scss:
--------------------------------------------------------------------------------
1 | @import '../../../scss/core/var-only';
2 | @import "imports/navbar";
3 | @import "imports/footer";
4 |
5 | @import "/resources/fonts.css";
6 |
7 | body {
8 | font-family: 'Varela Round', sans-serif;
9 | padding-top: 80px;
10 |
11 | @include large {
12 | padding-top: 100px;
13 | }
14 | }
15 |
16 | h1, h2, h3 {
17 | font-family: 'Lexend', sans-serif;
18 | font-weight: normal;
19 | }
20 |
21 | .site-footer {
22 | position: absolute;
23 | bottom: 0;
24 | }
25 |
--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
1 | name: Node CI
2 |
3 | on: [push]
4 |
5 | jobs:
6 | build:
7 |
8 | runs-on: ubuntu-latest
9 |
10 | strategy:
11 | matrix:
12 | node-version: [12.x]
13 |
14 | steps:
15 | - uses: actions/checkout@v1
16 | - name: Use Node.js ${{ matrix.node-version }}
17 | uses: actions/setup-node@v1
18 | with:
19 | node-version: ${{ matrix.node-version }}
20 | - name: npm install and build
21 | run: |
22 | npm install
23 | npm run build
24 | env:
25 | CI: true
26 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/doc-front.scss:
--------------------------------------------------------------------------------
1 | @import "./../../../scss/core/var-only";
2 | @import "imports/navbar";
3 | @import "imports/worker-toast";
4 | @import "imports/footer";
5 |
6 | @import "/resources/fonts.css";
7 |
8 | body {
9 | font-family: 'Varela Round', sans-serif;
10 | padding: 18px;
11 | padding-top: 100px;
12 |
13 | @include large {
14 | padding-top: 100px;
15 | padding-left: 253px;
16 | padding-right: 228px;
17 | }
18 | }
19 |
20 | h1, h2, h3, h4, h5 {
21 | font-family: 'Lexend', sans-serif;
22 | font-weight: normal;
23 | }
24 |
25 | .site-footer {
26 | margin-top: 80px;
27 | }
28 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/_navbar.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../scss/core/var-only';
2 |
3 | .zust-navbar {
4 | * {
5 | font-family: 'Lexend', sans-serif !important;
6 | }
7 |
8 | @include large {
9 | .zust-header {
10 | padding: 20px;
11 | }
12 | }
13 |
14 | img {
15 | transition: 0.4s;
16 |
17 | + span {
18 | transition: 0.4s;
19 | }
20 | }
21 |
22 | &.hideLogo {
23 | img {
24 | transform: translateY(-100px);
25 |
26 | + span {
27 | transform: translateX(-40px);
28 | }
29 | }
30 | }
31 |
32 | span > span {
33 | opacity: 0.6;
34 | font-size: 16px;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/patreon.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
8 |
--------------------------------------------------------------------------------
/scss/elements/divider.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $primary-transition: var(--primary-transition);
3 | }
4 |
5 | [divider]:not(hr), .#{$prefix}divider {
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | white-space: nowrap;
10 | transition: $primary-transition;
11 |
12 | &:after, &:before {
13 | content: '';
14 | background-color: var(--divider-color);
15 | height: 4px;
16 | width: 100%;
17 | opacity: 0.5;
18 | border-radius: 100px;
19 | transition: $primary-transition;
20 | }
21 |
22 | &:after {
23 | margin-left: 10px;
24 | }
25 |
26 | &:before {
27 | margin-right: 10px;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/sponsors.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | div.docs-sponsor-main
3 | hr.h(divider)
4 | .docs-sponsor-container
5 | //-div Sponsor
6 | p.zust-text-center Get involved in improving Zusty CSS.
7 | a(href="https://github.com/sarsamurmu/zusty/issues/new?template=bug_report.md").zust-btn.zust-fullwidth Report a Bug
8 | a(href="https://github.com/sarsamurmu/zusty/issues/new?template=feature_request.md").zust-btn.zust-fullwidth Feature Request
9 | //-
10 | br
11 | br
12 | p If you liked Zusty CSS, Then please
13 | a(href=`../../support${htmlExt}`).zust-btn.zust-link.zust-fullwidth.zust-link
14 | | Support Us
15 | //-hr(divider)
16 |
--------------------------------------------------------------------------------
/pages/tocopy/docs/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Zusty Docs",
3 | "name": "Docs - Zusty CSS",
4 | "description": "Full Documentation of Zusty CSS Framework.",
5 | "background_color": "#FFFFFF",
6 | "display": "standalone",
7 | "icons": [
8 | {
9 | "src": "/resources/favicon.png",
10 | "type": "image/png",
11 | "sizes": "192x192"
12 | },
13 | {
14 | "src": "/resources/icon-512.png",
15 | "type": "image/png",
16 | "sizes": "512x512"
17 | }
18 | ],
19 | "start_url": "/docs/",
20 | "scope": "/docs/",
21 | "serviceworker": {
22 | "src": "../offliner.js"
23 | },
24 | "categories": ["education"],
25 | "lang": "en-US"
26 | }
27 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 | ---
8 |
9 | **Is your feature request related to a problem? Please describe.**
10 |
11 |
12 | **Describe the solution you'd like**
13 |
14 |
15 | **Describe alternatives you've considered**
16 |
17 |
18 | **Additional context**
19 |
20 |
--------------------------------------------------------------------------------
/pages/tocopy/scripts/theme-apply.js:
--------------------------------------------------------------------------------
1 | // Getting Theme Data from URL
2 | var aPageURL = window.location.href;
3 | var darkURL = aPageURL.includes("theme=dark");
4 | var lightURL = aPageURL.includes("theme=light");
5 |
6 | if (darkURL === true) { localStorage.setItem('theme', 'dark') }
7 | if (lightURL === true) { localStorage.setItem('theme', 'light') }
8 |
9 | const aCurrentTheme = localStorage.getItem('theme');
10 | const aMetaTheme = document.querySelector('meta[name=theme-color]');
11 |
12 | if (aCurrentTheme) {
13 | document.documentElement.setAttribute('zust-theme', aCurrentTheme);
14 |
15 | if (aCurrentTheme === "dark") {
16 | aMetaTheme.setAttribute('content', '#212121');
17 | }
18 | } else {
19 | localStorage.setItem('theme', 'light');
20 | }
21 |
--------------------------------------------------------------------------------
/pages/src/docs/general/breakpoints.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Breakpoints
3 | ---
4 |
5 | # Breakpoints
6 | Zusty has four breakpoints by default. You can even extend it. [Learn more about extending breakpoints](../general/variables#extending-breakpoints).
7 |
8 | Breakpoints are
9 | - `small`{.tag}
10 | - `medium`{.tag}
11 | - `until-large`{.tag}
12 | - `large`{.tag}
13 |
14 | If a modifier says that it has support for breakpoints. Then the modifier can be applied in this way for any breakpoint only `{comment}(modifier-class)@{comment}(breakpoint-name)`{.string}.
15 |
16 | Here's an example
17 | You may know, you can use `zust-hidden`{.class} class to hide any element.
18 | What if you want to hide it only on `small`{.tag} screens?
19 | Simply use class `zust-hidden@small`{.class}.
20 |
--------------------------------------------------------------------------------
/pages/tocopy/scripts/homepage.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('DOMContentLoaded', () => {
2 | window.qs = document.querySelector.bind(document);
3 |
4 | const nav = qs('nav');
5 |
6 | window.isElementInViewport = (el) => {
7 | var rect = el.getBoundingClientRect();
8 |
9 | return (
10 | rect.top >= 0 &&
11 | rect.left >= 0 &&
12 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
13 | rect.right <= (window.innerWidth || document.documentElement.clientWidth)
14 | )
15 | }
16 |
17 | window.addEventListener('scroll', () => {
18 | if (isElementInViewport(qs('.hero > img'))) {
19 | nav.classList.add('hideLogo')
20 | } else {
21 | nav.classList.remove('hideLogo')
22 | }
23 | })
24 | })
25 |
--------------------------------------------------------------------------------
/pages/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const TerserPlugin = require('terser-webpack-plugin');
3 |
4 | module.exports = [{
5 | name: 'default',
6 | entry: {
7 | docs: './src/scripts/docs.js',
8 | worker: './src/scripts/worker.js',
9 | download: './src/scripts/download.js'
10 | },
11 | output: {
12 | filename: '[name].js',
13 | path: path.join(__dirname, 'public', 'scripts')
14 | },
15 | resolve: {
16 | enforceExtension: false,
17 | enforceModuleExtension: false,
18 | extensions: ['.js'],
19 | modules: ['node_modules']
20 | },
21 | optimization: {
22 | minimizer: [
23 | new TerserPlugin({
24 | terserOptions: {
25 | output: {
26 | comments: false
27 | }
28 | }
29 | })
30 | ]
31 | }
32 | }]
33 |
--------------------------------------------------------------------------------
/pages/b/copyFiles.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const glob = require('glob');
3 | const path = require('path');
4 | const chokidar = require('chokidar');
5 |
6 | const args = process.argv.splice(2, process.argv.length - 2);
7 |
8 | const dirToCopy = './tocopy/';
9 |
10 | const copyFiles = () => {
11 | glob.sync(dirToCopy + '**/*.*').forEach((file) => {
12 | fs.mkdirSync(path.dirname(file.replace('tocopy', 'public')), {
13 | recursive: true
14 | });
15 | fs.copyFileSync(file, file.replace('tocopy', 'public'))
16 | });
17 | }
18 |
19 | if (args.includes('-w')) {
20 | chokidar.watch(dirToCopy).on('all', copyFiles);
21 | } else {
22 | copyFiles();
23 | fs.copyFileSync('./node_modules/sass.js/dist/sass.js', './public/scripts/sass.js');
24 | fs.copyFileSync('./node_modules/sass.js/dist/sass.worker.js', './public/scripts/sass.worker.js');
25 | fs.copyFileSync('../dist/zusty.min.css', './public/resources/zusty.min.css');
26 | }
27 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/tail.pug:
--------------------------------------------------------------------------------
1 | include copy-toast.pug
2 | #nextPrevContainer
3 | a.next
4 | span.type Next
5 | span.title Sample
6 | a.prev
7 | span.type Previous
8 | span.title Sample
9 | include sponsors.pug
10 | include footer.pug
11 | //- Dimmer
12 | .dimmer(onclick='hideSidenav()')
13 | //- Search
14 | .search-container
15 | .input-box
16 | .zust-flex.zust-justify-between
17 | span Rapid Search Inside of Docs
18 | label.zust-switch
19 | span DocSearch
20 | input(type='checkbox' id='searchProvider')
21 | span
22 | br
23 | .zust-form-el
24 | input#searchInput.zust-input(type="text" placeholder="Search for words, pages etc. Ex. checkbox")
25 | div
26 | input#docSearch.zust-input(type="text" placeholder="Search for words, pages etc. Ex. checkbox")
27 | #searchResult
28 | script(src='/scripts/docs.js')
29 | if (!debug)
30 | script.
31 | registerWorker('/offliner.js');
32 |
--------------------------------------------------------------------------------
/pages/src/docs/elements/note-block.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Note Block
3 | ---
4 |
5 | # Note Block
6 | A note block for message.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 |
What is it?
15 |
It is just a note block
16 |
26 |
Default - Primary
27 |
Hey it's primary
28 |
31 |
Warning
32 |
This is warning, just ignore.
33 |
36 |
Error
37 |
Check for faulty parts.
38 |
41 |
Success
42 |
Faulty thing fixed!
43 |
46 |
Link
47 |
Finally Link?
48 |
Simple divider
14 | With content
16 |
Introduction
17 | ```
18 | ---
19 |
20 |
21 | ## Simple
22 | Simple divider is just a `hr`{.tag} with attribute `divider`{.attr}.
23 |
24 | ```html {snippet}
25 | Any content Here
35 | ```
36 |
37 | More usages
38 | ```html {snippet}
39 | Buy this
40 |
OR
41 | Sell this
42 | ```
43 | ```html {snippet}
44 |
Like Heading
45 | This is my paragraph about Zusty CSS.
46 | ```
47 | ---
48 |
--------------------------------------------------------------------------------
/scss/elements/note-block.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $note-block-border-radius: var(--note-block-border-radius);
3 | $note-block-line-width: var(--note-block-line-width);
4 | $note-block-margin: var(--note-block-margin);
5 | $note-block-padding: var(--note-block-padding);
6 | $primary-transition: var(--primary-transition);
7 | }
8 |
9 | .#{$prefix}note {
10 | background-color: var(--note-block-bg-color);
11 | overflow: hidden;
12 | position: relative;
13 | border-radius: $note-block-border-radius;
14 | margin: $note-block-margin;
15 | padding: $note-block-padding;
16 | transition: background-color $primary-transition;
17 |
18 | &:after {
19 | content: '';
20 | position: absolute;
21 | top: 0;
22 | left: 0;
23 | height: 100%;
24 | background-color: var(--note-block-line-color);
25 | width: $note-block-line-width;
26 | }
27 |
28 | @each $name, $color in $item-colors {
29 | @if $name {
30 | &.#{$prefix}#{$name}:after {
31 | background-color: $color !important;
32 | }
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/_searchbar.scss:
--------------------------------------------------------------------------------
1 | .search-container {
2 | background-color: var(--dimmer-bg-color);
3 | height: 100%;
4 | width: 100%;
5 | position: fixed;
6 | top: 0;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | z-index: 21;
11 | opacity: 0;
12 | visibility: hidden;
13 | transition: 0.2s;
14 |
15 | display: flex;
16 | justify-content: center;
17 |
18 | .input-box {
19 | background-color: var(--body-bg-color);
20 | display: flex;
21 | width: 40%;
22 | flex-direction: column;
23 | padding: 20px 20px;
24 | border-radius: 10px;
25 | margin-top: 20px;
26 | height: min-content;
27 |
28 | @include small {
29 | width: 90%;
30 | }
31 |
32 | .zust-form-el {
33 | flex-direction: column;
34 |
35 | > .zust-input:not(.zust-hidden) {
36 | display: block !important;
37 | }
38 | }
39 | }
40 |
41 | &.visible {
42 | visibility: visible;
43 | opacity: 1;
44 | }
45 | }
46 |
47 | @import 'docsearch/main';
48 |
49 | .algolia-autocomplete {
50 | display: block !important;
51 | width: 100%;
52 | }
53 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/ko-fi.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
8 |
--------------------------------------------------------------------------------
/pages/b/browserSync.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const chokidar = require('chokidar');
4 | const browserSync = require('browser-sync').create('default');
5 |
6 | const zustycss = path.resolve(__dirname, '../../dist/zusty.css');
7 |
8 | browserSync.init({
9 | port: 2703,
10 | server: {
11 | baseDir: './public',
12 | serveStaticOptions: {
13 | extensions: ['html']
14 | }
15 | },
16 | callbacks: {
17 | ready: (err, bs) => {
18 | bs.addMiddleware('/dist/zusty.css', (req, res) => {
19 | res.writeHead(200, {
20 | 'Content-Type': 'text/css'
21 | });
22 | fs.createReadStream(zustycss).pipe(res)
23 | });
24 |
25 | bs.addMiddleware('*', (req, res) => {
26 | res.writeHead(404, {
27 | 'Content-Type': 'text/html'
28 | });
29 | res.write(fs.readFileSync('./public/404.html'));
30 | res.end()
31 | })
32 | }
33 | }
34 | });
35 |
36 | chokidar.watch(zustycss).on('change', () => browserSync.reload('*.css'));
37 |
38 | browserSync.watch('./public/**/*').on('change', browserSync.reload);
39 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # The MIT License
2 |
3 | Copyright (c) 2020 Sarsa Murmu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Material Icons';
3 | font-style: normal;
4 | font-weight: 400;
5 | font-display: block;
6 | src: url('material-icons.woff2') format('woff2');
7 | }
8 |
9 | @font-face {
10 | font-family: 'Varela Round';
11 | font-style: normal;
12 | font-weight: 400;
13 | font-display: swap;
14 | src: url('varela-round.ttf') format('truetype');
15 | }
16 |
17 | @font-face {
18 | font-family: 'Lexend';
19 | font-style: normal;
20 | font-weight: 400;
21 | font-display: swap;
22 | src: url('lexend.ttf') format('truetype');
23 | }
24 |
25 | @font-face {
26 | font-family: "JetBrains Mono";
27 | font-style: normal;
28 | font-weight: 400;
29 | font-display: swap;
30 | src: url('jetbrains-mono.ttf') format('truetype');
31 | }
32 |
33 | .material-icons {
34 | font-family: 'Material Icons';
35 | font-weight: normal;
36 | font-style: normal;
37 | font-size: 24px;
38 | line-height: 1;
39 | letter-spacing: normal;
40 | text-transform: none;
41 | display: inline-block;
42 | white-space: nowrap;
43 | word-wrap: normal;
44 | direction: ltr;
45 | -webkit-font-feature-settings: 'liga';
46 | -webkit-font-smoothing: antialiased;
47 | }
48 |
--------------------------------------------------------------------------------
/pages/src/docs/elements/progress.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Progress Bar
3 | ---
4 |
5 | # Progress Bar
6 | Compact progress bar.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 |
16 | ```
17 | ---
18 |
19 |
20 | ## Usage
21 | Spinners behave like font icons. You can change colors, sizes etc. easily. Just wrap it inside of icon container.
22 |
23 | ---
24 |
25 |
26 | ## Styles
27 | There are few spinners that you can use. Use any of them.
28 |
29 | ```html {snippet}
30 |
31 |
33 |
36 |
38 |
41 |
43 |
46 |
48 |
51 |
53 |
56 |
58 | ```
59 | ---
60 |
61 |
62 | ## Size and Color
63 | They are icons. So, the features icon supports, it supports them too.
64 |
65 | ```html {snippet}
66 |
67 |
69 | ```
70 |
--------------------------------------------------------------------------------
/pages/src/docs/elements/avatar.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Avatar
3 | ---
4 |
5 | # Avatar
6 | Avatar for displaying as profile picture.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 | FX
14 | ```
15 | ---
16 |
17 |
18 | ## Colors
19 | Avatar has all theme colors. Use any of them.
20 |
21 | ```html {snippet}
22 | SM
23 | SM
24 | SM
25 | SM
26 | SM
27 | ```
28 | ---
29 |
30 |
31 | ## Sizes
32 | There are extra two sizes, use them by adding class `zust-large`{.class} or `zust-small`{.class}.
33 |
34 | ```html {snippet}
35 | SM
36 | NM
37 | LG
38 | ```
39 | ---
40 |
41 |
42 | ## Icon
43 | You can even put icon in avatar.
44 |
45 | ```html {snippet}
46 |
47 |
48 | face
49 |
50 |
51 | ```
52 |
53 |
54 | ## Image
55 | You can put image inside of an avatar.
56 |
57 | ```html {snippet}
58 |
59 |
61 | ```
62 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/footer.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins
2 |
3 | div.socialize
4 | hr.h(divider)
5 | h3 Support us by
6 | a.zust-btn.zust-custom.zust-bg-github(class='zust-fullwidth@until-large' href='https://github.com/sarsamurmu/zusty' rel='noopener' target='_blank')
7 | span.zust-icon
8 | span.fa.fa-star
9 | span Starring it on GitHub
10 | a.zust-btn.zust-custom(class='zust-fullwidth@until-large' style='background-color: #7289DA' rel='noopener' target='_blank' href='https://discord.gg/cVDFTjt')
11 | span.zust-icon
12 | span.fab.fa-discord
13 | span Joining our Discord Server
14 | //-
15 | br
16 | h3 Help us by sharing
17 | a.zust-btn.zust-custom(class='zust-fullwidth@until-large' style='background-color: #FF4500' rel='noopener' target='_blank' href='https://www.reddit.com/submit?url=https%3A%2F%2Fzustycss.com&title=Zusty%20CSS%20-%20Power%20Packed%20CSS%20Framework%20for%20Building%20Beautiful%20Interfaces.%20Try%20it%20Now.')
18 | span.zust-icon
19 | span.fab.fa-reddit
20 | span Reddit Post
21 | a.zust-btn.zust-custom.zust-bg-twitter(class='zust-fullwidth@until-large' rel='noopener' target='_blank' href='https://twitter.com/intent/tweet?text=Zusty+CSS+-+Power+Packed+CSS+Framework+for+Building+Beautiful+Interfaces.+Try+it+Now.&url=https://zustycss.com&related=sarsamurmu')
22 | span.zust-icon
23 | span.fab.fa-twitter
24 | span Sharing on Twitter
25 | br
26 |
27 | +footer
28 |
--------------------------------------------------------------------------------
/pages/src/docs/form/range.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Range
3 | ---
4 |
5 | # Range
6 | A simple range.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 | sample code
24 | ```html {raw}
25 | Your HTML
26 | ```
27 |
50 | ```js {execute}
51 | // Do whatever here using JavaScript.
52 | // But finally return a String;
53 | // Like
54 | let htmlStr = ``;
55 |
56 | for (let i = 0; i < 10; i++) {
57 | htmlStr += `I am nth ${i}
`
58 | }
59 |
60 | return htmlStr;
61 | ```
62 |
34 |
35 |
38 |
39 | `;
40 | });
41 |
42 | window.copyID = (source) => {
43 | var item = document.getElementById(source);
44 | var text = document.createElement('textarea');
45 | document.body.appendChild(text);
46 | text.value = item.textContent;
47 | console.log("Copied: \n \n" + item.textContent);
48 | text.select();
49 | document.execCommand('copy', false);
50 | text.remove();
51 | }
52 | })
53 |
--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # Zusty Pages
2 | [](https://app.netlify.com/sites/zustycss/deploys)
3 |
4 | Includes all page for https://zustycss.com.
5 |
6 | ## Usage
7 | Start Development
8 | ```bash
9 | npm start
10 | ```
11 | Build all pages
12 | ```bash
13 | npm run build
14 | ```
15 |
16 | ## Document type
17 | Pug is used as preprocessor for HTML pages. For Documentation Markdown is used, markdown is completely configurable that's why you can see some new syntax in markdown. You can find more about extra markdown syntax [here](https://github.com/sarsamurmu/zusty/blob/master/pages/Syntax.md).
18 |
19 | ## Files
20 | ### Docs
21 | All file for a documentation page are parted over `src/docs/_includes/` as pug files and `src/docs/base.pug` file implements all those parted files. All documentation pages are written in markdown files and processed using [markdown-it](https://github.com/markdown-it/markdown-it/).
22 |
23 | `src/docs/navigationData.json` includes the data for sidenav of documentation pages.
24 |
25 | `src/docs/swBase.js` is the base version of service worker, which is injected with website's files' data for creating usable service worker.
26 |
27 | ### Scripts
28 | `src/scripts/` include all script files. These are compiled with webpack for browser and saved to `public/scripts`.
29 |
30 | ### Stylesheets
31 | `src/stylesheets` includes all stylesheets. All files are written in SCSS, these are processed by Sass and saved to `public/stylesheets`. `src/stylesheets/imports` includes all SCSS file which are imported by other SCSS files.
32 |
33 | ### Copied Files
34 | All files inside of `tocopy` directory don't need processing, so they just get copied to the `public` directory.
35 |
36 | ### Build Files
37 | All build scripts can be found on `b` directory. The `config.js` file in this directory contains some necessary data like `debug` and `version` number.
38 |
--------------------------------------------------------------------------------
/pages/src/docs/general/build-variants.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Build Variants
3 | ---
4 |
5 | # Build Variants
6 | There are three build variants of Zusty CSS.
7 |
8 | Variants are -
9 | - Normal
10 | - Prefixless
11 | - CSS Variable - Parted
12 |
13 | ---
14 |
15 | ## Normal
16 | Normal variant is the base version of Zusty CSS. If you're following getting started guide then you're probably using normal version.
17 | ### Usage
18 | You can simply use it using jsDelivr CDN.
19 | ```html {nolaunch}
20 | Try changing the theme
16 | }}
17 |
18 |
19 |
I've my own theme, yay!
20 |
Button
21 |
22 |
24 |
25 |
26 |
I've my own power
27 |
Change theme
31 |
32 | If you want to change theme of your whole HTML then add this attribute to your page's `html`{.tag} tag.
33 |
34 |
53 |
--------------------------------------------------------------------------------
/scss/form/range.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $primary-transition: var(--primary-transition);
3 | $range-border-radius: var(--range-border-radius);
4 | $range-height: var(--range-height);
5 | $range-thumb-border-radius: var(--range-thumb-border-radius);
6 | $range-thumb-height: var(--range-thumb-height);
7 | $range-thumb-width: var(--range-thumb-width);
8 | }
9 |
10 | .#{$prefix}range {
11 | appearance: none;
12 | background-color: var(--range-bg-color);
13 | height: $range-height;
14 | border-radius: $range-border-radius;
15 | transition: $primary-transition;
16 |
17 | @mixin base {
18 | appearance: none;
19 | background-color: var(--primary-color);
20 | cursor: pointer;
21 | border-style: none;
22 | border-radius: 6px;
23 | height: $range-thumb-height;
24 | width: $range-thumb-width;
25 | border-radius: $range-thumb-border-radius;
26 | }
27 |
28 | &::-webkit-slider-thumb {
29 | @include base;
30 | }
31 |
32 | &::-moz-range-thumb {
33 | @include base;
34 | }
35 |
36 | &.#{$prefix}rounded {
37 | &::-webkit-slider-thumb {
38 | border-radius: 999999px;
39 | }
40 |
41 | &::-moz-range-thumb {
42 | border-radius: 999999px;
43 | }
44 | }
45 |
46 | &.#{$prefix}disabled, &[disabled] {
47 | background-color: var(--item-disabled-bg-color);
48 |
49 | &::-webkit-slider-thumb {
50 | background-color: var(--item-disabled-fg-color);
51 | cursor: default;
52 | }
53 |
54 | &::-moz-range-thumb {
55 | background-color: var(--item-disabled-fg-color);
56 | cursor: default;
57 | }
58 | }
59 |
60 | // Colors
61 | @each $name, $color in $item-colors {
62 | @if $name {
63 | &.#{$prefix}#{$name} {
64 | &::-webkit-slider-thumb {
65 | background-color: $color;
66 | }
67 |
68 | &::-moz-range-thumb {
69 | background-color: $color;
70 | }
71 | }
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/pages/src/docs/elements/tooltip.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tooltip
3 | ---
4 |
5 | # Tooltip
6 | Better tooltip for better UX.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 | Tooltip
14 | ```
15 | ---
16 |
17 |
18 | ## Usage
19 | You can use this tooltip simply by adding attribute `zust-tooltip`{.attr} and setting this attribute's value to tooltip text. This works in almost every elements.
20 |
21 | ---
22 |
23 |
24 | ## Positions
25 | To set position of tooltip add attribute `{attr}(zust-tooltip-position)="{comment}(position)"`.
26 |
27 | The positions are `top`{.class}, `bottom`{.class}, `left`{.class}, `right`{.class}, `top-left`{.class}, `top-right`{.class}, `bottom-left`{.class}, `bottom-right`{.class}.
28 |
29 | ```html {snippet}
30 | Tooltip
31 | ```
32 | ---
33 |
34 |
35 | ## Colors
36 | You can set tooltip color to any of theme color. Add attribute `{attr}(zust-tooltip-type)="{comment}(theme-color-name)"`.
37 |
38 | ```html {snippet}
39 | Success Tooltip
40 | ```
41 | ---
42 |
43 |
44 | ## Custom activation
45 | You can activate the tooltip by adding class `zust-tooltip-active`{.class}.
46 |
47 | ---
48 |
49 |
50 | ## Visibility based on breakpoint
51 | You can set visibility tooltip based on breakpoint, Your tooltip will be only visible on that breakpoint. For this add attribute `{attr}(zust-tooltip-visibility)="{comment}(breakpoint-name)"`. Get breakpoint names from [Here](../general/breakpoints).
52 |
53 | ```html {snippet}
54 | Small Breakpoint Tooltip 🤔
55 | ```
56 |
--------------------------------------------------------------------------------
/pages/src/docs/container/element-group.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Element Group
3 | ---
4 |
5 | # Element Group
6 | Container for grouping up elements.
7 |
8 | ---
9 |
10 |
11 | You can make a group of items by using element group. To use it, make `div`{.tag} and add class `zust-el-group`{.class}. Then place the elements inside of that `div`{.tag}.
12 |
13 | ```html {snippet}
14 |
15 | Item 1
16 | Item 2
17 | Item 3
18 | Item 4
19 |
20 | ```
21 |
22 | You can also group item's vertically, just add class `zust-vertical`{.class} to the `div`{.tag}.
23 |
24 | ```html {snippet}
25 |
26 | Item 1
27 | Item 2
28 | Item 3
29 | Item 4
30 |
31 | ```
32 |
33 | You can even group up dropdowns as well.
34 |
35 | ```html {snippet}
36 |
37 |
Open
38 |
39 |
40 |
41 |
43 |
44 |
45 | Notepad Atom
48 |
49 |
52 |
53 |
54 |
55 |
57 |
58 |
59 | Item 1 Item Blah
62 |
63 |
After
64 |
",
25 | "license": "MIT",
26 | "dependencies": {
27 | "autoprefixer": "^9.7.4",
28 | "browser-sync": "^2.26.7",
29 | "chalk": "^3.0.0",
30 | "cheerio": "^1.0.0-rc.3",
31 | "chokidar": "^3.3.1",
32 | "codemirror": "^5.52.2",
33 | "concurrently": "^5.1.0",
34 | "docsearch.js": "^2.6.3",
35 | "fuse.js": "^5.0.7-beta",
36 | "glob": "^7.1.6",
37 | "html-minifier": "^4.0.0",
38 | "markdown-it": "^10.0.0",
39 | "markdown-it-attrs": "^3.0.2",
40 | "markdown-it-container": "^2.0.0",
41 | "markdown-yaml-metadata-parser": "^2.0.4",
42 | "node-sass": "^4.13.1",
43 | "postcss": "^7.0.27",
44 | "prismjs": "^1.19.0",
45 | "pug": "^2.0.4",
46 | "sass.js": "^0.11.1",
47 | "terser-webpack-plugin": "^2.3.5",
48 | "webpack": "^4.42.0",
49 | "webpack-cli": "^3.3.11",
50 | "workbox-cli": "^5.1.1",
51 | "workbox-window": "^5.1.1",
52 | "zusty": "^1.2.0"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/pages/src/docs/components/nav.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Nav
3 | ---
4 |
5 | # Nav
6 | Alternative form of navigation.
7 |
8 | ---
9 |
10 | ## Structure
11 | ```html {snippet}
12 |
13 | Item 1
14 | Item 2
15 | Item 3
16 |
17 | Item 4
18 |
19 | Item 4.1
20 | Item 4.2
21 | Item 4.3
22 | Item 4.4
23 |
24 |
25 | Item 5
26 | Item 6
27 |
28 | ```
29 | ---
30 |
31 |
32 | ## Selection
33 | To set an item selected, just add attribute `selected`{.attr} or class `zust-selected`{.class} to `li`{.tag}.
34 |
35 | You need JavaScript to toggle between items. Here's an example.
36 |
37 | ```html {snippet}
38 |
39 | Item 1
40 | Item 2
41 | Item 3
42 |
43 | Item 4
44 |
45 | Item 4.1
46 | Item 4.2
47 | Item 4.3
48 | Item 4.4
49 |
50 |
51 | Item 5
52 | Item 6
53 |
54 |
55 | noRender{{}}
69 | ```
70 |
71 |
72 |
84 |
--------------------------------------------------------------------------------
/pages/src/docs/general/build-a-theme.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Build a Theme
3 | ---
4 |
5 | # Build a Theme
6 | There two built-in themes (light & dark), you can customize them by using SCSS variables. Even you can make a separate theme and use it on any site built on Zusty. Let's see how we can make a theme.
7 |
8 | ### Additional Requirements
9 | None
10 |
11 | ---
12 |
13 | ## Building a Theme
14 | ### 1. Getting the file
15 | Download [theme.css](https://cdn.jsdelivr.net/npm/zusty@0.0.2/dist/theme.css) to get the base theme with all variables.
16 | ### 2. Editing `theme.css`{.attr}
17 | `theme.css`{.attr} looks like this -
18 | ```css
19 | [zust-theme="light"] {
20 | --primary-color: #00b881;
21 | --primary-text-color: #FFFFFF;
22 | --primary-hovered-color: #00a876;
23 | --primary-color-light: rgba(0, 184, 129, 0.3);
24 |
25 | /* More variables */
26 | }
27 | ```
28 | You've to change the selector `{attr}(zust-theme)="{string}(light)"` to whatever selector you want. We will use this selector to apply our theme.
29 |
30 | Each CSS variables stores a color for theme, you've to change them to match your theme.
31 |
32 | If we change few variables, our file looks like this.
33 | ```css
34 | /* Used custom selector. Any element with attribute `theme="bluish"` can use this theme. */
35 |
36 | [theme="bluish"] {
37 |
38 | /* Changed Colors */
39 | --primary-color: #03a9f4;
40 | --primary-text-color: #FFFFFF;
41 | --primary-hovered-color: #01a4ef;
42 | --primary-color-light: hsla(199, 99%, 47%, 0.16);
43 |
44 | /* More Variables */
45 | }
46 | ```
47 | Like this, change all colors to the color you want for your theme.
48 |
49 | ---
50 |
51 | ## Using the Theme
52 | Using theme is easy, just link the theme CSS file to HTML file and use the selector you determined for your theme in HTML Element.
53 |
54 | Here's an example.
55 | ```html {nolaunch}
56 |
57 |
58 |
59 |
60 |
61 | My page with new theme
65 | How I look like?
66 |
67 |
68 | ```
69 |
--------------------------------------------------------------------------------
/scss/components/card.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $card-border-radius: var(--card-border-radius);
3 | $card-border-width: var(--card-border-width);
4 | $card-box-shadow: var(--card-box-shadow);
5 | $card-hover-translate: var(--card-hover-translate);
6 | $card-hovered-box-shadow: var(--card-hovered-box-shadow);
7 | $card-landscape-max-width: car(--card-landscape-max-width);
8 | $card-landscape-min-width: car(--card-landscape-min-width);
9 | $card-margin: var(--card-margin);
10 | $card-max-width: var(--card-max-width);
11 | $card-min-width: var(--card-min-width);
12 | $card-padding: var(--card-padding);
13 | $primary-transition: var(--primary-transition);
14 | }
15 |
16 | .#{$prefix}card {
17 | background-color: var(--card-bg-color);
18 | border-color: var(--card-border-color);
19 | box-sizing: content-box;
20 | padding: $card-padding;
21 | margin: $card-margin;
22 | max-width: $card-max-width;
23 | min-width: $card-min-width;
24 | box-shadow: $card-box-shadow;
25 | border-radius: $card-border-radius;
26 | display: flex;
27 | flex-direction: column;
28 | transition: $primary-transition;
29 |
30 | &.#{$prefix}flat {
31 | border-style: solid;
32 | box-shadow: 0 0 $transparent;
33 | border-width: $card-border-width;
34 | }
35 |
36 | &.#{$prefix}landscape {
37 | max-width: $card-landscape-max-width;
38 | min-width: $card-landscape-min-width;
39 | }
40 |
41 | h1, h2, h3, h4, h5, h6 {
42 | margin: 10px 0;
43 | }
44 |
45 | footer {
46 | margin: 0 -10px 0 -10px;
47 | display: flex;
48 | justify-content: flex-start;
49 | align-items: flex-end;
50 | flex-direction: row-reverse;
51 | flex-wrap: wrap;
52 | flex-grow: 1;
53 |
54 | @include clearfix;
55 | }
56 |
57 | &.#{$prefix}hoverable {
58 | &:hover, &.#{$prefix}hovered, &:focus-within {
59 | border-color: $transparent;
60 | transform: translateY($card-hover-translate);
61 | box-shadow: $card-hovered-box-shadow;
62 | }
63 | }
64 |
65 | &.#{$prefix}rtl {
66 | text-align: right;
67 |
68 | footer {
69 | &:not(.#{$prefix}center):not(.#{$prefix}text-center) {
70 | * {
71 | float: left;
72 | }
73 | }
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/pages/src/docs/container/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Container Basic
3 | ---
4 |
5 | # Container
6 | Container built on flexbox for flexible layouts.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 |
15 | 1
16 | 2
17 | 3
18 | 4
19 | 5
20 | 6
21 | 7
22 | 8
23 | 9
24 | 10
25 | 11
26 | 12
27 | 13
28 | 14
29 | 15
30 | 16
31 | 17
32 | 18
33 | 19
34 | 20
35 |
36 | ```
37 | ---
38 |
39 |
40 | ## Usage
41 | You can use container for containing bunch of items. Items will break whenever necessary.
42 |
43 | ---
44 |
45 |
46 | ## Aligning items
47 | You can simply align items inside of container. Add class `zust-v-centered`{.class} for aligning items Vertically Center and `zust-h-centered`{.class} for aligning items horizontally center and `zust-f-centered`{.class} for aligning items both horizontally and vertically center.
48 |
49 | ### Horizontally Centered
50 | ```html {snippet}
51 |
52 | Button
53 |
54 | ```
55 |
56 | ### Vertically Centered
57 | ```html {snippet}
58 |
59 | Button
60 |
61 | ```
62 |
63 | ### Full Centered
64 | ```html {snippet}
65 |
66 | Button
67 |
68 | ```
69 | ---
70 |
71 |
72 | ## More Positions
73 | You can achieve more positions by using [Flexbox Utilities](../helpers/#flexbox).
74 |
--------------------------------------------------------------------------------
/scss/components/pagination.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $pagination-item-border-radius: var(--pagination-item-border-radius);
3 | $pagination-item-border-width: var(--pagination-item-border-width);
4 | $pagination-item-margin: var(--pagination-item-margin);
5 | $pagination-item-padding: var(--pagination-item-padding);
6 | $primary-transition: var(--primary-transition);
7 | }
8 |
9 | .#{$prefix}pagination {
10 | display: flex;
11 | justify-content: space-between;
12 | align-items: center;
13 | flex-wrap: wrap;
14 |
15 | & > a:nth-child(2) {
16 | order: 3;
17 | }
18 |
19 | @include small {
20 | margin-bottom: 20px;
21 |
22 | & > a:nth-child(1) {
23 | order: 2;
24 | flex-grow: 1;
25 | flex-basis: 0;
26 | }
27 | & > a:nth-child(2) {
28 | order: 3;
29 | flex-grow: 1;
30 | flex-basis: 0;
31 | }
32 | }
33 |
34 | & > .#{$prefix}items {
35 | display: inline-flex;
36 | justify-content: center;
37 | flex-wrap: wrap;
38 | padding: 0;
39 |
40 | @include small {
41 | flex-basis: 100%;
42 | }
43 |
44 | > li {
45 | display: inline-flex;
46 | align-items: center;
47 | justify-content: center;
48 | margin: $pagination-item-margin;
49 |
50 | > a[item], > a.#{$prefix}item {
51 | color: var(--pagination-item-text-color);
52 | display: inline-flex;
53 | border-style: solid;
54 | border-color: var(--pagination-item-border-color);
55 | background-color: var(--pagination-item-bg-color);
56 | cursor: pointer;
57 | user-select: none;
58 | padding: $pagination-item-padding;
59 | border-width: $pagination-item-border-width;
60 | border-radius: $pagination-item-border-radius;
61 | transition: $primary-transition;
62 |
63 | &:hover, &:focus {
64 | border-color: var(--pagination-item-hovered-border-color);
65 | }
66 |
67 | &[active], &.#{$prefix}active {
68 | background-color: var(--pagination-item-active-bg-color);
69 | color: var(--pagination-item-active-text-color);
70 | border-color: var(--pagination-item-active-border-color);
71 | cursor: default;
72 | }
73 | }
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/pages/b/renderPug.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const glob = require('glob');
4 | const chokidar = require('chokidar');
5 | const chalk = require('chalk');
6 | const browserSync = require('browser-sync');
7 | const config = require('./config');
8 |
9 | const pug = require('pug');
10 | const minifyHtml = require('html-minifier').minify;
11 | const args = process.argv.splice(2, process.argv.length - 2);
12 |
13 | const pugFilePath = './src/**/*.pug';
14 | const pugImportsPath = ['./src/docs/_includes/*.pug', './src/docs/base.pug', './src/**/_*.pug'];
15 | const ignoredPaths = ['./src/docs/_includes/*', './src/docs/base.pug', './src/_includes/*', './src/**/_*'];
16 |
17 | const renderFile = (filePath) => {
18 | const outputPath = filePath.replace('src', 'public').replace('.pug', '.html');
19 |
20 | config.navItems = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../src/docs/navigationData.json')).toString());
21 | config.canonical = outputPath.replace(/(\.\/)?public/g, 'https://zustycss.com').replace(/\\/g, '/').replace(/(\.html|\/index)/g, '');
22 |
23 | fs.mkdirSync(path.dirname(outputPath), { recursive: true });
24 |
25 | fs.writeFileSync(outputPath, minifyHtml(pug.compileFile(filePath)(config).replace(/\#\{(.*?)\}/g, (m, offset, s) => config[offset.trim()]), {
26 | minifyJS: true,
27 | minifyCSS: true
28 | }));
29 |
30 | console.log(chalk.green(`Rendered ${filePath} to ${outputPath}\n`));
31 | }
32 |
33 | if (args.includes('-w')) {
34 | chokidar.watch(pugFilePath, {
35 | ignored: ignoredPaths
36 | }).on('change', (filePath) => setTimeout(() => renderFile(filePath), 100)).on('ready', () => console.log(chalk.magenta(`Watching Pug files for change\n`)));
37 |
38 | chokidar.watch(pugImportsPath).on('change', (filePath) => setTimeout(() => {
39 | console.log(chalk.blue(`Import changed ${filePath}\n`));
40 |
41 | if (browserSync.has('default')) browserSync.get('default').pause();
42 |
43 | glob.sync(pugFilePath, { ignore: ignoredPaths }).forEach(renderFile);
44 |
45 | if (browserSync.has('default')) browserSync.get('default').resume();
46 | }, 100))
47 | } else {
48 | console.log(chalk.magenta(`Rendering Pug files\n`));
49 |
50 | glob.sync(pugFilePath, { ignore: ignoredPaths }).forEach(renderFile);
51 | }
52 |
--------------------------------------------------------------------------------
/pages/src/docs/components/breadcrumb.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Breadcrumb
3 | ---
4 |
5 | ## Breadcrumb
6 | Basic Breadcrumb.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 |
29 |
30 | ```
31 | ---
32 |
33 |
34 | ## Styles
35 | There are few styles that you can use with breadcrumb. Add any of these classes `zust-dot-separator`{.class}, `zust-pipe-separator`{.class}, `zust-pipe-separator`{.class}, `zust-angle-separator`{.class}, `zust-dash-separator`{.class}.
36 |
37 | ```html {snippet}
38 |
39 |
45 |
46 |
47 |
48 |
54 |
55 |
56 |
57 |
63 |
64 |
65 |
66 |
72 |
73 |
74 |
75 |
81 |
82 | ```
83 |
--------------------------------------------------------------------------------
/scss/core/colors.scss:
--------------------------------------------------------------------------------
1 | $transparent: rgba(255, 255, 255, 0);
2 | $stransparent: rgba(144, 144, 144, 0.1);
3 | $text-dark: #404040;
4 | $medium: rgba(144, 144, 144, 0.1);
5 | $white: #FFFFFF;
6 | $black: #000000;
7 | $red: #F44336;
8 | $pink: #E91E63;
9 | $purple: #9C27B0;
10 | $deep-purple: #673AB7;
11 | $indigo: #3F51B5;
12 | $blue: #007fff;
13 | $light-blue: #03A9F4;
14 | $cyan: #00BCD4;
15 | $teal: #009688;
16 | $green: #4CAF50;
17 | $light-green: #8BC34A;
18 | $lime: #CDDC39;
19 | $yellow: #FFEB3B;
20 | $amber: #FFC107;
21 | $orange: #FF9800;
22 | $deep-orange: #FF5722;
23 | $brown: #795548;
24 | $grey: #9E9E9E;
25 | $light-grey: #FAFAFA;
26 | $blue-grey: #607D8B;
27 | $turquoise: #1ABC9C;
28 | $green-sea: #16A085;
29 | $emerald: #2ECC71;
30 | $nephritis: #27AE60;
31 | $peter-river: #3498DB;
32 | $alizarin: #E74C3C;
33 |
34 | // Brands
35 | $github: #24292e;
36 | $facebook: #1877f2;
37 | $twitter: #38A1F3;
38 | $linkedin: #0077B5;
39 | $youtube: #ff0000;
40 |
41 | // List
42 | $colors: (
43 | ('red', $red, textForBg($red)),
44 | ('pink', $pink, textForBg($pink)),
45 | ('purple', $purple, textForBg($purple)),
46 | ('deep-purple', $deep-purple, textForBg($deep-purple)),
47 | ('indigo', $indigo, textForBg($indigo)),
48 | ('blue', $blue, textForBg($blue)),
49 | ('light-blue', $light-blue, textForBg($light-blue)),
50 | ('cyan', $cyan, textForBg($cyan)),
51 | ('teal', $teal, textForBg($teal)),
52 | ('green', $green, textForBg($green)),
53 | ('light-green', $light-green, textForBg($light-green)),
54 | ('lime', $lime, textForBg($lime)),
55 | ('yellow', $yellow, textForBg($yellow)),
56 | ('amber', $amber, textForBg($amber)),
57 | ('orange', $orange, textForBg($orange)),
58 | ('deep-orange', $deep-orange, textForBg($deep-orange)),
59 | ('brown', $brown, textForBg($brown)),
60 | ('grey', $grey, textForBg($grey)),
61 | ('light-grey', $light-grey, textForBg($light-grey)),
62 | ('blue-grey', $blue-grey, textForBg($blue-grey)),
63 | ('white', $white, textForBg($white)),
64 | ('black', $black, textForBg($black)),
65 | ('transparent', $transparent, var(--text-color-primary)),
66 |
67 | // Brands
68 | ('github', $github, textForBg($github)),
69 | ('facebook', $facebook, textForBg($facebook)),
70 | ('twitter', $twitter, textForBg($twitter)),
71 | ('linkedin', $linkedin, textForBg($linkedin)),
72 | ('youtube', $youtube, textForBg($youtube))
73 | );
74 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/codepen.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Layer 1
4 |
7 |
9 |
10 |
13 |
14 |
16 |
17 |
--------------------------------------------------------------------------------
/pages/src/scripts/worker.js:
--------------------------------------------------------------------------------
1 | import { Workbox } from 'workbox-window';
2 |
3 | window.registerWorker = (path) => {
4 | const toasts = new DOMParser().parseFromString(`
5 |
6 |
7 |
8 |
9 |
12 |
13 |
Zusty Pages are Now Available offline.
14 |
16 |
17 |
18 |
19 |
22 |
23 |
New or Updated content available. Refreshing...
24 |
3 |
Zusty CSS
5 |
6 |
7 |
8 | A CSS Framework for testing out my web development skills in 2019.
9 | Read the Docs
11 |
12 |
13 |
14 | ## Status
15 | [](https://github.com/sarsamurmu/zusty/actions?workflow=Node+CI)
16 | [](https://www.npmjs.com/package/zusty)
17 |
18 | ## Usage
19 | You can use it in many ways. Here's some.
20 |
21 | ### npm
22 | You can simply install it via npm
23 | ```shell
24 | npm i zusty
25 | ```
26 | Then in ``, add this to top of your CSS Files
27 | ```html
28 | ` with the version you want to use. Latest version is [](https://www.npmjs.com/package/zusty)
33 | ```html
34 |
35 | Base Page
60 |
61 |
62 | Base Page
63 |
64 |
65 | ```
66 |
67 | ## License
68 | Zusty CSS is Licensed under the [MIT License](https://github.com/sarsamurmu/zusty/blob/master/LICENSE.md), webpages under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/).
69 |
--------------------------------------------------------------------------------
/scss/elements/spinner.scss:
--------------------------------------------------------------------------------
1 | .#{$prefix}spinner {
2 | background-color: currentColor;
3 | border-radius: 20%;
4 | animation: spin-spinner 0.8s linear infinite;
5 | animation-timing-function: ease-in-out;
6 | }
7 |
8 | @keyframes spin-spinner {
9 | 0% {
10 | transform: scale(0.6);
11 | }
12 | 50% {
13 | transform: scale(1) rotate(180deg);
14 | }
15 | 100% {
16 | transform: scale(0.6) rotate(360deg);
17 | }
18 | }
19 |
20 | .#{$prefix}spinner-2 {
21 | border-style: solid;
22 | border-radius: 100%;
23 | border-width: 2px;
24 | border-color: currentColor;
25 | border-left-color: $transparent;
26 | border-bottom-color: $transparent;
27 | animation: spinner-2 0.7s linear infinite;
28 | }
29 |
30 | @keyframes spinner-2 {
31 | 0% {
32 | transform: rotate(0deg);
33 | }
34 | 100% {
35 | transform: rotate(360deg);
36 | }
37 | }
38 |
39 | .#{$prefix}spinner-3 {
40 | border-style: solid;
41 | border-width: 2px;
42 | border-radius: 100%;
43 | animation: spinner-3 0.8s linear infinite;
44 | }
45 |
46 | @keyframes spinner-3 {
47 | 0% {
48 | transform: scale(0);
49 | }
50 | 30% {
51 | opacity: 1;
52 | }
53 | 100% {
54 | transform: scale(1);
55 | opacity: 0;
56 | }
57 | }
58 |
59 | .#{$prefix}spinner-4 {
60 | background-color: currentColor;
61 | border-radius: 100%;
62 | animation: spinner-4 0.8s linear infinite;
63 | }
64 |
65 | @keyframes spinner-4 {
66 | 0% {
67 | transform: scale(0);
68 | }
69 | 30% {
70 | opacity: 1;
71 | }
72 | 100% {
73 | transform: scale(1);
74 | opacity: 0;
75 | }
76 | }
77 |
78 | .#{$prefix}spinner-5 {
79 | background-color: currentColor;
80 | animation: spinner-5 1s infinite ease-in-out;
81 | border-radius: 15%;
82 | }
83 |
84 | @keyframes spinner-5 {
85 | 0% {
86 | transform: perspective(calc(var(--icon-size) * 2)) rotateX(0deg) rotateY(0deg);
87 | }
88 | 50% {
89 | transform: perspective(calc(var(--icon-size) * 2)) rotateX(-180.1deg) rotateY(0deg);
90 | }
91 | 100% {
92 | transform: perspective(calc(var(--icon-size) * 2)) rotateX(-180deg) rotateY(-179.9deg);
93 | }
94 | }
95 |
96 | .#{$prefix}spinner-6 {
97 | background-color: currentColor;
98 | border-radius: 15%;
99 | animation: spinner-6 1.6s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
100 | }
101 |
102 | @keyframes spinner-6 {
103 | 50% {
104 | border-radius: 50%;
105 | transform: scale(0.5) rotate(360deg);
106 | }
107 | 100% {
108 | transform: scale(1) rotate(720deg);
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/scss/components/badge.scss:
--------------------------------------------------------------------------------
1 | $padding-first: 10px;
2 | $padding-second: 5px;
3 |
4 | @if $css-variable-enabled {
5 | $badge-border-radius: var(--badge-border-radius);
6 | $badge-font-size: var(--badge-font-size);
7 | $primary-transition: var(--primary-transition);
8 | }
9 |
10 | span.#{$prefix}badge {
11 | user-select: none;
12 | display: inline-block;
13 | $padding: 4px;
14 | $extra: 4px;
15 | padding: $padding ($padding + $extra) $padding ($padding + $extra);
16 | background-color: var(--badge-last-part-bg-color);
17 | color: var(--badge-only-part-text-color);
18 | margin: {
19 | right: 8px;
20 | bottom: 8px;
21 | }
22 | font-size: $badge-font-size;
23 | border-radius: $badge-border-radius;
24 | transition: $primary-transition;
25 |
26 | &.#{$prefix}outlined, .#{$prefix}badges-outlined & {
27 | background-color: $transparent;
28 | border-style: solid;
29 | border-width: 2px;
30 | border-color: rgba(144, 144, 144, 0.3);
31 | color: var(--text-color-secondary);
32 | }
33 |
34 | .#{$prefix}badges-rounded & {
35 | border-radius: 100000px;
36 | }
37 | }
38 |
39 | div.#{$prefix}badge {
40 | display: inline-flex;
41 | align-items: center;
42 | justify-content: flex-start;
43 | flex-wrap: wrap;
44 | margin: {
45 | right: 8px;
46 | bottom: 8px;
47 | }
48 | white-space: nowrap;
49 |
50 | span {
51 | user-select: none;
52 | padding: 4px;
53 | margin: 0px;
54 | font-size: $badge-font-size;
55 | transition: $primary-transition;
56 | }
57 |
58 | span:only-of-type {
59 | user-select: none;
60 | $padding: 4px;
61 | $extra: 4px;
62 | padding: $padding ($padding + $extra) $padding ($padding + $extra);
63 | background-color: var(--badge-only-part-bg-color);
64 | color: var(--badge-only-part-text-color);
65 | border-radius: $badge-border-radius;
66 | }
67 |
68 | span:first-child:not(:only-of-type) {
69 | padding-left: $padding-first;
70 | padding-right: $padding-second;
71 | background-color: var(--badge-first-part-bg-color);
72 | color: var(--badge-first-part-text-color);
73 | border-radius: $badge-border-radius 0 0 $badge-border-radius;
74 | }
75 |
76 | span:last-child:not(:only-of-type) {
77 | padding-right: $padding-first;
78 | padding-left: $padding-second;
79 | background-color: var(--badge-last-part-bg-color);
80 | color: var(--badge-last-part-text-color);
81 | border-radius: 0 $badge-border-radius $badge-border-radius 0;
82 | }
83 |
84 | &.#{$prefix}rounded, .#{$prefix}badges-rounded & {
85 | overflow: hidden;
86 | border-radius: 100000px;
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/pages/b/renderMd.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const glob = require('glob');
4 | const chokidar = require('chokidar');
5 | const chalk = require('chalk');
6 | const browserSync = require('browser-sync');
7 |
8 | const config = require('./config');
9 |
10 | const pug = require('pug');
11 | const args = process.argv.splice(2, process.argv.length - 2);
12 |
13 | const md = require('markdown-it')({
14 | html: true,
15 | langPrefix: 'lang-',
16 | breaks: true
17 | }).disable('code');
18 | md.use(require('./mdPlugins'));
19 | const metadataParser = require('markdown-yaml-metadata-parser');
20 | const minifyHtml = require('html-minifier').minify;
21 |
22 | const baseFile = './src/docs/base.pug'
23 | const mdFilePath = `./src/docs/**/*.md`;
24 | const pugImportsPath = ['./src/docs/_includes/*.pug', baseFile, './src/_mixins.pug'];
25 |
26 | let pugFunc = pug.compileFile(baseFile);
27 |
28 | const renderFile = (filePath) => {
29 | const outputPath = filePath.replace('src', 'public').replace('.md', '.html');
30 | const canonical = outputPath.replace(/(\.\/)?public/g, 'https://zustycss.com').replace(/\\/g, '/').replace(/(\.html|\/index)/g, '');
31 | const markdown = metadataParser(fs.readFileSync(filePath).toString());
32 | const renderedHTML = md.render(markdown.content.replace(/#{(.*?)}/g, (m, offset, s) => config[offset.trim()]));
33 |
34 | fs.mkdirSync(path.dirname(outputPath), {
35 | recursive: true
36 | });
37 |
38 | fs.writeFileSync(outputPath, minifyHtml(pugFunc({
39 | inner: renderedHTML,
40 | navItems: JSON.parse(fs.readFileSync('./src/docs/navigationData.json').toString()),
41 | ...markdown.metadata,
42 | ...config,
43 | canonical
44 | }), {
45 | minifyJS: true,
46 | minifyCSS: true
47 | }));
48 |
49 | console.log(chalk.green(`Rendered ${filePath} to ${outputPath}\n`));
50 | }
51 |
52 | if (args.includes('-w')) {
53 | chokidar.watch(mdFilePath).on('change', (filePath) => setTimeout(() => renderFile(filePath), 100)).on('ready', () => console.log(chalk.magenta(`Watching Markdown files for change\n`)));
54 |
55 | chokidar.watch(pugImportsPath).on('change', (filePath) => setTimeout(() => {
56 | console.log(chalk.blue(`Import changed ${filePath}\n`));
57 |
58 | if (browserSync.has('default')) browserSync.get('default').pause();
59 |
60 | pugFunc = pug.compileFile(baseFile);
61 |
62 | glob.sync(mdFilePath).forEach(renderFile);
63 |
64 | if (browserSync.has('default')) browserSync.get('default').resume();
65 | }, 100))
66 | } else {
67 | console.log(chalk.magenta(`Rendering Markdown files\n`));
68 |
69 | glob.sync(mdFilePath).forEach(renderFile);
70 | }
71 |
--------------------------------------------------------------------------------
/scss/core/mixins.scss:
--------------------------------------------------------------------------------
1 | // Screen Sizes
2 |
3 | @mixin small {
4 | @media screen and (max-width: $medium-breakpoint - 1px) {
5 | @content;
6 | }
7 | }
8 |
9 | @mixin medium {
10 | @media screen and (min-width: $medium-breakpoint) {
11 | @content;
12 | }
13 | }
14 |
15 | @mixin until-large {
16 | @media screen and (max-width: $large-breakpoint - 1px) {
17 | @content;
18 | }
19 | }
20 |
21 | @mixin only-medium {
22 | @media screen and (min-width: $medium-breakpoint) and (max-width: $large-breakpoint - 1px) {
23 | @content;
24 | }
25 | }
26 |
27 | @mixin large {
28 | @media screen and (min-width: $large-breakpoint) {
29 | @content;
30 | }
31 | }
32 |
33 | @mixin clearfix {
34 | &:after {
35 | content: '.';
36 | display: block;
37 | height: 0;
38 | clear: both;
39 | visibility: hidden;
40 | }
41 | }
42 |
43 | @mixin each-breakpoint ($selector, $replace) {
44 | @each $name, $min-width, $max-width in $breakpoints {
45 | @if $name {
46 | $selector-name: str-replace($selector, $replace, $name);
47 |
48 | @if ($min-width not null) and ($max-width == null) {
49 | @media screen and (min-width: $min-width) {
50 | #{$selector-name} {
51 | @content;
52 | }
53 | }
54 | } @else if ($min-width == null) and ($max-width not null) {
55 | @media screen and (max-width: $max-width) {
56 | #{$selector-name} {
57 | @content;
58 | }
59 | }
60 | } @else if ($min-width not null) and ($max-width not null) {
61 | @media screen and (min-width: $min-width) and (max-width: $max-width) {
62 | #{$selector-name} {
63 | @content;
64 | }
65 | }
66 | }
67 | }
68 | }
69 | }
70 |
71 | @mixin c-each-breakpoint ($selector, $replace) {
72 | // Custom Breakpoint Only
73 | @each $name, $min-width, $max-width in $custom-breakpoints {
74 | @if $name {
75 | $selector-name: str-replace($selector, $replace, $name);
76 |
77 | @if ($min-width != null) and ($max-width == null) {
78 | @media screen and (min-width: $min-width) {
79 | #{$selector-name} {
80 | @content;
81 | }
82 | }
83 | } @else if ($min-width == null) and ($max-width != null) {
84 | @media screen and (max-width: $max-width) {
85 | #{$selector-name} {
86 | @content;
87 | }
88 | }
89 | } @else if ($min-width != null) and ($max-width != null) {
90 | @media screen and (min-width: $min-width) and (max-width: $max-width) {
91 | #{$selector-name} {
92 | @content;
93 | }
94 | }
95 | }
96 | }
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/bottombar.pug:
--------------------------------------------------------------------------------
1 | // Bottom Bar
2 | .bottombar
3 | a(href='../../../../../../../' aria-label='Go to Homepage of Zusty CSS')
4 | img(src='/resources/zusty.svg' alt="Zusty CSS Logo")
5 | .button-container
6 | button.zust-btn.nav-opener.zust-icon-btn.zust-transparent.zust-rounded(onclick='showSidenav()' name='sidenav-opener' aria-label='Open bottom navigation')
7 | span.zust-icon
8 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
9 | path(fill='none' d='M0 0h24v24H0V0z')
10 | path(fill='currentColor' d='M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z')
11 | button.zust-btn.zust-icon-btn.zust-transparent.zust-rounded(onclick='toggleTheme()' name='theme-toggler' aria-label='Toggle theme to dark or light')
12 | span.zust-icon
13 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
14 | path(fill='none' d='M0 0h24v24H0V0z')
15 | path(fill='currentColor' d='M16.56 8.94L8.32.7C7.93.31 7.3.31 6.91.7c-.39.39-.39 1.02 0 1.41l1.68 1.68-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z')
16 | path(fill-opacity='.36' fill='currentColor' d='M2 20h20c1.1 0 2 .9 2 2s-.9 2-2 2H2c-1.1 0-2-.9-2-2s.9-2 2-2z')
17 | button#searchBtnBtm.zust-btn.zust-icon-btn.zust-transparent.zust-rounded(onclick='showSearch()' name='documentation-search' aria-label='Search inside of docs')
18 | span.zust-icon
19 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
20 | path(fill='none' d='M0 0h24v24H0V0z')
21 | path(fill='currentColor' d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z')
22 | button#navBkBtn.nav-backer.zust-btn.zust-icon-btn.zust-transparent.zust-rounded(onclick='navBack()' name='navigate-back' aria-label='Go back one step in side/bottom navigation')
23 | span.zust-icon
24 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
25 | path(fill='none' d='M0 0h24v24H0V0z')
26 | path(fill='currentColor' d='M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z')
27 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/head.pug:
--------------------------------------------------------------------------------
1 | link(rel="manifest" href="../manifest.json")
2 | meta(http-equiv='Content-Type' content='text/html; charset=UTF-8')
3 | meta(name='mobile-web-app-capable' content='yes')
4 | meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1')
5 | meta(name='description' content='Power Packed CSS Framework for Building Beautiful Interfaces.')
6 | meta(name='author' content='Sarsa Murmu')
7 | meta(name='keywords' content='zusty, css, framework, web, open-source, customizable, dark')
8 | meta(property='og:site_name' content='Zusty CSS')
9 | if (!debug)
10 | // Global site tag (gtag.js) - Google Analytics
11 | script(async src="https://www.googletagmanager.com/gtag/js?id=UA-142857751-1")
12 | script.
13 | window.dataLayer = window.dataLayer || [];
14 | function gtag(){dataLayer.push(arguments);}
15 | gtag('js', new Date());
16 |
17 | gtag('config', 'UA-142857751-1');
18 | // Open Graph data
19 | meta(property='og:type' content='documentation')
20 | meta(property='og:url' content=canonical)
21 | meta(property='og:image' content='/resources/brand_logo.png')
22 | meta(property='og:description' content='Power Packed CSS Framework for Building Beautiful Interfaces.')
23 | meta(property='og:site_name' content='Zusty CSS')
24 | meta(property='og:locale' content='en_US')
25 | link(rel='canonical' href=canonical)
26 | // Twitter
27 | // Twitter Card data
28 | meta(name='twitter:card' content='summary')
29 | meta(name='twitter:creator' content='@sarsamurmu')
30 | meta(name='twitter:site' content='@sarsamurmu')
31 | meta(name='twitter:title' content='Zusty CSS')
32 | meta(name='twitter:description' content='Power Packed CSS Framework for Building Beautiful Interfaces.')
33 | // Twitter summary card with large image must be at least 280x150px
34 | meta(name='twitter:image:src' content='/resources/brand_logo.png')
35 | // Theme Colors
36 | meta(name='theme-color' content='#FFFFFF')
37 | meta(name='msapplication-TileColor' content='#00b881')
38 | meta(name='msapplication-navbutton-color' content='#00b881')
39 | meta(name='apple-mobile-web-app-status-bar-style' content='#00b881')
40 | // Favicons
41 | link(rel='shortcut icon' href='/resources/favicon.png')
42 | link(rel='apple-touch-icon' href='/resources/favicon.png')
43 | link(rel='apple-touch-icon' sizes='192x192' href='/resources/favicon.png')
44 | link(rel='apple-touch-icon-precomposed' href='/resources/favicon.png')
45 | meta(name='msapplication-TileImage' content='/resources/favicon.png')
46 | link(rel='icon' href='/resources/favicon.png' sizes='192x192' type='image/png')
47 | // Apply The Theme Before Anything Loads
48 | script(src='/scripts/theme-apply.js')
49 | // CSS
50 | if (!debug)
51 | link(rel='stylesheet' href='/resources/zusty.min.css')
52 | else
53 | link(rel='stylesheet' href='/dist/zusty.css')
54 | link(rel='stylesheet' href='/stylesheets/docs.css')
55 | script(defer src='/resources/font-awesome.js')
56 |
--------------------------------------------------------------------------------
/pages/src/_mixins.pug:
--------------------------------------------------------------------------------
1 | //- For Defining Titles
2 | mixin title(name)
3 | title= name
4 | meta(property='og:title' content= name)
5 |
6 | mixin redirect(url)
7 | doctype html
8 | html: head: meta(http-equiv='refresh' content=`0;url=${url}`)
9 |
10 | //- - var htmlExt = '.html'
11 | //- if (!debug && forServer)
12 | - var htmlExt = ''
13 | //- Copy Button
14 | mixin copyButton(value)
15 | button(onclick!=value copybutton aria-label='Copy Snippet to Clipboard' zust-tooltip='Copy Snippet to Clipboard' zust-tooltip-position='left' zust-tooltip-type="primary")
16 |
17 |
18 | mixin nav(activeItem, classes)
19 | nav(role='navigation' class=`zust-navbar zust-flat zust-right-aligned ${classes}` style='z-index: 10')
20 | .zust-header
21 | img(src='/resources/zusty.svg' alt='brand_logo')
22 | span Zusty CSS #[span v#{version}]
23 | button.zust-btn.zust-transparent.zust-menu-btn(name='menu_opener')
24 | span.zust-icon: i.zust-menu
25 | .zust-content
26 | .zust-options
27 | if (activeItem !== 'home')
28 | a(href='/') Home
29 | if (activeItem !== 'docs')
30 | a(href='/docs') Docs
31 | if (activeItem !== 'download')
32 | a(href='/download') Download
33 | a(href='https://github.com/sarsamurmu/zusty' rel='noopener' target='_blank') GitHub
34 |
35 |
36 | script.
37 | window.addEventListener('DOMContentLoaded', () => {
38 | const nav = document.querySelector('nav');
39 |
40 | document.querySelector('nav .zust-menu-btn').addEventListener('click', () => {
41 | if (!nav.classList.contains('zust-expanded')) {
42 | nav.classList.add('zust-expanded');
43 | nav.querySelector('.zust-menu').classList.replace('zust-menu', 'zust-close')
44 | } else {
45 | nav.classList.remove('zust-expanded');
46 | nav.querySelector('.zust-close').classList.replace('zust-close', 'zust-menu')
47 | }
48 | })
49 | })
50 |
51 | mixin footer
52 | footer.site-footer
53 | p Designed and Developed by #[a(href='https://github.com/sarsamurmu' rel='noopener' zust-tooltip='Follow him on GitHub 😀' zust-tooltip-position='top' zust-tooltip-type='primary' target='_blank') Sarsa Murmu].
54 | p.
55 | Code available under the #[a(href='https://github.com/sarsamurmu/zusty/blob/master/LICENSE.md' rel='noopener' target='_blank') MIT License],
56 | website under #[a(href='https://creativecommons.org/licenses/by-nc-sa/4.0/' rel='noopener' target='_blank') CC BY-NC-SA 4.0].
57 |
58 | mixin updateBanner
59 | .updateBanner.zust-hidden: span Version 1.2.0 is out now. Check out #[a(href='https://github.com/sarsamurmu/zusty/releases/tag/1.2.0' rel='noopener' target='_blank') Release Notes].
60 |
61 | script.
62 | window.addEventListener('DOMContentLoaded', () => {
63 | if (Date.now() < Date.parse('2020-5-5')) document.querySelector('.updateBanner').classList.remove('zust-hidden');
64 | })
65 |
--------------------------------------------------------------------------------
/pages/tocopy/resources/jsfiddle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Layer 1
4 |
7 |
8 |
--------------------------------------------------------------------------------
/pages/src/docs/form/textarea.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Textarea
3 | ---
4 |
5 | # Textarea
6 | A simple textarea.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 | ```
15 | ---
16 |
17 |
18 | ## Rows and columns
19 | You can set a `textarea`{.tag}'s rows and columns by adding attribute `rows`{.attr} and `cols`{.attr}.
20 |
21 | ```html {snippet}
22 |
23 | ```
24 | ---
25 |
26 |
27 | ## Colors
28 | It supports all theme colors.
29 |
30 | ```html {snippet}
31 |
32 | ```
33 | ---
34 |
35 |
36 | ## Readonly
37 | You can make a `textarea`{.tag} readonly by adding attribute `readonly`{.attr}.
38 |
39 | ```html {snippet}
40 |
41 | ```
42 | ---
43 |
44 |
45 | ## Disabled
46 | Want to make a textarea disabled? Just add attribute `disabled`{.attr}.
47 |
48 | ```html {snippet}
49 |
50 | ```
51 | ---
52 |
53 |
54 | ## Transparent
55 | Textarea can be transparent. Add class `zust-transparent`{.class}.
56 |
57 | ```html {snippet}
58 |
59 | ```
60 | ---
61 |
62 |
63 | ## Resize
64 | You can control the ability of resizing of a `textarea`{.tag}. Add class `zust-v-resize`{.class} for only resizable vertically and/or add class `zust-h-resize`{.class} for only resizable horizontally.
65 |
66 | If you want to completely disable the ability of resizing, then add class `zust-unresizable`{.class}.
67 |
68 | ```html {snippet}
69 |
70 |
71 |
72 | ```
73 | ---
74 |
75 |
76 | ## Responsive size
77 | You can also make an textarea responsive by placing it inside of `zust-form-el`{.class} and adding class `zust-responsive`{.class} to `zust-form-el`{.class}.
78 |
79 | ```html {snippet}
80 |
81 |
82 |
83 | ```
84 |
85 | ::: link
86 | Using responsive size is recommended over naked textarea, though it needs extra code but it is much more better than regular textarea.
87 | :::
88 | ---
89 |
90 |
91 | ## Fullwidth
92 | Make a textarea fullwidth by adding class `zust-fullwidth`{.class} to `zust-form-el`{.class}.
93 |
94 | ```html {snippet}
95 |
96 |
97 |
98 | ```
99 |
--------------------------------------------------------------------------------
/pages/src/stylesheets/imports/editor/theme.scss:
--------------------------------------------------------------------------------
1 | [zust-theme="light"] {
2 | --editor-bg-clr: #f3f5f6;
3 | --editor-txt-clr: var(--body-text-color);
4 | --linenumber-txt-clr: rgba(57, 70, 78, 0.2);
5 | --cursor-clr: #158df6;
6 | --lint-tooltip-bg-clr: #FFF;
7 | --lint-tooltip-txt-clr: rgba(57, 70, 78, 0.8);
8 | --lint-mark-error-clr: #ff4f68;
9 | --lint-mark-warning-clr: #f7ed7e;
10 | --hints-bg-clr: hsla(0, 0%, 100%, 0.95);
11 | --hints-border-clr: #e4e7e9;
12 | --hint-txt-clr: rgba(57, 70, 78, 0.8);
13 | --hint-active-bg-clr: hsla(209, 100%, 50%, 0.1);
14 | --hint-active-txt-clr: hsl(209, 100%, 50%);
15 |
16 | /* Code */
17 | --code-header: blue;
18 | --code-quote: #36ac3b;
19 | --code-negative: #ff4d4d;
20 | --code-positive: #36ac3b;
21 | --code-keyword: #a151d2;
22 | --code-number: #ed6e55;
23 | --code-def: #e38800;
24 | --code-operator: #ef70c1;
25 | --code-variable-2: #2795ee;
26 | --code-variable-3: #249d7f;
27 | --code-comment: #abb8c6;
28 | --code-string: #2AAB51;
29 | --code-string-2: #ed5c65;
30 | --code-meta: #a0a1a7;
31 | --code-builtin: #f18c16;
32 | --code-tag: #2795ee;
33 | --code-bracket: #39464e;
34 | --code-attribute: #f18c16;
35 | --code-hr: #999;
36 | --code-link: #2795ee;
37 | --code-function: #8d44eb;
38 |
39 | --code-error-bg-clr: #ed5c65;
40 | --code-error-txt-clr: #fff;
41 |
42 | --selected-highlight-clr: rgba(57, 70, 78, 0.15);
43 | --matching-clr: #158df6;
44 | --active-line-bg-clr: rgba(57, 70, 78, 0.027);
45 | --active-line-gutter-txt-clr: rgba(57, 70, 78, 0.5);
46 | }
47 |
48 | [zust-theme="dark"] {
49 | --editor-bg-clr: #1b2b34; //#1F262E;
50 | --editor-txt-clr: var(--body-text-color);
51 | --linenumber-txt-clr: #4c5157;
52 | --cursor-clr: #f7ed7e;
53 | --lint-tooltip-bg-clr: #1c2128;
54 | --lint-tooltip-txt-clr: #cfd0d2;
55 | --lint-mark-error-clr: #ff4f68;
56 | --lint-mark-warning-clr: #f7ed7e;
57 | --hints-bg-clr: rgba(28, 33, 40, 0.95);
58 | --hints-border-clr: #2d333b;
59 | --hint-txt-clr: #cfd0d2;
60 | --hint-active-bg-clr: #0084ff;
61 | --hint-active-txt-clr: #fff;
62 |
63 | /* Code */
64 | --code-header: blue;
65 | --code-quote: #36ac3b;
66 | --code-negative: #ff4d4d;
67 | --code-positive: #36ac3b;
68 | --code-keyword: #b896ed;
69 | --code-number: #c594c5;
70 | --code-def: #f99157;
71 | --code-operator: #ef70c1;
72 | --code-variable-2: #ec5f67;
73 | --code-variable-3: #249d7f;
74 | --code-comment: #65737e;
75 | --code-string: #fac863;
76 | --code-string-2: #ed5c65;
77 | --code-meta: #4e6a87;
78 | --code-builtin: #f8b068;
79 | --code-tag: #ff4f68;
80 | --code-bracket: #cfd0d2;
81 | --code-attribute: #f8b068;
82 | --code-hr: #999;
83 | --code-link: #2795ee;
84 | --code-function: #99c794;
85 |
86 | --code-error-bg-clr: #ed5c65;
87 | --code-error-txt-clr: #fff;
88 |
89 | --selected-highlight-clr: hsla(0, 0%, 100%, 0.15);
90 | --matching-clr: #2196f3;
91 | --active-line-bg-clr: hsla(0, 0%, 100%, 0.05);
92 | --active-line-gutter-txt-clr: #8e9195;
93 | }
94 |
--------------------------------------------------------------------------------
/pages/src/docs/general/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started
3 | ---
4 |
5 | # Getting Started
6 | You can simply start using Zusty CSS, either using npm, CDN or by downloading it.
7 |
8 | ## npm
9 | You can simply install it via npm
10 | ```bash
11 | npm i zusty
12 | ```
13 | Then in ``{.tag}, add this to top of your CSS Files.
14 | ```html {nolaunch}
15 | Zusty CSS Zusty CSS - Minified
38 |
39 | 2\. Save it.
40 |
41 | 3\. Then include the CSS in your HTML's ``{.tag}.
42 | ```html {nolaunch}
43 | Base Page
64 |
65 |
66 | Base Page
67 |
68 |
69 | ```
70 | ---
71 |
72 | ## Using prefixless
73 | You would like to use the prefixless version, in prefixless version you can use classes without `zust-`{.class}, like `zust-hidden`{.class} can be used using `hidden`{.class}. See [how to use it](build-variants#prefixless).
74 |
75 |
92 |
--------------------------------------------------------------------------------
/pages/src/docs/navigationData.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "General",
4 | "children": [
5 | {
6 | "name": "Getting Started"
7 | },
8 | {
9 | "name": "Theme"
10 | },
11 | {
12 | "name": "Breakpoints"
13 | },
14 | {
15 | "name": "Customization SCSS"
16 | },
17 | {
18 | "name": "Variables"
19 | },
20 | {
21 | "name": "Build a Theme"
22 | },
23 | {
24 | "name": "Build Variants"
25 | }
26 | ]
27 | },
28 | {
29 | "name": "Helpers",
30 | "children": [
31 | {
32 | "name": "General"
33 | },
34 | {
35 | "name": "Color"
36 | },
37 | {
38 | "name": "Text"
39 | }
40 | ]
41 | },
42 | {
43 | "name": "Elements",
44 | "children": [
45 | {
46 | "name": "Avatar"
47 | },
48 | {
49 | "name": "Button"
50 | },
51 | {
52 | "name": "Chip"
53 | },
54 | {
55 | "name": "Divider"
56 | },
57 | {
58 | "name": "Icon"
59 | },
60 | {
61 | "name": "Note Block"
62 | },
63 | {
64 | "name": "Progress"
65 | },
66 | {
67 | "name": "Spinner"
68 | },
69 | {
70 | "name": "Table"
71 | },
72 | {
73 | "name": "Tooltip"
74 | }
75 | ]
76 | },
77 | {
78 | "name": "Container",
79 | "children": [
80 | {
81 | "name": "Basic"
82 | },
83 | {
84 | "name": "Column"
85 | },
86 | {
87 | "name": "Element Group"
88 | },
89 | {
90 | "name": "Snap Container"
91 | }
92 | ]
93 | },
94 | {
95 | "name": "Form",
96 | "children": [
97 | {
98 | "name": "Basics"
99 | },
100 | {
101 | "name": "Checkbox"
102 | },
103 | {
104 | "name": "Input"
105 | },
106 | {
107 | "name": "Radio"
108 | },
109 | {
110 | "name": "Range"
111 | },
112 | {
113 | "name": "Select"
114 | },
115 | {
116 | "name": "Switch"
117 | },
118 | {
119 | "name": "Textarea"
120 | }
121 | ]
122 | },
123 | {
124 | "name": "Components",
125 | "children": [
126 | {
127 | "name": "Badge"
128 | },
129 | {
130 | "name": "Breadcrumb"
131 | },
132 | {
133 | "name": "Card"
134 | },
135 | {
136 | "name": "Dropdown"
137 | },
138 | {
139 | "name": "Modal"
140 | },
141 | {
142 | "name": "Nav"
143 | },
144 | {
145 | "name": "Navbar"
146 | },
147 | {
148 | "name": "Pagination"
149 | },
150 | {
151 | "name": "Placeholder"
152 | },
153 | {
154 | "name": "Raw Progress"
155 | },
156 | {
157 | "name": "Tabs"
158 | }
159 | ]
160 | }
161 | ]
162 |
--------------------------------------------------------------------------------
/scss/form/radio.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $radio-margin: var(--radio-margin);
3 | $radio-label-margin: var(--radio-label-margin);
4 | $radio-border-radius: var(--radio-border-radius);
5 | $radio-border-width: var(--radio-border-width);
6 | $radio-padding: var(--radio-padding);
7 | $primary-transition: var(--primary-transition);
8 | }
9 |
10 | .#{$prefix}radio {
11 | display: inline-block;
12 | user-select: none;
13 | margin: $radio-margin;
14 |
15 | span {
16 | vertical-align: middle;
17 |
18 | ~ span {
19 | margin-left: $radio-label-margin;
20 | }
21 | }
22 |
23 | > input {
24 | display: inline-block;
25 | height: 0;
26 | width: 0;
27 | margin: 0;
28 | padding: 0;
29 | position: absolute;
30 | opacity: 0;
31 |
32 | + span {
33 | display: inline-block;
34 | border-style: solid;
35 | border-color: var(--radio-border-color);
36 | position: relative;
37 | overflow: hidden;
38 | border-radius: $radio-border-radius;
39 | border-width: $radio-border-width;
40 | padding: $radio-padding;
41 | transition: $primary-transition;
42 |
43 | &:after {
44 | content: '';
45 | display: inline-block;
46 | padding: 10px;
47 | position: absolute;
48 | top: 50%;
49 | left: 50%;
50 | transform: translate(-50%, -50%);
51 | border-radius: 100px;
52 | background-color: $transparent;
53 | transition: $primary-transition;
54 | }
55 | }
56 |
57 | &:checked + span {
58 | background-color: var(--radio-selected-color);
59 | border-color: $transparent;
60 |
61 | &:after {
62 | transform: translate(-50%, -50%) scale(0.6);
63 | background-color: #FFF;
64 | }
65 | }
66 |
67 | &:focus + span,
68 | &.#{$prefix}focused + span {
69 | box-shadow: 0 0 0 2px var(--radio-border-spread-color);
70 | }
71 | }
72 |
73 | &.#{$prefix}rect, &.#{$prefix}rectangle, &.#{$prefix}rectangular {
74 | > input + span {
75 | border-radius: 7px;
76 |
77 | &:after {
78 | border-radius: 4px;
79 | }
80 | }
81 | }
82 |
83 | @each $name, $color, $skip, $skip, $light-color in $item-colors {
84 | @if $name {
85 | &.#{$prefix}#{$name} > input:checked + span {
86 | background-color: $color;
87 | }
88 |
89 | &.#{$prefix}#{$name} > input:focus + span,
90 | &.#{$prefix}#{$name} > input.#{$prefix}focused + span {
91 | box-shadow: 0 0 0 2px $light-color;
92 | }
93 | }
94 | }
95 |
96 | &[disabled] {
97 | pointer-events: none;
98 |
99 | span {
100 | color: var(--item-disabled-fg-color);
101 | }
102 |
103 | input + span {
104 | background-color: var(--item-disabled-bg-color);
105 | border-color: $transparent;
106 | box-shadow: 0 0 0 0 $transparent;
107 |
108 | &:after {
109 | background-color: var(--item-disabled-fg-color);
110 | }
111 | }
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/scss/form/container.scss:
--------------------------------------------------------------------------------
1 | .#{$prefix}form-it {
2 | $margin: 20px;
3 | margin-bottom: $margin;
4 | display: flex;
5 | flex-wrap: wrap;
6 |
7 | &.#{$prefix}form-inline {
8 | @include medium {
9 | align-items: baseline;
10 |
11 | > .#{$prefix}label {
12 | display: inline-block;
13 | width: unset;
14 | flex-grow: 1;
15 | flex-basis: 0;
16 | text-align: right;
17 | margin: 0 30px 0 0;
18 | vertical-align: baseline;
19 | }
20 |
21 | > .#{$prefix}form-body {
22 | flex-grow: 5;
23 | flex-basis: 0;
24 | }
25 | }
26 | }
27 |
28 | > .#{$prefix}form-body {
29 | width: 100%;
30 |
31 | > .#{$prefix}form-el {
32 | width: 100%;
33 | margin: 0;
34 | }
35 | }
36 |
37 | > .#{$prefix}form-el, > .#{$prefix}btn {
38 | margin: {
39 | bottom: 0 !important;
40 | top: 0 !important;
41 | left: 0 !important;
42 | }
43 | }
44 |
45 | @include small {
46 | > .#{$prefix}form-el, > .#{$prefix}el-group {
47 | width: -webkit-fill-available;
48 | width: -moz-fill-avaialable;
49 | width: fill-available;
50 | }
51 | }
52 |
53 | &:last-child {
54 | margin-right: 0;
55 | margin-bottom: 0;
56 | }
57 |
58 | &.zust-fullwidth {
59 | flex-wrap: nowrap;
60 | }
61 | }
62 |
63 | .#{$prefix}label {
64 | display: block;
65 | width: 100%;
66 |
67 | @if $css-variable-enabled {
68 | font-size: var(--form-label-font-size);
69 | margin: var(--form-label-margin);
70 | } @else {
71 | font-size: $form-label-font-size;
72 | margin: $form-label-margin;
73 | }
74 | }
75 |
76 | .#{$prefix}help {
77 | margin: 5px;
78 | display: block;
79 | width: 100%;
80 |
81 | @if $css-variable-enabled {
82 | font-size: var(--form-help-font-size);
83 | margin: var(--form-help-margin);
84 | margin-top: calc(var(--form-help-margin) + 3px);
85 | } @else {
86 | font-size: $form-help-font-size;
87 | margin: $form-help-margin;
88 | margin-top: $form-help-margin + 3px;
89 | }
90 | }
91 |
92 | .#{$prefix}form-el {
93 | margin: 0;
94 | display: inline-flex;
95 | position: relative;
96 |
97 | &:not(:last-child) {
98 | margin-bottom: 8px;
99 | margin-right: 8px;
100 | }
101 |
102 | &.#{$prefix}fillup {
103 | width: 100%;
104 | }
105 |
106 | .#{$prefix}input {
107 | margin: 0;
108 | }
109 |
110 | .#{$prefix}el-group > &:not(:first-child):not(:last-child) > {
111 | .#{$prefix}input, .#{$prefix}select {
112 | border-radius: 0;
113 | }
114 | }
115 |
116 |
117 | .#{$prefix}el-group > &:first-child > {
118 | .#{$prefix}input, .#{$prefix}select {
119 | border-top-right-radius: 0;
120 | border-bottom-right-radius: 0;
121 | }
122 | }
123 |
124 | .#{$prefix}el-group > &:last-child > {
125 | .#{$prefix}input, .#{$prefix}select {
126 | border-top-left-radius: 0;
127 | border-bottom-left-radius: 0;
128 | }
129 | }
130 |
131 | &.#{$prefix}responsive {
132 | display: flex;
133 | }
134 | }
135 |
--------------------------------------------------------------------------------
/pages/src/docs/form/radio.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Radio
3 | ---
4 |
5 | # Radio
6 | Nothing much, just simple radio.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 | Chocolate
17 |
18 |
21 | Vanilla
24 |
25 | ```
26 | ---
27 |
28 |
29 | ## Making radio
30 | The minimum code required to make a radio is:
31 |
32 | ```html {snippet}
33 |
34 |
37 | ```
38 | ---
39 |
40 |
41 | ## Label
42 | Adding label to a radio is super easy.
43 |
44 | ```html {snippet}
45 |
46 | This is the Label!
49 |
50 | ```
51 | ---
52 |
53 |
54 | ## Colors
55 | Radio supports all theme colors. Use any of them.
56 |
57 | ```html {snippet}
58 |
59 | Default
62 |
63 |
66 | Success
69 |
70 |
73 | Warning
76 |
77 |
80 | Error
83 |
84 |
87 | Link
90 |
91 | ```
92 | ---
93 |
94 |
95 | ## Selected or checked
96 | You can make a radio selected/checked by adding attribute `checked`{.attr} to `input`{.tag}.
97 |
98 | ```html {snippet}
99 |
100 | Checked
103 |
104 |
107 | Radio
110 |
111 | ```
112 | ---
113 |
114 |
115 | ## Disabled
116 | Radio can be disabled by adding attribute `disabled`{.attr} to `label`{.tag} and `input`{.tag}.
117 |
118 | ```html {snippet}
119 |
120 | Disabled
123 |
124 | ```
125 | ---
126 |
127 |
128 | ## Rectangular radio
129 | You can make a radio rectangular by adding class `zust-rect`{.class} or `zust-rectangle`{.class}.
130 |
131 | ```html {snippet}
132 |
133 | Rectangle
136 |
137 | ```
138 | ---
139 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "zusty",
3 | "version": "1.2.0",
4 | "description": "Power Packed CSS Framework for Building Beautiful Interfaces.",
5 | "author": "Sarsa Murmu ",
6 | "keywords": [
7 | "css",
8 | "framework",
9 | "scss",
10 | "html5",
11 | "customizable",
12 | "flexible"
13 | ],
14 | "jsdelivr": "dist/zusty.min.css",
15 | "browser": "dist/zusty.min.css",
16 | "unpkg": "dist/zusty.min.css",
17 | "main": "zusty.scss",
18 | "funding": {
19 | "type": "patreon",
20 | "url": "https://www.patreon.com/join/sarsamurmu"
21 | },
22 | "repository": {
23 | "type": "git",
24 | "url": "git+https://github.com/sarsamurmu/zusty.git"
25 | },
26 | "license": "MIT",
27 | "bugs": {
28 | "url": "https://github.com/sarsamurmu/zusty/issues",
29 | "email": "sarsamurmu05@gmail.com"
30 | },
31 | "homepage": "https://zustycss.com",
32 | "files": [
33 | "dist",
34 | "scss",
35 | "zusty.scss",
36 | "LICENSE.md",
37 | "README.md",
38 | "CHANGELOG.md"
39 | ],
40 | "scripts": {
41 | "build": "rimraf dist && npm run build:css && npm run add:autoprefix && npm run minify:css && npm run build:parted && npm run build:prefixless && npm run build:css:theme",
42 | "build:prefixless": "npm run build:css:prefixless && npm run add:autoprefix:prefixless && npm run minify:css:prefixless",
43 | "build:parted": "npm run build:css:p:theme && npm run build:css:p:variables && npm run build:css:p:zusty && npm run add:autoprefix:p && npm run minify:css:p",
44 | "add:autoprefix": "postcss --use autoprefixer --no-map --output dist/zusty.css dist/zusty.css",
45 | "add:autoprefix:prefixless": "postcss --use autoprefixer --no-map --output dist/zusty.prefixless.css dist/zusty.prefixless.css",
46 | "add:autoprefix:p": "postcss --use autoprefixer --no-map --output dist/parted/zusty.css dist/parted/zusty.css",
47 | "build:css": "node-sass --output-style expanded --source-map true zusty.scss dist/zusty.css",
48 | "build:css:prefixless": "node-sass --output-style expanded scss/variants/zusty-prefixless.scss dist/zusty.prefixless.css",
49 | "build:css:theme": "node-sass --output-style expanded scss/variants/theme.scss dist/theme.css",
50 | "build:css:p:theme": "node-sass --output-style expanded scss/variants/parted/theme.scss dist/parted/theme.css",
51 | "build:css:p:variables": "node-sass --output-style expanded scss/variants/parted/variables.scss dist/parted/variables.css",
52 | "build:css:p:zusty": "node-sass --output-style expanded scss/variants/parted/zusty.scss dist/parted/zusty.css",
53 | "minify:css": "postcss dist/zusty.css > dist/zusty.min.css",
54 | "minify:css:prefixless": "postcss dist/zusty.prefixless.css > dist/zusty.prefixless.min.css",
55 | "minify:css:p": "postcss dist/parted/zusty.css > dist/parted/zusty.min.css",
56 | "lint": "stylelint scss/**/*.scss --syntax scss",
57 | "start": "npm run build:css -- --watch",
58 | "deploy": "node updateVer && npm run build && echo \"\n\nPublish to npm by yourself\""
59 | },
60 | "devDependencies": {
61 | "autoprefixer": "^9.7.4",
62 | "cssnano": "^4.1.10",
63 | "node-sass": "^4.13.1",
64 | "postcss-cli": "^6.1.3",
65 | "stylelint": "^11.1.1"
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/pages/src/docs/components/placeholder.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Placeholder
3 | ---
4 |
5 | # Placeholder
6 | Placeholder for indicating loading items.
7 |
8 | ---
9 |
10 | ## Structure
11 | ```html {snippet}
12 |
13 |
14 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
72 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
98 |
99 |
100 | ```
101 | ---
102 |
103 |
104 | ## Image
105 | You can make an image by adding a `div`{.tag} with class `zust-image`{.class}.
106 |
107 | ```html {snippet}
108 |
111 | ```
112 | ---
113 |
114 |
115 | ## Detail
116 | You can make a detail item too. See the snippet below.
117 |
118 | ```html {snippet}
119 |
128 | ```
129 | ---
130 |
131 |
132 | ## Custom
133 | You can make any item with any size. Just set the item's CSS property `color`{.property} to `{function}(var)(--placeholder-holder-color)`.
134 |
135 | ---
136 |
--------------------------------------------------------------------------------
/scss/helpers/text.scss:
--------------------------------------------------------------------------------
1 |
2 | .#{$prefix}text-bold {
3 | font-weight: 600 !important;
4 | }
5 |
6 | .#{$prefix}text-normal {
7 | font-weight: 400 !important;
8 | }
9 |
10 | .#{$prefix}text-italic {
11 | font-style: italic !important;
12 | }
13 |
14 | .#{$prefix}text-underline, .#{$prefix}text-underlined {
15 | text-decoration: underline !important;
16 | }
17 |
18 | .#{$prefix}text-light {
19 | font-weight: lighter !important;
20 | }
21 |
22 | .#{$prefix}text-small {
23 | font-size: $small-text !important;
24 | }
25 |
26 | .#{$prefix}text-medium {
27 | font-size: $medium-text !important;
28 | }
29 |
30 | .#{$prefix}text-large {
31 | font-size: $large-text !important;
32 | }
33 |
34 | .#{$prefix}text-xlarge {
35 | font-size: $xlarge-text !important;
36 | }
37 |
38 | .#{$prefix}text-centered, .#{$prefix}text-center {
39 | text-align: center !important;
40 | }
41 |
42 | .#{$prefix}rtl, .#{$prefix}right-to-left, .#{$prefix}text-rtl, .#{$prefix}text-right-to-left, .#{$prefix}text-right {
43 | text-align: right !important;
44 | }
45 |
46 | .#{$prefix}ltr, .#{$prefix}left-to-right, .#{$prefix}text-ltr, .#{$prefix}text-left-to-right, .#{$prefix}text-left {
47 | text-align: left !important;
48 | }
49 |
50 | .#{$prefix}unselectable, .#{$prefix}text-unselectable {
51 | user-select: none;
52 | }
53 |
54 | .#{$prefix}uppercase, .#{$prefix}text-uppercase {
55 | text-transform: uppercase !important;
56 | }
57 |
58 | .#{$prefix}lowercase, .#{$prefix}text-lowercase {
59 | text-transform: lowercase !important;
60 | }
61 |
62 | .#{$prefix}capitalize, .#{$prefix}text-capitalize {
63 | text-transform: capitalize !important;
64 | }
65 |
66 | .#{$prefix}text-justify, .#{$prefix}text-justified {
67 | text-align: justify !important;
68 | }
69 |
70 | .#{$prefix}text-no-wrap, .#{$prefix}text-nowrap {
71 | white-space: nowrap !important;
72 | }
73 |
74 | .#{$prefix}text-truncate {
75 | max-width: 100% !important;
76 | overflow: hidden !important;
77 | text-overflow: ellipsis !important;
78 | white-space: nowrap !important;
79 | }
80 |
81 | .#{$prefix}text-family-inherit {
82 | font-family: inherit !important;
83 | }
84 |
85 | .#{$prefix}text-size-inherit {
86 | font-size: inherit !important;
87 | }
88 |
89 | .#{$prefix}text-no-decoration {
90 | text-decoration: none !important;
91 | }
92 |
93 | .#{$prefix}text-breakable {
94 | word-break: break-all !important;
95 | }
96 |
97 | .#{$prefix}text-reset {
98 | font-family: inherit;
99 | font-size: inherit;
100 | font-weight: normal;
101 | color: inherit;
102 | font-style: normal;
103 | }
104 |
105 | .#{$prefix}text-smallcaps {
106 | font-variant: small-caps;
107 | }
108 |
109 | .#{$prefix}text-dropcap:first-letter, .#{$prefix}text-dropcap > p:first-of-type::first-letter {
110 | display: block;
111 | font-size: 3.8em;
112 | float: left;
113 | line-height: 1em;
114 | padding-right: 0.15em;
115 | }
116 |
117 | @for $i from 1 through 10 {
118 | .#{$prefix}text-#{$i} {
119 | font-size: ($i / 25) * 10rem;
120 | }
121 |
122 | $name: '.#{$prefix}text-#{$i}#{$condition-separator}name';
123 |
124 | @include each-breakpoint($name, 'name') {
125 | font-size: ($i / 25) * 10rem;
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/pages/src/404.pug:
--------------------------------------------------------------------------------
1 | doctype html
2 | html(lang='en' dir='ltr')
3 | include _mixins.pug
4 | head
5 | +title('Nothing Found - Zusty CSS')
6 | meta(http-equiv='Content-Type' content='text/html; charset=UTF-8')
7 | meta(name='mobile-web-app-capable' content='yes')
8 | meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1')
9 | meta(name='description' content='Power Packed CSS Framework for Building Beautiful Interfaces.')
10 | meta(name='author' content='Sarsa Murmu')
11 | meta(name='keywords' content='zusty, css, framework, web, open-source, customizable, dark')
12 | meta(property='og:site_name' content='Zusty CSS')
13 | if (!debug)
14 | // Global site tag (gtag.js) - Google Analytics
15 | script(async src="https://www.googletagmanager.com/gtag/js?id=UA-142857751-2")
16 | script.
17 | window.dataLayer = window.dataLayer || [];
18 | function gtag(){dataLayer.push(arguments);}
19 | gtag('js', new Date());
20 |
21 | gtag('config', 'UA-142857751-2');
22 | // Open Graph data
23 | meta(property='og:type' content='framework')
24 | meta(property='og:image' content='/resources/brand_logo.png')
25 | meta(property='og:description' content='Power Packed CSS Framework for Building Beautiful Interfaces.')
26 | meta(property='og:site_name' content='Zusty CSS')
27 | meta(property='og:locale' content='en_US')
28 | // Twitter
29 | // Twitter Card data
30 | meta(name='twitter:card' content='summary')
31 | meta(name='twitter:creator' content='@sarsamurmu')
32 | meta(name='twitter:site' content='@sarsamurmu')
33 | meta(name='twitter:title' content='Zusty CSS')
34 | meta(name='twitter:description' content='Power Packed CSS Framework for Building Beautiful Interfaces.')
35 | // Twitter summary card with large image must be at least 280x150px
36 | meta(name='twitter:image:src' content='/resources/brand_logo.png')
37 | // Theme Colors
38 | meta(name='theme-color' content='#FFFFFF')
39 | meta(name='msapplication-TileColor' content='#00b881')
40 | meta(name='msapplication-navbutton-color' content='#00b881')
41 | meta(name='apple-mobile-web-app-status-bar-style' content='#00b881')
42 | // Favicons
43 | link(rel='shortcut icon' href='/resources/favicon.png')
44 | link(rel='apple-touch-icon' href='/resources/favicon.png')
45 | link(rel='apple-touch-icon' sizes='192x192' href='/resources/favicon.png')
46 | link(rel='apple-touch-icon-precomposed' href='/resources/favicon.png')
47 | meta(name='msapplication-TileImage' content='/resources/favicon.png')
48 | link(rel='icon' href='/resources/favicon.png' sizes='192x192' type='image/png')
49 | // Apply The Theme Before Anything Loads
50 | script(src='/scripts/theme-apply.js')
51 | // CSS
52 | if (!debug)
53 | link(rel='stylesheet' href='/resources/zusty.min.css')
54 | else
55 | link(rel='stylesheet' href='/dist/zusty.css')
56 | link(rel='stylesheet' href='/stylesheets/404.css')
57 | body
58 | +nav
59 |
60 | .zust-text-center
61 | h1 Sadly, Nothing Found 😕
62 | p Probably we did something wrong or you've clicked a broken link.
63 | p But don't worry we will try to fix that soon. For now use the Navbar to get back. Have a great day 😄
64 |
65 | +footer
66 |
--------------------------------------------------------------------------------
/scss/form/textarea.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $primary-transition: var(--primary-transition);
3 | $textarea-border-radius: var(--textarea-border-radius);
4 | $medium-text: var(--medium-text);
5 | $textarea-border-spread: var(--textarea-border-spread);
6 | }
7 |
8 | .#{$prefix}textarea {
9 | appearance: none;
10 | padding: 8px 10px;
11 | background-color: var(--textarea-bg-color);
12 | color: var(--textarea-text-color);
13 | border-width: 0;
14 | border-bottom-width: 2px;
15 | border-color: $transparent;
16 | transition-property: background-color, box-shadow, border-color;
17 | display: block;
18 | min-height: 4em;
19 | transition: all $primary-transition, width 0s, height 0s;
20 | border-radius: $textarea-border-radius;
21 | font-size: $medium-text;
22 |
23 | &:not([cols]) {
24 | min-width: 15em;
25 | }
26 |
27 |
28 | &:hover, &.#{$prefix}hovered {
29 | background-color: var(--textarea-hovered-bg-color);
30 | }
31 |
32 | &:focus, &.#{$prefix}focused {
33 | background-color: var(--body-bg-color);
34 | box-shadow: 0 0 0 $textarea-border-spread var(--textarea-border-spread-color);
35 | }
36 |
37 | &::placeholder {
38 | color: var(--textarea-placeholder-text-color);
39 | }
40 |
41 | &[disabled] {
42 | background-color: var(--item-disabled-bg-color);
43 | color: var(--item-disabled-fg-color);
44 | pointer-events: none;
45 | resize: none;
46 |
47 | &::placeholder {
48 | color: var(--item-disabled-fg-color);
49 | }
50 | }
51 |
52 | // Transparent
53 | &.#{$prefix}transparent {
54 | background-color: $transparent !important;
55 |
56 | &:focus, &.#{$prefix}focused {
57 | background-color: $transparent !important;
58 | box-shadow: 0 0 0 0 !important;
59 | }
60 | }
61 |
62 | // Readonly
63 | &.#{$prefix}readonly, &[readonly] {
64 |
65 | &:hover, &.#{$prefix}hovered {
66 | background-color: var(--textarea-bg-color);
67 | }
68 |
69 | &:focus, &.#{$prefix}focused {
70 | background-color: var(--textarea-bg-color);
71 | box-shadow: 0 0 0 1px var(--textarea-border-spread-color);
72 | }
73 | }
74 |
75 | @each $name, $color, $skip, $hovered-color in $item-colors {
76 | @if $name {
77 | &.#{$prefix}#{$name} {
78 | border-color: $color;
79 |
80 | &:focus, &.#{$prefix}focused {
81 | border-color: $transparent;
82 | box-shadow: 0 0 0 $textarea-border-spread $hovered-color;
83 | }
84 |
85 | &.#{$prefix}readonly, &[readonly] {
86 | &:focus, &.#{$prefix}focused {
87 | box-shadow: 0 0 0 1px $hovered-color;
88 | }
89 | }
90 | }
91 | }
92 | }
93 |
94 | &:not(:last-child) {
95 | margin-bottom: 8px;
96 | }
97 |
98 | &.#{$prefix}v-resize, &.#{$prefix}v-resizable {
99 | resize: vertical;
100 | }
101 |
102 | &.#{$prefix}h-resize, &.#{$prefix}h-resizable {
103 | resize: horizontal;
104 | }
105 |
106 | &.#{$prefix}unresizable {
107 | resize: none;
108 | }
109 |
110 | .#{$prefix}form-el & {
111 | max-width: calc(100% - 0.5px);
112 | }
113 |
114 | .#{$prefix}form-el.#{$prefix}fullwidth & {
115 | width: 100%;
116 | resize: vertical;
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/scss/components/tabs.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $primary-transition: var(--primary-transition);
3 | $tab-border-bottom-width: var(--tab-border-bottom-width);
4 | $tab-top-border-radius: var(--tab-top-border-radius);
5 | }
6 |
7 | .#{$prefix}tabs {
8 | overflow-x: auto;
9 | margin-bottom: 10px;
10 |
11 | &.#{$prefix}center-aligned > ul {
12 | justify-content: center;
13 | }
14 |
15 | &.#{$prefix}right-aligned > ul {
16 | justify-content: flex-end;
17 | }
18 |
19 | &.#{$prefix}fullwidth > ul, &.#{$prefix}full-width > ul {
20 | > li {
21 | width: 100%;
22 | }
23 | }
24 |
25 | > ul {
26 | display: flex;
27 | align-items: center;
28 | justify-content: flex-start;
29 | border-bottom-style: solid;
30 | padding: 0;
31 | margin: 0;
32 | border-color: var(--tab-selected-item-color);
33 | user-select: none;
34 | border-width: $tab-border-bottom-width;
35 |
36 | > li {
37 | display: inline-flex;
38 | align-items: center;
39 | justify-content: center;
40 | text-align: center;
41 | height: 40px;
42 | padding: 0 20px;
43 | position: relative;
44 | transform-style: preserve-3d;
45 | white-space: nowrap;
46 | cursor: pointer;
47 | border-bottom-style: solid;
48 | border-width: $tab-border-bottom-width;
49 | transition: $primary-transition;
50 | border-color: var(--tab-selected-item-color);
51 |
52 | @if $css-variable-enabled {
53 | margin-bottom: calc(0px - var(--tab-border-bottom-width));
54 | } @else {
55 | margin-bottom: 0 - $tab-border-bottom-width;
56 | }
57 |
58 | > .#{$prefix}icon {
59 | $offset: 10px;
60 | --icon-size: 24px;
61 |
62 | &:not(:only-child) {
63 | &:first-child {
64 | margin-right: $offset;
65 | }
66 |
67 | &:last-child {
68 | margin-left: $offset;
69 | }
70 | }
71 | }
72 |
73 | &:after {
74 | content: '';
75 | position: absolute;
76 | bottom: 0;
77 | left: 0;
78 | background-color: var(--tab-selected-item-color);
79 | width: 100%;
80 | height: 100%;
81 | transform: translateZ(-1px) scaleY(0);
82 | transform-origin: bottom;
83 | transition: $primary-transition;
84 | }
85 |
86 | &.#{$prefix}selected, &[selected] {
87 | color: var(--tab-selected-item-text-color);
88 |
89 | &:after {
90 | transform: translateZ(-1px) scaleY(1);
91 | border-radius: $tab-top-border-radius $tab-top-border-radius 0 0;
92 | }
93 | }
94 | }
95 | }
96 |
97 | &.#{$prefix}lined {
98 | > ul {
99 | border-color: var(--tab-border-color);
100 |
101 | > li {
102 | cursor: pointer;
103 | border-bottom-style: solid;
104 | border-width: 2px;
105 | border-color: $transparent;
106 |
107 | &:after {
108 | height: 0 !important;
109 | width: 0 !important;
110 | }
111 |
112 | &.#{$prefix}selected, &[selected] {
113 | color: var(--tab-selected-item-color);
114 | border-color: var(--tab-selected-item-color);
115 | }
116 | }
117 | }
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/scss/core/base-styles.scss:
--------------------------------------------------------------------------------
1 | html {
2 | -moz-osx-font-smoothing: grayscale;
3 | -webkit-font-smoothing: antialiased;
4 | color: var(--body-text-color);
5 | height: 100%;
6 | text-rendering: optimizeLegibility;
7 | text-size-adjust: 100%;
8 | width: 100%;
9 |
10 | @if $css-variable-enabled {
11 | font-size: var(--body-font-size);
12 | font-family: var(--body-font-family);
13 | } @else {
14 | font-size: $body-font-size;
15 | font-family: $body-font-family;
16 | }
17 | }
18 |
19 | body {
20 | background-color: var(--body-bg-color);
21 | color: var(--body-text-color);
22 | height: min-content;
23 | padding: 20px;
24 | transition-property: background-color !important;
25 | margin: 0;
26 |
27 | @if $css-variable-enabled {
28 | transition: var(--primary-transition);
29 | } @else {
30 | transition: $primary-transition;
31 | }
32 | }
33 |
34 | text, p {
35 | color: var(--body-text-color);
36 | }
37 |
38 | a:not(.#{$prefix}btn) {
39 | color: var(--link-color);
40 | text-decoration: none;
41 | word-break: break-word;
42 | transition: $primary-transition;
43 | border-bottom-style: solid;
44 | border-color: $transparent;
45 |
46 | @if $css-variable-enabled {
47 | border-width: var(--anchor-border-width);
48 | } @else {
49 | border-width: $anchor-border-width;
50 | }
51 |
52 | &:hover, &.#{$prefix}hovered, &:focus, &.#{$prefix}focused {
53 | color: var(--link-hovered-color);
54 | border-color: var(--link-hovered-color);
55 | }
56 | }
57 |
58 | hr[divider] {
59 | width: 100%;
60 | border-style: solid;
61 | border-color: var(--divider-color);
62 | border-width: 2px;
63 | border-radius: 100px;
64 | margin-top: 10px;
65 | margin-bottom: 10px;
66 | opacity: 0.5;
67 | transition: $primary-transition;
68 | }
69 |
70 | blockquote {
71 | position: relative;
72 | margin: 0 10px;
73 | padding: 4px 20px;
74 | color: var(--text-color-tertiary);
75 |
76 | &:after {
77 | content: '';
78 | position: absolute;
79 | top: 0;
80 | left: 0;
81 | height: 100%;
82 | width: 6px;
83 | background-color: var(--blockquote-line-color);
84 | border-radius: 20px;
85 |
86 | @if $css-variable-enabled {
87 | transition: var(--primary-transition);
88 | } @else {
89 | transition: $primary-transition;
90 | }
91 | }
92 |
93 | @each $name, $color in $item-colors {
94 | @if $name {
95 | &.#{$prefix}#{$name}:after {
96 | background-color: $color;
97 | }
98 | }
99 | }
100 | }
101 |
102 | h1, h2, h3, h4, h5, h6, .#{$prefix}h1, .#{$prefix}h2, .#{$prefix}h3, .#{$prefix}h4, .#{$prefix}h5, .#{$prefix}h6 {
103 | display: block;
104 | color: var(--text-color-primary);
105 | transition: $primary-transition;
106 | }
107 |
108 | h1, .#{$prefix}h1 {
109 | font-size: 2em;
110 | margin: 0.67em 0;
111 | }
112 |
113 | h2, .#{$prefix}h2 {
114 | font-size: 1.5em;
115 | margin: 0.83em 0;
116 | }
117 |
118 | h3, .#{$prefix}h3 {
119 | font-size: 1.17em;
120 | margin: 1em 0;
121 | }
122 |
123 | h4, .#{$prefix}h4 {
124 | font-size: 1em;
125 | margin: 1.33em 0;
126 | }
127 |
128 | h5, .#{$prefix}h5 {
129 | font-size: 0.83em;
130 | margin: 1.67em 0;
131 | }
132 |
133 | h6, .#{$prefix}h6 {
134 | font-size: 0.67em;
135 | margin: 2.33em 0;
136 | }
137 |
--------------------------------------------------------------------------------
/pages/src/docs/form/checkbox.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Checkbox
3 | ---
4 |
5 | # Checkbox
6 | Checkbox with better UI.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 | Buy Oranges
17 |
18 |
21 | Call Dad
24 |
25 | ```
26 | ---
27 |
28 |
29 | ## Minimum Code
30 | The minimum code required to make a checkbox is
31 |
32 | ```html {snippet}
33 |
34 |
37 | ```
38 | ---
39 |
40 |
41 | ## Label
42 | You may have noticed, adding label is kinda easy.
43 |
44 | ```html {snippet}
45 |
46 | Label After
49 |
50 |
54 | Label Before
55 |
58 | ```
59 | ---
60 |
61 |
62 | ## Colors
63 | It includes all theme colors.
64 |
65 | ```html {snippet}
66 |
67 | Default
70 |
71 |
74 | Success
77 |
78 |
81 | Warning
84 |
85 |
88 | Error
91 |
92 |
95 | Link
98 |
99 |
109 | Disabled
112 |
113 | ```
114 | ---
115 |
116 |
117 | ## Checked
118 | A checkbox can be checked by default. Add attribute `checked`{.attr} to the `input`{.tag} to achieve that.
119 |
120 | ```html {snippet}
121 |
122 | Checked by Default
125 |
126 | ```
127 | ---
128 |
129 |
130 | ## Outlined
131 | There is also outlined checkboxes. You may need them, just add class `zust-outlined`{.class}.
132 |
133 | ```html {snippet}
134 |
135 | Outlined
138 |
139 | ```
140 | ---
141 |
142 |
143 | ## Circular
144 | There is another style, circular style. To get this style add class `zust-circle`{.class}. You can even use it with outlined.
145 |
146 | ```html {snippet}
147 |
148 | Circular
151 |
152 | ```
153 |
--------------------------------------------------------------------------------
/pages/src/docs/_includes/sidenav.pug:
--------------------------------------------------------------------------------
1 | include ../../_mixins.pug
2 | // Sidenav
3 | .sidenav
4 | a.nav-image(class='zust-hidden@until-large' href='/')
5 | img(src='/resources/zusty.svg' alt="Zusty CSS Logo")
6 | .toolbar(class='zust-hidden@until-large')
7 | button#navBackBtn.zust-btn.zust-icon-btn.zust-rounded.zust-large.zust-transparent(onclick="navBack()" name="sidenav-navigation-back" aria-label='Go back one step in side/bottom navigation')
8 | span.zust-icon
9 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
10 | path(fill='none' d='M0 0h24v24H0V0z')
11 | path(fill='currentColor' d='M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z')
12 | button#themeSwitcherButton.zust-btn.zust-icon-btn.zust-rounded.zust-large.zust-transparent(onclick="toggleTheme()" name="theme-toggler" aria-label='Toggle theme to dark or light')
13 | span.zust-icon
14 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
15 | path(fill='none' d='M0 0h24v24H0V0z')
16 | path(fill='currentColor' d='M16.56 8.94L8.32.7C7.93.31 7.3.31 6.91.7c-.39.39-.39 1.02 0 1.41l1.68 1.68-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z')
17 | path(fill-opacity='.36' fill='currentColor' d='M2 20h20c1.1 0 2 .9 2 2s-.9 2-2 2H2c-1.1 0-2-.9-2-2s.9-2 2-2z')
18 | button#searchBtn.zust-btn.zust-icon-btn.zust-rounded.zust-large.zust-transparent(onclick="showSearch()" name="documentation-search" aria-label='Search inside of docs')
19 | span.zust-icon
20 | svg(xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24')
21 | path(fill='none' d='M0 0h24v24H0V0z')
22 | path(fill='currentColor' d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z')
23 |
24 | .home-item-container
25 | .subSection
26 | span.header Home
27 | each parentItem in navItems
28 | -
29 | var attributes = {}, lowerName = parentItem.name.toLowerCase();
30 |
31 | attributes.href = !parentItem.children ? `/docs/${lowerName}` : '#!';
32 | if (parentItem.children) attributes.onclick = `showNavItem('${lowerName}')`
33 | if (!parentItem.children) attributes['nav-item'] = lowerName;
34 |
35 | a&attributes(attributes)
36 | span #{parentItem.name}
37 | .sub-item-container
38 | each parentItem in navItems
39 | if (parentItem.children)
40 | .sub-item(nav-item=`${parentItem.name.toLowerCase()}`)
41 | .subSection
42 | span.header #{parentItem.name}
43 | - var kebabCase = (words) => words.toLowerCase().replace(/[ ]/g, '-')
44 | each childItem in parentItem.children
45 | a(nav-item=`${kebabCase(childItem.name)}` href=`/docs/${parentItem.name.toLowerCase()}/${kebabCase(childItem.name)}`)
46 | span #{childItem.name}
47 |
--------------------------------------------------------------------------------
/scss/form/switch.scss:
--------------------------------------------------------------------------------
1 | @if $css-variable-enabled {
2 | $switch-border-radius: var(--switch-border-radius);
3 | $switch-border-width: var(--switch-border-width);
4 | $switch-label-margin: var(--switch-label-margin);
5 | $switch-margin: var(--switch-margin);
6 | $switch-padding: var(--switch-padding);
7 | $primary-transition: var(--primary-transition);
8 | }
9 |
10 | .#{$prefix}switch {
11 | position: relative;
12 | display: inline-block;
13 | user-select: none;
14 | margin: $switch-margin;
15 |
16 | span {
17 | vertical-align: middle;
18 |
19 | ~ span {
20 | margin-left: $switch-label-margin;
21 | }
22 | }
23 |
24 | > input {
25 | display: inline-block;
26 | height: 0;
27 | width: 0;
28 | margin: 0;
29 | padding: 0;
30 | position: absolute;
31 | opacity: 0;
32 |
33 | + span {
34 | padding-left: 35px;
35 | background-color: var(--switch-bg-color);
36 | border-style: solid;
37 | border-color: var(--switch-border-color);
38 | height: 18px;
39 | position: relative;
40 | border-radius: $switch-border-radius;
41 | border-width: $switch-border-width;
42 | transition: $primary-transition;
43 |
44 | &:after {
45 | content: '';
46 | border-radius: 100px;
47 | width: 6px;
48 | height: 12px;
49 | background-color: var(--switch-fg-color);
50 | position: absolute;
51 | top: 50%;
52 | transform: translateY(-50%);
53 | left: 7px;
54 | transition: $primary-transition;
55 | }
56 | }
57 |
58 | &:checked + span {
59 | background-color: var(--switch-active-bg-color);
60 | border-color: var(--switch-active-border-color);
61 |
62 | &:after {
63 | background-color: var(--switch-active-fg-color);
64 | left: 22px;
65 | }
66 | }
67 |
68 | &:focus + span,
69 | &.#{$prefix}focused + span {
70 | box-shadow: 0 0 0 2px var(--switch-border-spread-color);
71 | border-color: var(--switch-active-border-color);
72 | }
73 | }
74 |
75 | @each $name, $color, $s, $g, $light-color in $item-colors {
76 | @if $name {
77 | &.#{$prefix}#{$name} > input:checked + span {
78 | background-color: $color;
79 | border-color: $color;
80 | }
81 |
82 | &.#{$prefix}#{$name} > input:focus + span,
83 | &.#{$prefix}#{$name} > input.#{$prefix}focused + span {
84 | box-shadow: 0 0 0px 2px $light-color;
85 | border-color: $color;
86 | }
87 | }
88 | }
89 |
90 | &[disabled] {
91 | pointer-events: none;
92 |
93 | span {
94 | color: var(--item-disabled-fg-color);
95 | }
96 |
97 | > input + span {
98 | background-color: var(--item-disabled-bg-color);
99 | border-color: var(--item-disabled-bg-color);
100 | box-shadow: 0 0 0 0 $transparent;
101 |
102 | &:after {
103 | background-color: var(--item-disabled-fg-color);
104 | }
105 | }
106 |
107 | > input:checked + span {
108 | background-color: var(--item-disabled-bg-color);
109 | border-color: var(--item-disabled-bg-color);
110 |
111 | &:after {
112 | background-color: var(--item-disabled-fg-color);
113 | }
114 | }
115 | }
116 |
117 | &.#{$prefix}gummy:active > input + span:after {
118 | width: 20px;
119 | }
120 |
121 | &.#{$prefix}gummy:active > input:checked + span:after {
122 | width: 20px;
123 | transform: translate(-12px, -50%);
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/scss/core/functions.scss:
--------------------------------------------------------------------------------
1 | /// Replace `$search` with `$replace` in `$string`
2 | /// @author Hugo Giraudel
3 | @function str-replace($string, $search, $replace: '') {
4 | $index: str-index($string, $search);
5 |
6 | @if $index {
7 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
8 | }
9 |
10 | @return $string;
11 | }
12 |
13 | /// @author Hugo Giraudel
14 | /// Taken from https://css-tricks.com/snippets/sass/power-function/
15 | @function pow($number, $exponent) {
16 | $value: 1;
17 |
18 | @if $exponent > 0 {
19 | @for $i from 1 through round($exponent) {
20 | $value: $value * $number;
21 | }
22 | }
23 |
24 | @return $value;
25 | }
26 |
27 | /// Checks Luminance of Given Color
28 | /// @author Hugo Giraudel
29 | /// Taken from https://css-tricks.com/snippets/sass/luminance-color-function/
30 | @function luminance($color) {
31 | $colors: (
32 | 'red': red($color),
33 | 'green': green($color),
34 | 'blue': blue($color)
35 | );
36 |
37 | @each $name, $value in $colors {
38 | $adjusted: 0;
39 | $value: $value / 255;
40 |
41 | @if $value < 0.03928 {
42 | $value: $value / 12.92;
43 | } @else {
44 | $value: ($value + .055) / 1.055;
45 | $value: pow($value, 2.4);
46 | }
47 |
48 | $colors: map-merge($colors, ($name: $value));
49 | }
50 |
51 | @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
52 | }
53 |
54 | /// Returns a List with all List item from a given index from a List
55 | /// @author Sarsa Murmu
56 | /// @param {list} $given-list - A List with Nested Lists.
57 | /// @param {number} $it-index - Index of the item to get.
58 | /// @return {list} - List of all Items Found.
59 | /// @example Usage
60 | /// $list: (
61 | /// ('mobile', null, $tablet - 1px),
62 | /// ('touch', null, $desktop - 1px),
63 | /// ('tablet', $tablet, $desktop - 1px),
64 | /// ('desktop', $desktop, null)
65 | /// );
66 | ///
67 | /// @debug getListItems($list, 1); -> ('mobile', 'touch', 'tablet', 'desktop')
68 | @function getListItems($given-list, $it-index) {
69 | $list: () !default;
70 |
71 | @for $index from 1 through length($given-list) {
72 | $item-list: nth($given-list, $index);
73 |
74 | @if length($item-list) == 0 {} @else {
75 | $item: nth($item-list, $it-index);
76 | $list: append($list, $item, $separator: comma);
77 | }
78 | }
79 |
80 | @return $list;
81 | }
82 |
83 |
84 | @function getClassList($list, $selector, $replace, $prefix, $suffix, $seperator: '') {
85 | $classlist: $prefix;
86 |
87 | @for $i from 1 through length($list) {
88 | $name: nth($list, $i);
89 |
90 | $classname: str-replace($selector, $replace, $name);
91 |
92 | @if $i < length($list) {
93 | $classlist: $classlist + $classname + $seperator;
94 | } @else if $i == length($list) {
95 | $classlist: $classlist + $classname + $suffix;
96 | }
97 | }
98 |
99 | @return $classlist;
100 | }
101 |
102 | @function textForBg($color) {
103 | $lightness: luminance($color);
104 |
105 | @if $lightness > 0.5 {
106 | @return $text-dark;
107 | } @else {
108 | @return $white;
109 | }
110 | }
111 |
112 | @function getColor($name) {
113 | @for $i from 1 through length($colors) {
114 | $currentList: nth($colors, $i);
115 |
116 | @if index($currentList, $name) {
117 | @return nth($currentList, 2);
118 | }
119 | }
120 |
121 | @return $name;
122 | }
123 |
--------------------------------------------------------------------------------
/pages/src/docs/elements/chip.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Chip
3 | ---
4 |
5 | # Chip
6 | Minimal chip for your needs.
7 |
8 | ---
9 |
10 |
11 | ## Structure
12 | ```html {snippet}
13 |
14 |
15 | Chip
16 |
17 |
18 |
19 |
20 | With icon
21 |
22 | close
23 |
24 |
25 |
26 |
27 |
28 |
29 |
With image
30 |
34 |
35 |
With both
36 |
37 | close
38 |
39 |
50 |
51 |
Large chip
52 |
53 | close
54 |
55 |
59 |
60 |
Small chip
61 |
62 | close
63 |
64 |
74 |
75 |
76 |
One
77 |
78 | close
79 |
80 |
81 |
82 |
83 | Two
84 |
85 | close
86 |
87 |
88 |
89 |
90 |
91 |
Three
92 |
93 | close
94 |
95 |
96 |
97 |
98 | Four
99 |
100 |
101 |
102 |
103 |
Five
104 |
105 |
106 |
107 |
108 |
Six
109 |
110 | close
111 |
112 |
113 |
114 |
115 |
116 |
Seven
117 |
118 |
119 |
120 |
121 |
Eight
122 |
123 | close
124 |
125 |
126 |
127 |
128 | Nine
129 |
130 | close
131 |
132 |
133 |
134 |
135 |
136 |
Ten
137 |
138 | close
139 |
140 |
141 |
142 |
143 | Eleven
144 |
145 |
146 |
147 | Twelve
148 |
149 |
14 |
15 | Apps
16 | Games
17 | Musics
18 | Movies
19 | Books
20 | TV Shows
21 |
22 |
34 |
35 | Apps
36 | Games
37 | Musics
38 | Movies
39 | Books
40 | TV Shows
41 |
42 |
66 |
67 | Apps
68 | Games
69 | Musics
70 |
71 |
75 |
76 | Apps
77 | Games
78 | Musics
79 |
80 |
84 |
85 | Apps
86 | Games
87 | Musics
88 |
89 |
93 |
94 | Apps
95 | Games
96 | Musics
97 |
98 |
108 |
109 |
110 |
111 |
113 | Books
114 |
115 |
116 |
117 |
119 | Games
120 |
121 |
122 |
123 |
125 | Musics
126 |
127 |
128 |
138 |
139 | Apps
140 | Games
141 | Musics
142 |
143 |
' +
13 | escapeHtml(tokens[idx].content).replace(/{(.*?)}\((.*?)\)/g, (m, g1, g2, o, s) => `${g2} `) +
14 | '';
15 | };
16 |
17 | md.renderer.rules.fence = function(tokens, idx, options, env, slf) {
18 | var token = tokens[idx],
19 | info = token.info ? unescapeAll(token.info).trim() : '',
20 | langName = '',
21 | highlighted, i, tmpAttrs, tmpToken, type = 'codeblock';
22 |
23 | if (info) {
24 | langName = info.split(/\s+/g)[0];
25 | }
26 |
27 | if (options.highlight) {
28 | highlighted = options.highlight(token.content, langName) || escapeHtml(token.content)
29 | } else {
30 | highlighted = escapeHtml(token.content)
31 | }
32 |
33 | if (highlighted.indexOf(' { ${token.content} })()`)()
55 | }
56 |
57 | highlighted = highlighted
58 | .replace(/{{(.*?):(.*?)}}/g, (m, g1, g2, o, s) => `${g2} `)
59 | .replace(/(?:\s+)?hidCode{{((.|\s)*?)}}(?:\s+)?/g, '')
60 | .replace(/noRender{{((.|\s)*?)}}/g, (_, offset) => offset)
61 | ;
62 |
63 | if (token.attrs && token.attrs.flat().includes('snippet')) {
64 | token.attrs.shift();
65 | tmpToken.attrs.shift();
66 |
67 | return `
68 |
69 |
70 | ${
71 | token.content
72 | .replace(/{{(.*?):(.*?)}}/g, (m, g1, g2, o, s) => g2)
73 | .replace(/(?:\s+)?hidCode{{((.|\s)*?)}}(?:\s+)?/g, (_, offset) => offset)
74 | .replace(/(?:\s+)?noRender{{((.|\s)*?)}}(?:\s+)?/g, '')
75 | }
76 |
77 |
82 |
${m[1]} ` : `
`
107 | } else {
108 | return '
\n';
109 | }
110 | }
111 | })
112 | });
113 | }
114 |
--------------------------------------------------------------------------------
60 | 
4 |