latest ui and markdown tweaks

This commit is contained in:
kitajchuk
2022-07-16 12:09:50 -07:00
parent b09e4741da
commit 1bb1e6d0ca
5 changed files with 16 additions and 15 deletions

View File

@@ -1,6 +1,6 @@
# Fonts and icons
The point of the Jambonz UI library is for jambonz apps to be "on brand" and share a cohesive foundational design DNA. With that in mind, the official font family for jambonz is called [Objectivity](https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family). Objectivity is a free, open-source font available for download online. The UI kit provides the font files already optimized for web use in the `woff` format. Jambonz doesn't utilize every member of the font family but you can view the full font specimen [here](https://www.fontsquirrel.com/fonts/objectivity).
The point of the Jambonz UI library is for jambonz apps to be "on brand" and share a cohesive foundational design system. With that in mind, the official font family for jambonz is called [Objectivity](https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family). Objectivity is a free, open-source font available for download online. The UI kit provides the font files already optimized for web use in the `woff` format. Jambonz doesn't utilize every member of the font family but you can view the full font specimen [here](https://www.fontsquirrel.com/fonts/objectivity).
##### Available fonts for web use:

View File

@@ -1,14 +1,14 @@
# Jambonz UI
A minimal, light-weight UI design package for developing frontends for jambonz apps. It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS styles and JavaScript components. Whether you're developing a custom dev stack with tools like [webpack](https://webpack.js.org/) or using a framework (like [vite](https://vitejs.dev/)) you should have no issues utilizing the resources available in the Jambonz UI library package. You can view the available UI elements from the library on this site [here](/jambonz-ui/). Also—this site is using the UI library!
A minimal, light-weight UI design system for developing frontends for jambonz apps. It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS styles and JavaScript components. Whether you're developing a custom dev stack with tools like [webpack](https://webpack.js.org/) or using a framework (like [vite](https://vitejs.dev/)) you should have no issues utilizing the resources available in the Jambonz UI library package. You can view the available UI elements from the library on this site [here](/jambonz-ui/).
What this is not is an overopinionated UI framework. Jambonz UI aims to provide foundational design materials like colors, fonts and typography as well as [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) materials like buttons, icons etc. Currently the library is very lean but is expected to grow thoughtfully as jambonz frontend development continues to mature along this line of thinking.
Jambonz UI aims to provide foundational design materials like colors, fonts and typography as well as [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) materials like buttons, icons etc. Currently the library is very lean but is expected to grow thoughtfully as jambonz frontend development continues to mature along this line of thinking. A primary goal of the library is to have a small footprint. Current sizes:
A primary goal of the library is to have a small footprint. Current sizes:
View on [bundlephobia](https://bundlephobia.com/package/jambonz-ui)
| Output format | CSS size | JS size |
|---------------|----------|---------|
| Minified and Gzipped | `2 KB` | `635 bytes` |
| Minified and Gzipped | `2 KB` | `725 bytes` |
| Minified | `10 KB` | `2 KB` |
| Compiled | `14 KB` | `4 KB` |

View File

@@ -24,7 +24,7 @@
],
"license": "MIT",
"dependencies": {
"jambonz-ui": "^0.0.7",
"jambonz-ui": "^0.0.8",
"nanoid": "^3.1.22",
"next": "^12.1.4",
"next-plugin-preact": "^3.0.6",

View File

@@ -30,12 +30,13 @@
}
blockquote {
padding-left: 16px;
border-left: 3px solid ui-vars.$jambonz;
background-color: ui-vars.$grey-light;
border-radius: 0.3em;
p {
font-family: ui-vars.$font-regular-italic;
border-left: 3px solid ui-vars.$jambonz;
padding-left: 10px;
padding: 16px;
}
}
@@ -69,7 +70,7 @@
td, th {
padding: 8px 12px;
border: 1px solid ui-vars.$grey-light;
border: 1px solid ui-vars.$grey;
}
th {
@@ -78,7 +79,7 @@
tbody {
tr:nth-child(odd) {
background-color: ui-vars.$grey;
background-color: ui-vars.$grey-light;
}
}
}

View File

@@ -2267,10 +2267,10 @@ isstream@~0.1.2:
resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
jambonz-ui@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/jambonz-ui/-/jambonz-ui-0.0.7.tgz#8536933167a312993adf72a5cf730ed1413b5234"
integrity sha512-lDXpOUmaZwHRaHuvHP7dulH4pIiNaYzIiXrZ9Qi1ky2Y30SI28BQIwutD75WaJy6sGyyMDZl8bCphOTxbG+bcQ==
jambonz-ui@^0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/jambonz-ui/-/jambonz-ui-0.0.8.tgz#7be6d6b3570bb7b969654582be874bdbe4053573"
integrity sha512-BL2hrmVNBkcgDJr9wpgHTE7ttFTyLD4Fkx6aEPnujL46xE7Owt3s9UgM5tUXdt0JXKOKJNv2kF4d41Bx+lAvcw==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"