overview

prospect garden css components(a.k.a. @pgd/css) is the css implementation of the prospect garden design system.

It's a responsive css framework built to make switching themes easy, heavily based on css variables(a.k.a. css custom properties).

features

  • themeable components
  • easy to customize your own components or theme
  • themeable styles are built on top of design tokens, with across-platform kept in mind
  • [WIP]popular themes out of the box, such as bootstrap, material design...

how it works

  • almost all design tokens are extracted directly from popular open source ui frameworks.
    • halfmoon v1.1.0 is used as the primary css variables/tokens source.
    • bootstrap v5.0.0 is used as the primary css class names source.
    • thanks to these open source frameworks, the design tokens from them can save the ux-unfriendly developers from choosing colors/sizes/...
  • IE browsers are not supported for lack of css variables.
    • as of 2021-03, caniuse shows that the global usage of css variables is 95.06%.
    • since the design tokens of @pgd/components is generated using style-dictionary, it seems possible to generate raw style values directly, and then use the raw values for IE or even other platforms.

install & usage

install

starter template

theming

3-tier theming system

default theme (a.k.a. base theme)

themes extensions

themes variants(including dark theme)

general html elements can be used in simple use cases.

for complex use cases like high interactivity and flexible styling, it's better to build your own components with css here and custom js.

code & kbd

  • .code and .kbd are designed to style inline elements.
  • code blocks are recommended to be styled with other libs like highlight.js/prismjs.

code

  • Add the class .some-class to the element to format it.
  • 10 + 5 = 15
  • The browser default code style is like this: f = ma.

kbd: keyboard character

  • Toggle dark mode by pressing shift + D.
  • The default kbd style is like this: ctrl + D.

list

ul - unordered list

  • This is an unordered list.
  • It's styled with only one class .ul.
  • Simple bullet-point list that has no particular order.
  • However, this style only applies to immediate child elements.
  • Nested unordered lists(without classname):
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

ol - ordered list

  1. This is an ordered list.
  2. It's styled with only one class .ol.
  3. Ordered item 3
  4. Nested ordered lists(without classname):
    1. are unaffected by this style
    2. will still show a original number counter
    3. and have appropriate left margin
  5. This may still come in handy in some situations.
  6. Another nested unordered lists(with classname .ul):
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  7. This may still come in handy in some situations.

list without bullets

  • This is an unordered list.
  • It's styled with two classes .ul.no-bullet.
  • Simple bullet-point list that has no particular order.
  • However, this style only applies to immediate child elements.
  • Nested unordered lists(without classname):
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

inline list

  • items displayed inline.
  • bullets removed.
  • margin applied.

todo

  • bullet position for unordered list is a little higher than expected

table

html <table> can be styled with just one class table

basic table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

striped table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

form

forms provide common user input elements.

.form-control can be used to style <input>, <select> and <textarea> elements consistently.

.form-group can be used to add margin-bottom.

.form-text can be used to style muted text below form inputs as descriptive information.

form control

form-control is designed for consistency.

it provides consistent sizing/spacing/states/... among form inputs.

text input

<input> elements can be styled with .form-control.

.form-control will take up the full width of the parent container and have no margins by default.

utilities classes can be used to help to position form input controls.

basic text input

input states

.required can be added to <label> to show a tiny red asterisk * as a reminder.

sizing

textarea

allow users to input multi-line plain text.

checkbox

radio

select

default single select

multi select

switcher

range

basic range slider

note: not working on firefox


todo: range with values

note: js required. live on codepen

Current value:

file

single file input

multi file input

accordion / collapse

.collapse-panel > details

.collapse-header > summary

.collapse-content > contents below summary

note: <details> and <summary> elements are not supported in IE 11.

browser default details summary element

Why are computers important?
Computers are important because they are like bicycles for the mind.

basic collapse panel

Why are computers important?
Computers are important because they are like bicycles for the mind.

collapse panel group

Plain White T-Shirt
Price: $20.00
A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
Cool Jeans
Price: $41.00
A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.
Plain White Crop Top
Price: $20.00
A long description that lists all the good sides of the product and none of the bad. Compels the shopper to add this product to their cart immediately.

alert

alert variants

todo: sticky alert

badge

badge variants

Default Primary Success Danger

pill badges

Default Primary Success Danger

todo: badge group

breadcrumb

basic breadcrumb

button

button tags

  • .btn/.btn-* classes are designed to style the html <button>, <a>, <input> elements
  • <a> as button is designed to trigger in-page functionality, instead of jumping to new pages.
  • role="button" should be put on <a> elements for a11y.
<a> link
<div>

button semantic variants

button states

button sizes

outline/ghost buttons

rounded buttons

square/circular Buttons

  • .rounded-circle should be put after .btn-square to style a rounded button.

icon buttons(todo)

full width/block buttons

button group

  • use button group to group multiple buttons in a single line or in a vertical column.
  • .btn-group is designed to be put on the container element of multiple .btn elements
  • .btn-group uses display: inline-flex; layout.
  • all button tags can be used inside the button group.
  • all button variants can be used inside the button group.

outline button group

button group as pagination

semantic button group

  • It would be better to add some js for toggling interactivity

button group sizes

button toolbar

  • use button toolbar to group multiple button groups in a single line.

vertical button group

card

card is one of the most popular components for displaying brief and attractive contents.

.content can be used to provide a nice margin around the content inside.

.card can be used to provide a visual box with nice padding, border and margin.

.card and .content can be nested inside one another in any combination to help to organize the content better.

the margin around .content is equal to the padding inside .card. This makes nested content and cards have proper alignment.

Basic Card

By default, .content and .card will fit the full width of its parent element.

However, it's easy to change their parent element's width with utility classes like .w-0/25/50/75.

第五十四回 史太君破陈腐旧套

这些书都是一个套子，左不过是些佳人才子，最没趣儿。把人家女儿说的那样坏， 还说是佳人，编的连影儿也没有了。开口都是书香门第，父亲不是尚书就是宰相， 生一个小姐必是爱如珍宝。这小姐必是通文知礼，无所不晓，竟是个绝代佳人。 只一见了一个清俊的男人，不管是亲是友，便想起终身大事来，父母也忘了，书礼也忘了， 鬼不成鬼，贼不成贼，那一点儿是佳人？便是满腹文章，做出这些事来，也算不得是佳人了……

阅读全文
Lady Jia ridicules the cliches of romantic fiction

In some cases it’s because the writer is envious of people so much better off than himself, or disappointed because he has tried to obtain their patronage and failed, and deliberately portrays them in this unfavourable light as a means of getting his own back on them...

Read more

card with image

img-eg-placeholder-green
史太君破陈腐旧套

这些书都是一个套子，左不过是些佳人才子，最没趣儿。把人家女儿说的那样坏， 还说是佳人，编的连影儿也没有了……

更多

card with padding

the margin around .content is equal to the padding inside .card.

This makes nested content and cards have proper alignment

Elements and containers can also be given the same padding as cards using .p-card, .px-card, .py-card

Subscribe by email

We will notify you whenever we make a new post. No spam, no marketing, we promise.

dropdown

by default, dropdown is toggled by clicking, not by hovering.

dropdown toggling requires js.

compared to popover, dropdown in open state has no arrow indicator.

.dropdown-header can be used to style title for the dropdown menu.

.dropdown-item can be used for the main links.

.dropdown-divider can be used to style div as divider.

.dropdown-content can provide spacing for content to match with headers and dividers.

basic dropdown

toggle by click.

Header
Link 1 Link 2

hoverable dropdown

toggle by hover.

todo: dropup

modal

.modal makes use of :target pseudo selector, open whenever the url hash matches the id of the modal.

basic modal

Open modal

progress

progress bar variants

progress bar sizes and labels

75%

progress bar group

Success
Warning
Danger

animating progress bar

tooltip

tooltip can be created by adding the data-toggle="tooltip" and data-title="..." attributes to an element, and requires no JavaScript.

container

containers can be used to center the content horizontally.

3 types of containers are provided:

  • .container is responsive at all breakpoints with prefined max-width.
  • .container-fluid is full width at all breakpoints with width: 100%;.
  • .container-sm/md/lg/xl/xxl is width: 100%; before the specified breakpoints, then responsive at the specified breakpoint width and greater width.

.container has no padding and margin by default.

  • built-in margins tend to make it unexpected and confusing to align contents.
  • .content is recommended to add margin for contents of containers and cards.

this site use .container, responsive for all screen sizes.

grid

navbar

classes in the navbar:

  • brand: text/image
  • nav-link/item: active
  • text: muted color
  • content: container for buttons, dropdowns...
  • form-inline: create forms inside navbar

navbar elements are usually used in combination with display/position/spacing/... utility classes.

static navbar

static navbar is not fixed at the top or bottom.

collapsible navbar

collapsible for mobile screens.

sidebar

basic sidebar

logo Brand
Press Enter to search
Getting started
Installation CLI commands
Components
File explorer Spreadsheet Map Messenger

pagination

basic pagination

rounded pagination

sass codebase

about this documentation site

  • <body> 只有2个直接子元素，<nav class="nav-header" >是顶部导航条，<main class="docs-outmost-block" >是文档内容
    • main元素也包含2个直接子元素，<aside class="docs-toc" >代表左侧目录，<div class="docs-content" >代表右侧长文档，由多个小节多个部分的内容组成
    • 每个小节部分的元素是<section class="docs-content-section" >