When create a custom build, everything is fine apart from the config that is still called KO.

KM = custom name
//initialise KM object
var KM = {};
KO.Config.init();

Just as the title states? Shall we remove modernizr? I can't remember the last time I used it properly on a project. If you just need to do the no-js/js switch, there are better ways to do that. If people want it, they can add it themselves.. What do you think @munkychop @nicbell @ashleynolan @CiaranPark

As part of the next slew of updates, I want to improve the styleguide. As #47 mentions, it is currently a little confusing to use the styleguide, and maintain it, while working on a project.

My tasks at the moment are:

• Improve the styleguide’s design
• Use Statix to manage the styleguide - this should make it easier to develop allowing devs to create all components as includes and have multiple pages if need be.
• Styleguides should look like the site that you're developing but I would like some Kickoff branding somewhere on the page (probably a footer or something

I recently found Heroku's styleguide, we could take some inspiration from that.. @ashleynolan do we want to have code snippets in ours as well?

The choreographic grid needs updating, it could be simplified and improved

/cc @nicbell

In the second paragraph in http://tmwagency.github.io/kickoff/demos/, the link to "Getting Started" points to "http://0.0.0.0:8000/kickoff/learn/"

• ES2015 by default using babel - most of this work has already been done in the ES2015 branch
• Eslint - switch to use eslint instead of jscs and jshint - most of this work has already been done in the ES2015 branch
• Flexbox - provide a good, flexbox-based alternative to the kickoff grid and block-grids. My recommendation is to use suitcss/components-grid (I think this may need to be ported to Sass for ease of use..). Would be nice to install CSS dependencies with npm though..
• Remove Grunticon - I think there are better icon solutions out there. Perhaps we don't need to include one at all. Controversial??
• Drop IE8 support. I think its time now. We can remove the 2 CSS file generation, the question in the Yeoman generator and various other things..
• Other CSS improvements. I have a list of various things I'd like to do after having read @LeaVerou's CSS book recently

What do you think @nicbell, @ashleynolan & @munkychop? Did I miss anything? Should we remove any files, rearrange any directories? I would like Kickoff to be as useful as possible.

When using yeoman version of kickoff.
Changes make to script JS. wont trigger browser sync.
According to me is probably related with grunt watch.
Any clues ?

Hey @ashleynolan & @nicbell, here's my list for the next version of Kickoff, please add any other things that you'd like. I don't think this is a v6, but probably a v5.1.0.. what do you think?

• Switch to Browserify? see #57
  • Switch to minifify in the Browserify build
  • Remove grunt-contrib-uglify
  • Remove chotto if we move to Browserify build is not needed anymore
• Add a modifier to .l-blockGrid > .l-blockgrid--guttered. Thanks @nicbell
  • remove dependency on unordered lists @nicbell, will you be able to do this?
• Update custom radios & checkboxes. 50% done by @mrmartineau
• Remove some grunt plugins
  • Remove Grunt photobox, what do you think?
• Update package.json to move some items in optionalDependencies. @nicbell
• Refactor the .media element so it doesn't always stack on skinny viewports
• Simplify tables @ashleynolan #61
• Add jsHint and scsslint tasks @ashleynolan
• Use cutting the mustard test for loading shims

Please could you put any items you'd like to have in the next major version of Kickoff, whether it be v4.2.0 or v5.0.0. We can then work out a roadmap for releasing the new features.

/cc @ashleynolan

I think we should remove the js/helpers/cookies.js for a better lib. I have seen a few on bower that look good, they are:

• https://github.com/ScottHamper/Cookies
• https://github.com/js-coder/cookie.js

Have you guys used them or tried any others?

Removing our cookie lib would make the framework even more lightweight and promote the use of bower.

/cc @ashleynolan @tommaton @munkychop

Hello! I've found a bug on the page http://tmwagency.github.io/kickoff/demos/ . Links under 'Guide to Kickoffs demos' header lead to wrong URL's, I get 404 error. Href attribute duplicate '/kickoff/demos/' part of url,so they lead, for example, to 'http://tmwagency.github.io/kickoff/demos/kickoff/demos/typography.html' instead of 'http://tmwagency.github.io/kickoff/demos/typography.html'. Maybe it is not very important, but I preffer to inform you.

• Switch scss with new version
• Update all new features
• Revisit documentation for each feature
• Improve 'getting started' page, possibly a getting started screencast
• Add a blog

Text and icons mixed on the examples page http://tmwagency.github.io/kickoff/demos/index.html
Could you look at

Windows 7. Last google chrome. Version 31.0.1650.63 m and IE10
Screen resolution 1280x800

Would be nice to use grunt-uncss (https://www.npmjs.org/package/grunt-uncss) to remove all unnecessary CSS classes to make it even more lightweight.

I've used it on a couple of sites with great success, the latest compiled Kickoff framework CSS from 89.43kb --> 44.76kb

I saw on Dropbox's Scooter framework, that they have helper classes for type size. We have kind of have this at the moment with our headings:

// Use the helper classes to emulate styles for another element
// For example: h3.h1 or h3.alpha
h1, .h1, .alpha {
    @include font-size($type-largest);
    margin-bottom: $baseline * 2;
}

h2, .h2, .beta {
    @include font-size($type-large);
}

h3, .h3, .gamma {
    @include font-size($type-mid);
}

h4, .h4, .delta {
    @include font-size($type-base);
}

h5, .h5, .epsilon,
h6, .h6, .zeta {
    @include font-size($type-small);
    margin-bottom: 0;
}

What do you think of removing the helper classes from the above and making more generi classes like below:

/**
 * Type sizes
 */
.type-micro    { @include font-size($type-micro); }
.type-smallest { @include font-size($type-smallest); }
.type-smaller  { @include font-size($type-smaller); }
.type-small    { @include font-size($type-small); }
.type-base     { @include font-size($type-base); }
.type-mid      { @include font-size($type-mid); }
.type-large    { @include font-size($type-large); }
.type-largest  { @include font-size($type-largest); }
.type-jumbo    { @include font-size($type-jumbo); }

We could even have this so it is made perfectly clear what sizes each element uses:

/**
 * Type sizes
 */
.type-micro         { @include font-size($type-micro); }
.type-smallest      { @include font-size($type-smallest); }
.type-smaller       { @include font-size($type-smaller); }
.type-small, h5, h6 { @include font-size($type-small); }
.type-base, p, h4   { @include font-size($type-base); }
.type-mid, h3       { @include font-size($type-mid); }
.type-large, h2     { @include font-size($type-large); }
.type-largest, h1   { @include font-size($type-largest); }
.type-jumbo         { @include font-size($type-jumbo); }

Which would ultimately look something like this:

/**
 * Paragraphs
 */
p {
    font-family: $font-family-base;
    margin-top: 0;
    margin-bottom: $baseline;

    // Measure - ideally about 65 chars per line
    // max-width: $type-base * 30 + px;

    // & small {
    //  color: lighten($color-text, 10%);
    // }
}

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: $font-family-headings;
    font-weight: $font-weight-headings;
    line-height: $line-height-headings;
    text-rendering: optimizelegibility; // Fix the character spacing for headings
    margin-top: 0;
    margin-bottom: $baseline;

    small {
        font-weight: normal;
    }
}

// Use the helper classes to emulate styles for another element
// For example: h3.h1 or h3.alpha
h1 {
    margin-bottom: $baseline * 2;
}

h5
h6 {
    margin-bottom: 0;
}

// Only give these headings a margin-top if they are after other elements
* + h1, * + .h1, * + .alpha,
* + h2, * + .h2, * + .beta,
* + h3, * + .h3, * + .gamma,
* + h4, * + .h4, * + .delta {
    margin-top: $baseline;
}

small {
    font-size: 80%;
}

/**
 * Type sizes
 */
.type-micro                { @include font-size($type-micro); }
.type-smallest             { @include font-size($type-smallest); }
.type-smaller              { @include font-size($type-smaller); }
.type-small, h5, h6, small { @include font-size($type-small); }
.type-base, p, h4          { @include font-size($type-base); }
.type-mid, h3              { @include font-size($type-mid); }
.type-large, h2            { @include font-size($type-large); }
.type-largest, h1          { @include font-size($type-largest); }
.type-jumbo                { @include font-size($type-jumbo); }

Would love some feedback on this please @munkychop @CiaranPark @ashleynolan @nicbell

Hi gents,

Great framework you have created, well done!

I've got an idea I would like to share. Recently working on complex multiselect form field structure I came across nice jQuery based replacement. I think this would be great addition to this framework.

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
http://ivaynberg.github.io/select2/select2-latest.html

Best wishes,
Rento

Just putting this in to discuss any future work on our plans to try moving the framework over to use Gulp instead of Grunt.

I’ll be putting together a branch for this this week, so that we can see if there are any unforeseen things we need to address, but now GruntIcon is being removed from the project this should be a straightforward task.

I'd like to integrate Bower into Kickoff in a more seamless way. Historically I would bower install whatever and then just add the file to the <%=config.js.fileList%> array in the Gruntfile config. Is this the best way to handle bower dependencies?

There are some Grunt plugins that move the bower dependencies to another folder, out of the bower_components, the js/libs/ folder for example. Is that preferable?

/cc @nicbell @ashleynolan @munkychop

I would like to revisit the default js setup, we have been using Browserify for much of our work at TMW, should that be used by default?

• What should we include by default? (shims, plugins etc)
• Should we use bower for all external dependencies?
• Should we use the UMD style for all modules?

/cc @munkychop @ashleynolan @nicbell @CiaranPark @bardius

this is a test

Line 115 of _forms.scss should be

background-color: $input-background;

Because it is settable in the colour palette.

I would like to rename scss/partials to scss/modules, then remove the components directory and bring all the "components" *.scss into this new modules folder. I think it is confusing to have this differentiation when there is no obvious reason behind it (I know we (@ashleynolan & I) discussed it at length a while back). Thoughts?

/cc @nicbell @munkychop

The placeholder mixin was originally used because Autoprefixer didn’t add prefixes to :placeholder declarations.

This has since been fixed, so we should remove the placeholder mixin and test that Autoprefixer now adds this during the compile step.

See related issue that was raised on the site repo.

It looks like all offsets are being generated as g-offset1.
The bug is on line 121 of _choreographic-grid.scs
.g-row > .g-offset1 { the '1' should be dynamic.

This is the current output.

    .g-row > .g-offset1 {
        margin-left: 0.03157895%;
    }

    .g-row > .g-offset1:first-child {
        margin-left: 10.03157895;
    }

    .g-row > .g-offset1 {
        margin-left: 0.14736842%;
    }

    .g-row > .g-offset1:first-child {
        margin-left: 20.14736842;
    }

Would be cool to add HTML Validation as a separate task in grunt.

Thinking this shouldn’t run on watch, but perhaps we should consider creating a test set of tasks and add it to that, leaving us scope to add JS testing tasks at a later date.

This grunt plugin looks like it should do the job https://www.npmjs.org/package/grunt-html-validation

Normalize has been updated many times since we last updated it, so we should update it. I saw on the project Github page that it can be installed with npm, so I thought that we could ensure we always use the latest version if we add to package.json and then reference it in _dependencies.scss. This would be amazing but the lib would be in the npm_modules folder, which would make writing the path annoying so we may need to write a post npm install script to copy the file across..

Thoughts?

/cc @ashleynolan @nicbell

The class name in utilities.scss

    .l-floatLleft

is spelt incorrectly, it should be

   .l-floatLeft

Having been using Kickoff for more minimal sites lately, I’ve found that it can be a bit of a chore when removing parts that are not needed to not simply be able to remove the specific scss from the dependencies.scss and not be left with any artifacts anywhere else.

However, you then also have to go into color-palette.scss and variables.scss and remove variables specific to these features.

As a possible enhancement, would be good to talk over the possibility of moving these variables to the top of their respective component files. I feel it also could make the color-palette.scss more clear for new users and not be quite as full-on, as I think it’s becoming a bit unclear on which variables are the most important being used in a build.

Thoughts?

Hi team (@nicbell & @ashleynolan), there are still a few things to do for the next version before it can be released.

• Complete all tasks in #60
• Port all changes to the generator, see TryKickoff/generator-kickoff#10 for what's needed
• Update any documentation on the trykickoff.com site.
  • I have made many improvements but I will need some help with the homepage content. Have a look, you will see that I have added a feature overview section that needs completing.
• Update the changelog with any changes (this is nearly completed)
• Write a blog post about the release

Is there anything else?

As the title suggests, do you think we should use Browserify as the default way to bundle javascript? We could keep the existing way in the Yeoman generator..

/cc @ashleynolan @nicbell

I would like to remove a few styles from Kickoff. Horizontal definition lists, some nav list styles and some other things.. I don't think they're useful to Kickoff's core.. do you agree @ashleynolan @nicbell?

Here's the sauce:

Horizontal Definition list

.dl-horizontal {
    @include clearfix;

    dt {
        @include text-overflow();
        float: left;
        clear: left;
        width: 220px;
        text-align: right;
    }

    dd {
        margin-left: 240px;
    }
}

Nav styles

We could keep .unstyled but remove nav ul & nav ol...

/**
 * Unstyled lists
 */
.unstyled,
nav ul, nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
}

Blockquote

/**
 * Blockquotes
 */
blockquote {
    padding-left: 10px;
    margin: $baseline;
    border-left: 4px solid lighten(#000, 80%);

    p {
        margin-bottom: 0;
        @include font-size($type-base);
        font-weight: 300;
    }

    small {
        display: block;
        color: lighten(#000, 70%);

        &:before {
            content: '\2014 \00A0';
        }
    }
}

// Quotes
q,
blockquote {
    &:before,
    &:after {
        content: "";
    }
}

Address

// Addresses
address {
    display: block;
    margin-bottom: $baseline;
    font-style: normal;
}

Close Button

/**
 * Close Button: for lightboxes etc
 */
.btnClose {
    position: absolute;
    right: 20px;
    top: 20px;

    display: block;
    height: 20px;
    width: 20px;
    line-height: 17px;

    background: #000;
    color: $color-primary;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;

    &:hover {
        color: #fff;
        border-radius: 50px;
    }
}

I’ve found it a little tricky in terms of when starting a project and using the styleguide along-side the setup docs and statix build (when using the generator).

For example, if I run grunt start, and then immediately try and run grunt styleguide, it cannot serve up the styleguide via grunt-connect because the ports it requires to do so are already in use by the earlier started grunt connect task.

We just need to tweak this so that it is possible to run these tasks simultaneously when working on a project, without having to edit the grunt configs to allow for this.

Currently the defaults for tables aren’t all that sensible as they tend to be used without classes in content (especially if using a CMS as they are used for tabular content).

So, going to look at making the default styles for tables more useful – providing simple defaults that can be extended.

Will also update the docs once this work is complete.

Things like PSI: http://updates.html5rocks.com/2014/06/Automating-Web-Performance-Measurement

I'm sure there are more but this one looks good.

/cc @ashleynolan @CiaranPark @bardius @nicbell

When running the build task, this error persists:

Running "imagemin:grunticon" (imagemin) task
Fatal error: Cannot read property 'contents' of undefined

Removing 'newer:imagemin:grunticon' from the 'icons' task allows the build to proceed.

npm cache clean && npm install grunt-contrib-imagemin was attempted but does not solve the problem.

when I installed kickoff for the first time .
it tried to load this script :

assets/dist/js/script.js

when only this one was available:
assets/dist/js/script.min.js

Improve the default form input styles, have seen http://wtfforms.com/ & http://lifes.gd/slice.

Also need to have multiple column support, perhaps we can tie this into the grid or create something new.

• Multiple columns for inputs
• Input with button attached

What do you think?

/cc @ashleynolan @nicbell @CiaranPark @bardius

The values produced by the modular scale for type should be rounded up so that the pixel equivalents are whole numbers, rather than to 3 or 4 dp as some of them are calculated. Makes the compiled CSS much more standard.

https://github.com/tmwagency/kickoff/blob/master/scss/_variables.scss#L30

It’s long been a goal to integrate some kind of JS test framework into Kickoff.

Obviously, this could be quite rocky ground, as there are lots of different options out there and I think this will be where the generator will definitely come in handy for including/excluding testing from potential setups.

If we do implement this, should it be as a feature branch – like the Browserify setup – that we then only include as an option in the generator. Or should this be something we build into the master of Kickoff?

Thoughts please @mrmartineau, @munkychop and @nicbell :)

Hi Guys,

It seems that there is a problem with the current grunt-contrib-imagemin, when you do a build it fails.

You'll need to upgrade the version from 0.9.4 -> 1.0.0 and then the grunt builds work again.

Tom

I have created a very basic checklist-style page to help new users to Kickoff get started.. (that was a mouth-full). I'd like some feedback from people familiar with the project.

Please ignore the design for now, but could @nicbell, @ashleynolan, @bardius and @tommaton spare some time to check it out?

The easiest way to view it is to download Kickoff and open /_docs/index.html but if you want to be clever, try this:

git clone https://github.com/tmwagency/kickoff.git -b next 'kickoff-next' && cd kickoff-next && npm install && grunt start

By the way, grunt start is a new task I have setup that I think would be useful when beginning new projects as well. It creates a local copy of jQuery, uglify's the js, compiles Sass and opens up the start page, in this case, the new checklist page.

Let me know what you think, pull requests always welcome.

Need to switch the order around as otherwise the variables and color-palette files cannot use any of the functions and mixins if needed.

https://github.com/tmwagency/kickoff/blob/master/scss/styleguide.scss

Hello,

the "for" values for the inputs at http://tmwagency.github.io/kickoff/demos/forms.html are all the same, for example for="text", which results in jumping all the way to the top of the first input where it got declared.

Thomas

Grunt-icon seems to be causing issues when I go to npm install from a new Kickoff (and Statix) build.

I’m running node v5.4.1 and npm v3.3.12 (see included screengrab).

It seems from a bit of hunting around online that this is an NPM issue itself rather than with grunticon, as trying to install worker-farm separately also doesn’t work for me. As this is a dependency for grunticon this is why the error appears.

Not sure how often this issue occurs but may be worth seeing if it affects anyone else as it’ll stop people from being able to run Kickoff.

DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
Error: File to import not found or unreadable: functions/compact.
Load path: /Users/fabz/Dropbox/fabzelaida/FABZTV2014/Fabz/kickoff
on line 1 of scss/functions/_functions.scss
from line 18 of scss/_dependencies.scss
from line 9 of scss/kickoff.scssError: File to import not found or unreadable: functions/compact.
Load path: /Users/fabz/Dropbox/fabzelaida/FABZTV2014/Fabz/kickoff
on line 1 of scss/functions/_functions.scss
from line 18 of scss/_dependencies.scss
from line 17 of scss/kickoff-old-ie.scss

Use --trace for backtrace.
Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue.

This might seem frivolous but I think it would be good to provide our own styling for scrollbars. Slack has done this and I think it looks great. Thoughts?

/cc @ashleynolan @CiaranPark

In V6 of Kickoff when using the Kickoff generator and choosing to use Statix a comma is missing from the complie task in the Gruntfile after images.

grunt.registerTask('compile', [
        /* 'checks', / uncomment this line if you want to run linting checks on your SCSS/JS as part of your build*/
        'browserify',
        'postscss',
        'images'
        'copy:statix',
        'assemble',
        'shimly',
        'copy:modernizr'
    ]);

Have already started this at https://github.com/tmwagency/kickoff/tree/gruntconfig

Is this worthwhile?

Following the guide at http://trykickoff.github.io/learn/use.html , I get an error on the "Install Bower and its dependencies" step:

bower install
bower ENOENT No bower.json present

I've been thinking about adding some more sass components, these could be simple like we have already or more involved like the off-canvas/drawer navigation, with JS included etc.

Are there any that you'd like to include?

/cc @ashleynolan @CiaranPark @nicbell