mirror of
https://github.com/jambonz/next-static-site.git
synced 2025-12-19 04:47:44 +00:00
latest ui and markdown tweaks
This commit is contained in:
@@ -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:
|
||||
|
||||
|
||||
@@ -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` |
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user