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.

• iOS fix for unreadable disabled content; see.

Seeing that we hardly ever use 16px.

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.

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.

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:

• 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/

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.

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

See: h5bp/html5-boilerplate@fea7f22.

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

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.

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

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

• 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.

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

E.g. l-container.

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

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.

They will be made clear in the docs site:

• PostCSS Autoprefixer

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;
    }
}

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.

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.

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

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

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/.

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

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

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

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?

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.

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.

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

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

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;
}

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

See: necolas/normalize.css#517.

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.

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

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

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