campaignmonitor / shell Goto Github PK

There's a need to add modifiers at the individual grid item level with the most common treatment being different alignments options using flex-self. Also making all grid item children equal height.

E.g. l-container.

I came across this: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L137.

All Shell's mixins and functions use SassDoc, let's generate the docs!

See: necolas/normalize.css#517.

This may be the CSS to use but make sure it's properly checked:

input[type='number'] {
    appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button,
input[type='number']:hover::-webkit-outer-spin-button {
    appearance: none;
}

Like this: http://1000ch.github.io/grd/ -> Live Demo

This rule in Normalise/Reset removes some of OS X's native styling:

Remove rounded corners that iOS applies to all `<input>` buttons and certain
browsers e.g. Chrome, apply rounded corners to `<select>`s.

With the rule:

Without the rule:

• Prepare npm module
• Set up git tagging
• Create CHANGELOG.md
• Create CONTRIBUTING.md
• Update README.md
• Update .npmignore
• #17

https://gist.github.com/terkel/4373420 might be what we need.

https://github.com/necolas/normalize.css

It got added as a setting in _settings.scss but not in _grid.scss 😢.

Should come after:

// 11 col
.l-grid__item--11-col {
    width: $shell-grid-11-col-width;
}

// Apply at breakpoints
@if $shell-grid-apply-11-col-width-at-breakpoints {
    @include apply-at-breakpoints(".l-grid__item--11-col", $shell-grid-define-11-col-width-breakpoints) {
        width: $shell-grid-11-col-width;
    }
}

• iOS fix for unreadable disabled content; see.

See: h5bp/html5-boilerplate@fea7f22.

something like .is-visible-when-js-disabled, would be combined with the .no-js class in the header

type="search" has a different border style than the rest of the textual inputs, see:

Most likely due to this, which is needed to remove aggressive user-agent styles:

This can be dealt with quite easy in the project styles, or it could be something we add to Normalise/Reset?

It's a common UI pattern to have a <button> look like the default text link e.g. a Button Link component.

Making such a component means you have to copy the CSS for the default text link: https://github.com/campaignmonitor/shell/blob/master/src/_base.scss#L46-L58 which obviously isn't DRY.

Converting the default text link to a mixin will make things DRY as you can then just do this in your Button Link component:

.c-button-link {
    @include base-link;
}

Meaning there's only one source of truth.

When this happens review all stylelint disable/enable comments, e.g.

@mixin hidpi-bg-img($img-url, $img-width: auto, $img-height: auto) {
    /* stylelint-disable */
    @media (min-resolution: $shell-g-hidpi-dppx),
           (min-resolution: $shell-g-hidpi-dpi) {
    /* stylelint-enable */
        background-image: url('#{$img-url}');
        background-size: $img-width $img-height;
    }
}

Make sure to update the config file and remove stylelint_config.js.

$g-border-radius: 3px; it's looking like this is what we should use.

This is currently in _base.scss -> Images:

/**
 * Third-party widgets—like Google Maps—cannot have their images be responsive
 * as this breaks any images used within them therefore we remove that by
 * applying the two possible Google Map container selectors plus a generic
 * container selector to be used for other third-party widgets.
 *
 * N.B. it is okay to use `!important` here as we're doing it pre-emptively
 * i.e. you know you will always want the rule it's applied to to take
 * precedence.
 */

/* stylelint-disable */

.remove-responsive-images img,
#map_canvas img,
.map_canvas img {
    max-width: none !important;
}

/* stylelint-enable */

It should be in _helpers.scss.

Already been solved as part of CM's general architecture tooling, will adopt it to Shell.

This layout module doesn't seem to give us anything we can't achieve with a 2 column grid.

Investigate and remove it if above concern is valid

I think this:

:focus
{
    /* normalized default styles for all browsers */
    outline: currentColor dotted thin;
    /* on webkit and blink use focus ring;
       style of “auto” hides it, when using mouse or touch */
    outline: -webkit-focus-ring-color auto 5px;
    /*
    if one don't like webkit's ring, use this instead:
    @supports (outline-color: -webkit-focus-ring-color)
    {
        :focus { outline-style: auto; }
    }
    */
}
/* don't use outline on mozilla browsers, if it's not needed */
:focus:not(:-moz-focusring)
{
    outline: none;
}

Should live in Base or Normalise/Reset.

We do this by applying a negative bottom margin to the grid container that equals the gutter size.

This may not be needed as we might want to just handle disabled/readyonly styling within a specific component. If it stays I think we need to add the is-disabled state class.

https://github.com/campaignmonitor/shell/blob/master/src/_base.scss#L119-L124

See the "g" in this screenshot:

Reported in the latest Chrome/Safari. Firefox it isn't happening but Firefox has a different line-height. IE 11 and Edge we need to test in.

See: https://iamsteve.me/blog/entry/how-to-consistently-style-form-elements.

I found this is needed, something like:

.h-spacing-none {
    margin-bottom: 0 !important;
}

Can be added to the existing Spacing section in _helpers.scss.

It would be great if we could expose all of shell's libraries via an npm entry js.

For example:

var shell = require('./src/shell.scss');
var settings = require('./src/_settings.scss');

module.exports = {
  settings: settings,
  shell: shell,
  ...
};

This would allow npm modules (and webpack) to consume either the whole scss lib or just relevant libraries.

• Finish all test cases.
• Set up GH pages: https://help.github.com/categories/github-pages-basics/.
• Set up Grunt copy for images and anything else.
• Make responsive where applicable e.g. site header.
• HTML minification.
• CSS linting.
• Add a link to the Docs site in the header somewhere.

Seeing that we hardly ever use 16px.

line-height: 1; feels right as its set to the height of the text but we need to think about text in <label>s wrapping.

Fix: https://github.com/campaignmonitor/shell/blob/master/src/_settings.scss#L654-L805.

CI Tasks

When a PR is pushed to the Shell repo

• Passes all CSS linting rules (could use Gulp).
• Sass compiles (currently a Grunt command exists: grunt testShell, in the test/ folder).
• Versioning:
  • Grab the version from the .version file and apply it to the "version" object key in the package.json file.
  • Create a git tag: git tag -a vX -m "Version X" where "X" is the version number pulled from the .version file.

When a PR is merged to the master branch

• Run npm publish.
• Run git push origin [tagname].

Travis is a good option I think: https://travis-ci.org/.

They will be made clear in the docs site:

• PostCSS Autoprefixer

Steps to reproduce:

• create component with 2 col grid inside (no modifiers).
• put placeholder content in the cells
  • Put background colour on wrapping component to help visualise bug
• create another 2 col grid beneath this with a heading in one of the cells.

You will see the second grid has been pulled up under the first so the heading is cut in half.

I've started using shell in a few projects now, and one of the things I've come across that threw me was the different naming variants for scales. (the base keyword on spacing for example)

Example:

$shell-g-font-size-heading-small
$shell-g-font-size-heading
$shell-g-font-size-heading-large

$shell-g-spacing-small
$shell-g-spacing-base
$shell-g-spacing-large

$shell-container-maximum-width-small
$shell-container-maximum-width
$shell-container-maximum-width-large

I'm used to the difference now, but I imagine new adopters will find this annoying too as the spacing variable is the only scale that includes the base word.

Why the f*** is it not compiling?!

• Me

Disclaimer: I may not use shell in the way it was designed to be used. I never use any of the scaling helper classes. If i need to scale an element (either font-size, font-weight, padding, margin etc) that element will be part of a module, and so I'll be using the SASS variable $shell-g-font-size-heading-large rather than the heading heading--large helper classes.

We're doing this as base isn't used in the typography scale, the base setting is just $shell-g-font-size, so instead of $shell-g-spacing-base go with $shell-g-spacing. Other places base word is used:

• https://github.com/campaignmonitor/shell/blob/master/src/_settings.scss#L101-L105
• https://github.com/campaignmonitor/shell/blob/master/src/_settings.scss#L167-L168
• https://github.com/campaignmonitor/shell/blob/master/src/_settings.scss#L608-L614
• https://github.com/campaignmonitor/shell/blob/master/src/_settings.scss#L726-L732

See: http://utility-opentype.kennethormandy.com/.

• Grunt:
  • Purify CSS
  • CSS minification
  • HTML minification
  • Add NPM module loader
  • CSS linting
  • GH pages, need to point to another repo though as Test site is using this repo.
• Flexbox detection
• Animate SVG logo?
• Table of Contents for Shell feature views
• Better organise partials using sub folders
• Sass Docs
• CSS Shapes stuff
• Search engine:
  • http://community.algolia.com/docsearch/

We now have a larger spacing scale - all of these should be available to the l-grid layout module

https://github.com/necolas/normalize.css/blob/master/CHANGELOG.md#400-march-19-2016

We now have a larger spacing scale - all of these should be available as gutter widths for the l-side-by-side layout module