underdogio / underdog-styles Goto Github PK

View Code? Open in Web Editor NEW

1.0 12.0 1.0 9.59 MB

Design system for Underdog.io

CSS 78.99% JavaScript 13.15% HTML 7.86%

underdog-styles's Introduction

Underdog Styles [DEPRECATED]

This project has been deprecated. Please use Pup instead.

Repository containing the common/organization wide styles and UI Kit.

Quick start

# Clone the repository
git clone [email protected]:underdogio/underdog-styles.git
cd ./underdog-styles

# Install dependencies
npm install

# Start server
npm start

# Start server and restart on changes from server/
npm run start-develop

# Start `node-sass` watching for changes in scss/
npm run develop

# Re-build icon fonts
npm run build-icons

# Runniing tests
npm test

Usage in project

To utilize these styles in your repository you should install underdog-styles with npm.

As of right now we are keeping this repository private until it gets to a more stable place. That means until that time we must install it using the full private git repository url and the latest commit SHA hash for versioning.

# Install `underdog-styles` from private git repository
npm install --save underdogio/underdog-styles#<GIT-TAG>

# e.g.
npm install --save underdogio/underdog-styles#1.3.12

To import all of underdog-styles into your project, add the following to your SASS file:

@import "underdog-styles/scss/underdog";

When compiling be sure to include your project's node_modules/ folder as an include path for SASS, e.g.:

node-sass --include-path node_modules/ --output dist/css/ public/scss/style.scss

Partial import

If you want to include parts of underdog-styles (e.g. specific components), but not everything, you can use the following in your SASS file:

// Include required base styles (variables, inuit.css, and mixins)
@import 'underdog-styles/scss/base';

// Include basic required elements
@import 'underdog-styles/scss/objects/container';
@import 'underdog-styles/scss/objects/grid';

// Include Underdog.io custom components
@import 'underdog-styles/scss/components/header';

Note: You will always want to include underdog-styles/scss/base as that includes all variables, mixins, and the base inuit.css styles needed.

Icon font

We use a custom icon font which is generated from individual SVGs stored in icons/*.svg.

Adding a new icon

When adding a new icon, make sure the size of the icon is 100px by 100px, and that the icon is taking up either the full width or height of the viewbox. This is to ensure that all icons are rendered at the same size.

Usage

In order to utilize the icon font that is generated in this project you will need to copy the fonts into your project.

This can be done by copying them from fonts/ once and committing into your project, or else you can setup a gulp task to copy the icon font files at build time into your project.

gulp.task('copy-fonts', function copyFonts () {
  gulp.src('node_modules/underdog-styles/fonts/*')
    .pipe(gulp.dest('dist/fonts/'));
});

If you are using the icon font in your project you will also have to override the $icon-font-path variable to ensure the fonts get loaded properly.

$icon-font-path: '/dist/fonts/';

Compiling icon font

To compile the icon font, run npm run icons.

Images

Images that are shared by all of our projects, such as our logo, are kept under the /images directory.

Favicons

Favicons are kept under favicons/*. In order to use these favicons you must copy them into your project. You must also update the paths to the favicons in favicons/browserconfig.xml, favicons/manifest.json, and in the <head /> tag of your HTML document.

Updating browserconfig.xml and manifest.json

By default browserconfig.xml and manifest.json are assuming that icons are being served from /dist/. The path to each icon defined in these files must be manually updated to match the path where the favicons are being served from.

browserconfig.xml

<square70x70logo src="/path/to/favicons/mstile-70x70.png"/>

manifest.json

{
  "src": "\/path\/to\/favicons\/android-chrome-36x36.png",
  "sizes": "36x36",
  "type": "image\/png",
  "density": 0.75
}

Markup for importing icons in an HTML document

You must include the following markup in the <head /> tag of the HTML document you want the favicons to be displayed for.

Note: The following markup is assuming that icons are being served from /dist/. You must manually update the paths for each icon to the actual path where the favicons are being served from.

<meta name="apple-mobile-web-app-title" content="Underdog.io" />
<meta name="application-name" content="Underdog.io" />
<meta name="msapplication-TileColor" content="#72ceaa" />
<meta name="msapplication-TileImage" content="/dist/mstile-144x144.png" />
<meta name="theme-color" content="#524b7a" />

<link rel="apple-touch-icon" sizes="57x57" href="/dist/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/dist/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/dist/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/dist/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/dist/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/dist/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/dist/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/dist/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/dist/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" href="/dist/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/dist/android-chrome-192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="/dist/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/dist/favicon-16x16.png" sizes="16x16" />
<link rel="manifest" href="/dist/manifest.json" />
<link rel="mask-icon" href="/dist/safari-pinned-tab.svg" color="#524b7a" />

How to add a section the styleguide

Create a Markdown file in the ./server/docs directory.
Add some metadata about the section at the top of the file:

---
title: Section Name
---

Write out a short description of your component, followed by an example and some source code.

Example section

links.md

---
title: Links
---

Links take you places.

<a href="#">A link</a>

`<a href="#">A link</a>`

underdog-styles's People

Contributors

Watchers

Forkers

kalburgimanjunath

underdog-styles's Issues

Update purple color

Should be #59518b

Add component that allows users to navigate and sign out

Screenshot from Zeplin:

Remove outline from buttons on focus

Use hover state styles for focus state.

Remove default blue outline.

Add favicons to underdog-styles

We should keep all of our favicons in a central location.

Changes to link styling

Played around with links for a while today. Here's what I'd like to do, if you guys are game.

To start, let's make the default font color #0B1D2B for the site. This is what Ashley envisioned in the mocks, and I think it's the right call. The difference is subtle, but it's a little softer than #000000 and seems to blend better with the greens and greys. It also lets us play with a little bit of a hover state, as you'll see below.

For standard links, let's go with:

a {
  color: #59518b;
  text-decoration: underline;
}

a:hover {
  color: #000;
}

For nav-links, let's go with:

.nav-link {
  color: #0B1D2B;
  text-decoration: none;
}

.nav-link--active {
  color: #000;
  text-decoration: none;
  font-weight: 600;
}

.nav-link:hover {
  text-decoration: none;
  color: #000;
}

GIF of changes below. Let me know if I missed anything.

Add javascript module for menu-drawer

We have the nice menu-drawer component, but we don't have any way to activate it yet.

We should add the appropriate javascript module to this repo so projects can use the menu drawer.

Decrease sidebar__title spacing

Add colors to styleguide

It would be super helpful if our brand colors were defined in the styleguide

Add a 404 Not Found template

Make sidebar in aside layout scrollable

Useful for when the screen height gets too short

Always use cursor: auto

We updated labels to use cursor: auto, but we should update everything else to do so as well.

button, input, option, select, textarea {
    cursor: pointer;
}

Removing team members

We need to hook up the Remove button on the Settings / Team page to actually do something.

Since we aren't applying changes until the user hits a save button, modifying or removing team members should place those team members into a queue of members to remove or modify.

Then when the Save button is clicked, the <TeamListing /> container should dispatch the appropriate actions to update or remove users from the user's team.

Right now there isn't an endpoint to update users, but there is one to remove users, so we'll focus on just removing for now.

Add logo

Update eslint-config-underdog to 1.1.2

Google login button needs to be conformed to Google's design guidelines

See https://developers.google.com/identity/branding-guidelines

The button also needs to be updated in dogtag.

Add section in styleguide for helper classes

Disable pointer events for disabled nav links

Add modifier to icon class to display labels to the left of icons

This is for the lock icon next to disabled batch location links in Company Dashboard.

Add `header--fixed` class

This is mostly to appease joinfetch which currently has a fixed header which stays with you as you scroll the page.

This could be helpful for other sites, so adding header--fixed class should be easy/small enough change to make.

Styles from joinfetch:

.navbar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 68px;
}

Fix icons

Resume: https://dl.dropboxusercontent.com/u/1303038/resume.svg

They are all rendering weird... they aren't actually circles... some are funky.

@cmuir to provide new assets when/where needed.

Fix hover colors for buttons

Add a config file for nvm

There should be a .nvmrc file present to ensure that we are using the correct version of Node when working on underdog-styles.

Update kennel to use JQL API for searching for people

function main() { return People().filter(function(user){ return user.properties.$email == '[email protected]'}); }

https://mixpanel.com/help/reference/jql/api-reference#api/access

Add `callout` object

For joinfetch, and possibly other projects, we will need a callout or hero section of the website.

Create styles for modal component

Fix cursor for labels

Right now they are pointer, but we don't like that very much, instead they should be auto

Move gemini to optionalDependencies

gemini is a relatively large/slow install, we should move it to be an optionalDependency to ensure that it doesn't get installed on accident when deploying or anything.

Fix spacing between form elements

Chris mentioned that the padding around form input elements is too close, we should open them up a little more by default.

Button letter spacing and font weight

Make a bit less spaced out and more prominent:

.btn {
  letter-spacing: .05em;
  font-weight: 600;
}

Style url inputs

Match text input styling

Hide horizontal overflow in html element

Something is causing a horizontal scroll bar for appearing for a split second before Company Dashboard boots up.

My guess is it's because of Google Fonts loading in a bit late. Regardless, it wouldn't hurt to just hide horizontal overflow by default

Decrease font size of headings

See #110 (comment)

Fix typo in header documentation

It looks like we are missing some underscores in the elements for the header block.

Add a class for styling buttons that look like links

Tweak sidebar padding

Remove margin and add padding on both sides

Release underdog-styles on bower

Use bower.json's ignore property to prevent publishing un-necessary files (like the express server)

Use columns for slab component

Also update CandidatePreview component to use columns

Get company user data on login

GET /api/whoami

Make project public

Before we launch company.underdog.io underdog-styles should hopefully be at a point where it is pretty stable (not many components/styles being added or tweaked). Which means it is likely a good time to mark it as 1.0.0 and make it public.

Releasing as public should include hosting of the style guide in a manner where it can be used as a reference.

This is also not a hard requirement for the company-dashboard launch, but the launch is a good milestone to track for this repo being stable as well.

Add support for type="email" inputs

We do not recognize type="email" elements so they go unstyled.

They should be styled the same as type="text" inputs elements.

Update link color

Should be #59518b

Fix `line-height` on header/nav buttons

The problem is that buttons are set to inherit their line-height property, which for the header is 68px.

Instead this should be something like 1em for .header__nav btn

Wrap form inputs in a label tag

Add build task for compiling JavaScript

Some components in underdog-styles require JavaScript in order to function. We need to create a build task that handles compiling JavaScript.

The build task should support ES6 modules via Babel. It should also bundle all components into a single .js file that can be easily included in a web page.

/cc @underdogio/engineering