Should be #f7f7f7

It's currently #f5f5f5

:-)

The resource box's content-cat has padding-left: 20px and straight after is overridden with padding: 0. This padding: 0 needs to be removed.

Colour: #f7f7f7

On the project homepage, the "getting started" section should mention that you can hotlink to the project. But it shouldn't mention "ruby", "gulp" etc.

It should instead just link to the project homepage, and instruct people to follow instructions there to get it working locally. (See #75 and #67).

eg: http://bazaar.launchpad.net/~canonical-webmonkeys/ubuntu-web-style-guide/trunk/view/head:/css/responsive/latest/core-grid-desktop.css which is now https://github.com/ubuntudesign/web-style-guide/blob/master/scss/_core-grid-desktop.scss

Looking on Firefox the button and link button look different. Looks like a padding issue

Some elements have px font-size's applied. Forexample:

p, li, code, pre {
font-size: 16px
...
}

These should use em's and only the body should have a px value.

Set it to #dd4814 and tie it in as the link colour of the a links. We may even want to use this as the primary button color.

.link-top a needs margin-top: -35px as the rows padding has changed. We should set the row padding with variables in the scss therefore auto updating all components that need it.

A box styles to vanilla.

We need to add med-six-col support. A good example if the icon list on http://www.canonical.com/careers.

Remove the bevel colour styles for the header navigation and look more to a Cloud style for inspiration.

When building a new page for maas.u.com I noticed we don't have the video container CSS. We should have this as a part of vanilla.

Relative urls for assets might be a problem if users are self hosting, so you'd either need to move those assets into this project or use absolute urls to a cdn?

Looking at the equal heights block I get this issue of it not working. I have uploaded a screenshot as reference. Safari version 8.0.6.

It is likely an external site would like to change the font family from Ubuntu. Be creating an override-able setting this will to easier to do.

Deprecate all id selectors for classes. i.e,

#main-content { .... }

to:

.main-content {
    ....
}```

The form <input type="search"> does not fall in line with the vanilla styles of inputs. We should apply them and also make sure that areas where there are more custom styles for this element do not get effected.

There are some rules for table styling in the Google doc:

• Table header
  • h4. 1.250 / 1.3
• Row titles
  • p. 1.000 / 1.5
  • Colour #888888
• Title hr
  • 1px solid hr
  • Colour #cdcdcd
• row hr
  • 1px dotted hr
  • Colour #cdcdcd
• row hover
  • Colour #F7F7F7

Write something about reporting bugs (in Github issues) on the README and on the project homepage.

Can we make the colour of the numeral or the bullet point: #888888

So currently if you were to place an image with a greater width inside of a column it will overlap like so, this doesn't look great and we should incorporate what we had from ubuntu guidelines into vanilla.

Reference to the var in _tooltips.scss.

gulp build should be producing ubuntu-styles.css and ubuntu-styles.css.min.

I can see some code which looks like it should do that in gulpfile.js but it's not working.

Should be #f7f7f7

An status event on a field gets a outline with the same colour as the label. so… 

• Status success (green): #38b44a
• Status warning (yellow): #eca918
• Status error (red): #df382c
• Status information (blue): #19b6ee

It'll be helpful to anyone who needs to install ruby/sass/etc to fix a bug or build/rebuild as part of a deploy process if there are detailed install instructions in either README or INSTALL

Can we make the padding etc the same as on Maas (@richmccartney) and use the chevron?

Understand that when you click the drop-down the styling will be dictated by the browser / OS

Looking at a disabled input element it still looks exactly the same as a normal active input. Can we amend the styling not to confuse people who see this.

While using Web Style Guide for the Ubuntu-it website, I noticed that on Chromium a strange "x" appears on the search input when a value is provided.

After some investingations, I found that Chrome/Chromium and probably IE (I don't want to start it) appends a very ugly "x" in the right edge of all <input type="search" ...>, which is used to clear the input.
It doesn't happen on Firefox, or other browsers.

If you want to fix that, here is the css snippet for webkit:
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

And this (untested) for IE:
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }

This is in the Google doc: https://docs.google.com/a/canonical.com/document/d/1f2XGx2qBL6QBDsY0w9v15c_JJwauyx3jwRWmCRHaKnM/edit?usp=sharing

But also here:

• Brand colour: #dd4814 (depends on the brand)
• Text grey: #333333
• Dark grey: #888888
• Mid grey: #CDCDCD
• Light grey: #F7F7F7
• White: #ffffff
• Status success (green): #38b44a
• Status warning (yellow): #eca918
• Status error (red): #df382c
• Status information (blue): #19b6ee

Because the project homepage is on Github Pages, everything is run through the Jekyll parser. This means we can add includes into the homepage. This could be leveraged to add dynamic content areas.

We should update the jenkins build to ask for a description for each new release, and then add the latest version number and the description to includes within the gh-pages branch, which can then be shown on the homepage.

I've created a little example of what I mean.

This would mean that to create a new release can be done entirely from Jenkins, and the publishing of the new version and the docs will happen automatically.

Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead

$ node_modules/gulp/bin/gulp.js sasslint
[13:42:38] Using gulpfile ~/projects/web-style-guide/gulpfile.js
[13:42:38] Starting 'sasslint'...
[13:42:41] 1 issues found in /home/robin/projects/web-style-guide/scss/_core-grid-desktop.scss
[13:42:41] /home/robin/projects/web-style-guide/scss/_core-grid-desktop.scss:501 [W] Avoid using id selectors
[13:42:41] 'sasslint' errored after 2.35 s
[13:42:41] Error in plugin 'gulp-scss-lint'
Message:
    ScssLint failed for: _core-grid-desktop.scss

The Travis build won't succeed until this is passing.

Is is possible to have the length of the vertical dividers match the tallest column in the row?

For instance, if a column of text has less text in it than the others, the vertical divider that is associated with it is shorter (and looks odd).

Are we able to apply the same rules we use in "Equal Heights" to the vertical dividers?

MAAS needs to be able to work in an offline environment. This means that the paths embeded in the scss should easily be changed, using variables would make this a lot easier then having to find and replace all urls.

With all <textarea>'s if set to readonly they shouldn't be allowed to have an active state when clicked. Can we amend this please.

When looking at the button components the 2nd button style using a <button> element has an inset box shadow.

This should be removed and kept in line with the <a> styling of a secondary button.

The focussed state for all form fields should be #888888

Looking at the form styles <input type="submit"> is not using the vanilla button styles. Need to apply the correct styling to this element.

mhall119, hi
http://cn.developer.ubuntu.com/
is using google fonts
which, doesn't work in China

Looking at the vanilla theme its still very ubuntu we should look at the styles Jamie & Spencer created and start to pull out the orange and make it far more of a blank slate.

• Remove borders
• Make full width
• Check padding with the text. Looks a little high

Currently – 

When a form field with a error status is clicked into it loses the colour associated with it. Can we keep the colour until the error is resolved…

In SASS, if you use an operation to calculate a value, you then have to concatenate the unit. If you just append the unit, the resulting compiled CSS has a space between number and unit.

Ex.
font-size: ($size / $base)em;
Compiles into:
font-size:2 em;

This is an error in CSS, because 2 em is not an accepted property value. So, you need to concatenate the number and the unit, like this:

font-size:($size / $base)+em;
Compiles into:
font-size:2em;

DETAILS

Files:
core-mixins.scss lines 8-9-60-62-64
core.scss lines 212-218-222-228-283-286-457

UPDATE 2014-05-21

Concatenating number and unit turns the value into a string. In order to just convert a unit-less number to one with a unit, just multiply it for one desired unit.

E.g.
$size: 2;
$base: 1;
($size / $base)em compiles into 2 em (not accepted property value)
($size / $base) + em compiles into 2em (string - accepted by CSS, but may cause problems in SASS)
($size / $base) * 1em compiles into 2em (number, em value - good both for CSS and SASS)

I've had a quick look at the CSS file whilst I was trying to find some colours and I noticed that there's a #cdcdcd colour in there for the outline of fields. It's so close to #d2d2d2 that you'd never noticed the difference. I think we specified #d2d2d2 so can you make sure that #cdcdcd doesn't appear.

It really is a minor thing, but in core.js from assets.ubuntu.com, under the core.svgFallback function (like 179), rather than saying if (typeof Modernizr !== "undefined") you directly state if (Modernizr). Changing it to do a comparison between typeof Modernizr and undefined should stop the ReferenceError from showing up in the console.

Looking through the header.scss file feel like it needs a little love, especially in the medium break point area. A bit of a prune and a clear up would totally benefit it. When looking at the cloud styles with vanilla there were a few annoyances we could clear up.