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

@dynatrace/groundhog

v6.1.2

Published

CSS components for Dynatrace

Downloads

82

Vulnerabilities

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

Links

Maintainers

dyladandyladandynatrace-nodejsdynatrace-nodejskamtschatkakamtschatka

Keywords

Readme

Welcome to Groundhog - CSS components for Dynatrace

Codeship status npm version

What is Groundhog

This is Groundhog, a CSS library for all Dynatrace web entities. Think Bootstrap, but pretty, modern and fast.

We created Groundhog to unify all Dynatrace web entities, regardless of the underlying technology. Use it to fuel your Blogs, custom dashboards, Wikis, etc. If you want to see what's possible with Groundhog, check out our showcase. We used some, if not all Groundhog components to make them look like being one and the same.

Groundhog is designed after the contents from our asset library, and features up to date implementations of the components there. Additionally, we created extra modules that come in handy when working with websites and web applications: Layouts, lightboxes, etc.

If you work in one of our GWT web applications like Ruxit or AppMon, please use the Dynatrace widget library instead. This project is just there to be a guideline or a precursor to widgets that find their way into GWT.

How to get Groundhog

You have multiple options to get Groundhog:

Use via CDN

We uploaded everything to our Dynatrace CDN, use it like that:

CSS goes in the <head>

<link rel="stylesheet" href="//assets.dynatrace.com/groundhog/vVERSIONNUMBER/css/main.css" />

JS goes at the end of the <body> tag of your page:

<body>
... all your content

<script type="text/javascript" src="//assets.dynatrace.com/groundhog/vVERSIONNUMBER/js/main.js"></script>
</body>

VERSIONNUMBER is the version that you want to install. Check the website for more information.

Install via npm

Groundhog is available on npm:

npm install --save @dynatrace/groundhog

Custom build

If you want to have a more advanced build, check us out on GitHub and do a plain build:

npm install
npm run build

You will then find compiled stylesheets for all the components that we got.

Development

You can also chime in and develop with us!

npm install
npm run dev

Font and Assets

The font we're using is called Bernina. You can find downloads for this font and usage terms in our asset library. If you can't use Bernina for some reason, the open source alternative "Open Sans" works as well. Make sure you get the 300 and 400 font styles.

Same goes for the iconography used with Groundhog. You can find them in the asset package available in the asset library.

One more thing!

Groundhog is also built with Groundhog. Who would have thought?

Maintainers

This project is maintained by:

With contributions by: