npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

plaza-ui

v1.1.0

Published

Plaza UI ========

Downloads

1

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

jfaassenjfaassen

Keywords

Readme

Plaza UI

Plaza UI is a CSS framework built on Bootstrap 4 and adds custom components.

The framework is used to power Plaza (main deployment: <www.zwangerenportaal.nl>), its mobile app, and any sub-sites (support, signup, etc).

Getting started

git clone [email protected]:linkorb/plaza-ui.git
cd plaza-ui
npm install
npm run storybook

You can now browse the storybook using your browser on https://localhost:6006

Libraries and technologies used:

  • npm for dependency management
  • webpack 4 for bundling all .scss files into dist/plaza.css
  • storybook for UI development, previewing, testing
  • SASS for super-powered CSS
  • handlebars for HTML snippets, previews and page layouts

Directory layout:

  • .storybook/: Storybook configuration and story loading code. Contains custom webpack.config.js (for handlebars, scss, etc loading) and preview-head.html to include custom header code in your preview iframes (restart required)
  • dist/: The build artifacts from npm build. Not checked into git, it's contents are generated
  • src/bootstrap/: Bootstrap templates (.handlebars) for previewing and bootstrap theme overrides (.scss)
  • src/elements/: Custom element templates and scss (elements are smaller than components)
  • src/components/: Custom element templates and scss. Components are complete reusable blocks (like cards, navigation menus, footers, etc). Optionally contains .json files to inject data into the templates while previewing with Storybook
  • src/pages/: Complete pages (i.e. frontpage, contact, etc). Composed using components (by including them through handlebars "partials"). Optionally contains .json files with data for this page preview in Storybook.
  • src/data/: .json files that can be imported/reused from .json files in other directories.

Coding conventions

  • Use Bootstrap classes where provided. I.e. use btn btn-primary for primary buttons - Don't create custom button classes.
  • The templates/pages templates should simply include complete components, without any custom HTML/CSS
  • Feed data into handlebars templates by creating a file next to the handlebars file with the same name, but a .json extension. Storybook will pick up the data in the .json file and feed it into the template.
  • Ensure that every component has a working preview in Storybook. Add a .json file if the component needs data.
  • Component-specific CSS should be added in templates/components by creating a file named the same as the handlebars file, with a .scss extension. This .scss file should only target classes in the component, not introducing any side effects
  • Global CSS (i.e. font names, page background color, etc) should be added in core/core.scss including clear code comments about the effect of the CSS declaration.
  • Add storybook knobs for any components or elements that could be worth checking with different data (i.e. headers, button labels, etc)
  • Generated components, pages, etc should work equally well on both desktop, tablets and mobile phone
  • Include partials by using their filename relative to the src/ directory. Don't use relative paths like ../components/example
  • All filenames are lower-case. Use dashes for spacing.

Theming bootstrap

See Bootstrap theming:

  • Overide any bootstrap variables in src/main.scss
  • Add a .handlebars and a .scss file in bootstrap/ for the elements you are styling. This way you can preview your edits in Storybook
  • Try to minimize the amount of custom CSS in bootstrap/*.scss files. Often you can use Bootstrap variables to achieve what you want.
  • In general, use the predefined bootstrap variables where possible.
  • Don't use any hard-coded colors. Use bootstrap variables like theme-color('primary'), $gray-400 etc
  • Use the $border-radius variable for anything that could use rounded corners (i.e. cards, widgets, etc). This way the radius behaviour can be centrally configured

Phases

Phase 1:

  • [ ] Create a fully functional templates/pages/frontpage.html.hbs that looks identical to the current http://www.zwangerenportaal.nl/ frontpage
    • [ ] Top bar with logo, search, language and user boxes
    • [ ] Navigation bar (dynamic, based on JSON data)
    • [ ] Main feed with "Content Card" components.
    • [ ] First sidebar feed (Populair today) with "Content Card" components.
    • [ ] Right sidebar components (MyWeekWidget, ProviderWidget, AppointmentWidget, Social media links)
    • [ ] Footer with "About us", "Recent content" (based on JSON data), "Languages" and Social Media links
    • [ ] Final Footer with copyright, faq, terms+conditions, privacy statement and cookie declaration links

Phase 2

  • [ ] Page templates (and the components they are using.. ads, comments, etc):
    • [ ] content-view: https://www.zwangerenportaal.nl/nl/recept-week-20-tomaten-paprikasoep
    • [ ] search: https://www.zwangerenportaal.nl/nl/search?query=test
    • [ ] category: https://www.zwangerenportaal.nl/nl/geboorte
    • [ ] profile:
      • [ ] profile-settings: https://www.zwangerenportaal.nl/nl/profile/complete
      • [ ] profile-edd: https://www.zwangerenportaal.nl/nl/profile/edd
      • [ ] profile-postalcode: https://www.zwangerenportaal.nl/nl/profile/postalcode
      • [ ] profile-weekmail: https://www.zwangerenportaal.nl/nl/profile/weekmail
      • [ ] profile-partner: https://www.zwangerenportaal.nl/nl/profile/partner
      • [ ] profile-type: https://www.zwangerenportaal.nl/nl/profile/type
      • [ ] profile-channels: https://www.zwangerenportaal.nl/nl/profile/channels
    • [ ] channel-view: https://www.zwangerenportaal.nl/channels/vlogkanaal-bo-theijs
    • [ ] channel-list: https://www.zwangerenportaal.nl/channels
    • [ ] appointments: https://www.zwangerenportaal.nl/appointments
    • [ ] appointments-past: https://www.zwangerenportaal.nl/appointments/past
    • [ ] organization-search: https://www.zwangerenportaal.nl/organizations/find (i.e. postcode 2000)
    • [ ] organization-view: https://www.zwangerenportaal.nl/nl/verloskundigenpraktijk-haarlemmermeer-bollenstreek
  • [ ] Create 404/5xx pages: https://www.zwangerenportaal.nl/this-does-not-exist
  • [ ] Create week slider (see https://www.zwangerenportaal.nl/nl/week-36 near the top)

Phase 3

  • [ ] Forum
    • [ ] Forum list https://www.zwangerenportaal.nl/forum
    • [ ] Forum/topic list: https://www.zwangerenportaal.nl/forum/test
    • [ ] Topic: https://www.zwangerenportaal.nl/forum/test/topic/1
  • [ ] Deals (groupon-like functionality.. if user pays Eur 15,- one time, they get access to discount coupon codes they can use at other webshops and physical stores
    • [ ] Deal list/overview: https://www.zwangerenportaal.nl/voordeel
    • [ ] Deal detail page https://www.zwangerenportaal.nl/voordeel/silI907fRRCKDY59-BEvvQ
    • [ ] Partner list https://www.zwangerenportaal.nl/voordeel/partners
    • [ ] Partner detail view https://www.zwangerenportaal.nl/voordeel/partners/ypkbEYi2T2Ki6IdsI8a7NA
    • [ ] Subscriptions (you'll need an active one to see the coupon codes) https://www.zwangerenportaal.nl/subscriptions

Note: you can actually use the "Betalen met iDeal" (pay with iDeal) button to pay for a subscription, it's in a "sandbox" mode, so you won't need to enter any real payment information.

Questions

How is this repository used?

Using npm build the file dist/plaza.css will be generated. This CSS file will be used in all of our plaza related projects.

We'll be transitioning our main application (plaza) in three fases:

  1. Replace all CSS in Plaza with dist/plaza.css while still using PHP+Twig
  2. Replace all Twig templates with the handlebars templates in this repository
  3. Build a React-based frontend+mobile app, also importing dist/plaza.css.

This allows us to smoothly transition from our current legacy frontend code (CSS+Twig)

Why build on Bootstrap 4?

Bootstrap 4 gives us a solid foundation for common ui classes for buttons, input widgets, etc. It offers extensive theming options, which we're using in plaza-ui to customize fonts, colors, etc.

Additionally our current templates are built on bootstrap too (v3). This means we can simply replace the CSS without too many manual changes to the templates.

Why handlebars?

Handlebars templating is available in most programming languages. We're using a mix of PHP and JS at the moment. Handlebars allows us to reuse our templates in all of our projects.

Why not React

We are using React in combination with the CSS generated by Plaza-UI for mobile applications. The React apps can simply use classnames defined by plaza-ui, and won't be needing any other CSS solutions (styled components, css-modules, etc)

Why not CSS-in-JS?

Styled components, Glamour, Emotion etc are all really cool libraries for managing styles.

In this project we've chosen not to use it, as we wanted 1 CSS file as a final deliverable. Most CSS-in-JS solutions generate their CSS per request, meaning you'll never have 1 full CSS file of all classes you're using in a project. This is both a pro and a con. In our case it's a con, as we will be using this CSS in more traditional applications that generate their templates serverside using twig, handlebars, etc. For this we really need a single dist/plaza.css to work.

Publishing to github pages

Use the following command to build a static storybook deployment and publish it to github pages:

npm run publish

It will be published to https://linkorb.github.io/plaza-ui

Building for distribution

To generate the dist/ directory:

npm run dist