The framework looks baller. 👍

Any plans to make a scss version so that parts can be left out?

i.e. have each part a different partial and only import the partials that you need for the project.

Also, the core variables and colors for the project could be changes a lot more efficiently.

• Better public/private method namespacing
• Require init() call with options to run scripts
• Better documentation (noting what's returned on functions)

Example

var _privateMethods = function () {
    // do stuff...
};

var publicMethods  = function () {
    // do stuff...
};

var init = function ( options ) {
    options = options || {};
    var option1 = options.1 || default;
    _privateMethods();
    publicMethods();
};

// Return public methods
return {
    init: init
};

Hello,

Thanks for Kraken, I like it a lot. I want to make a 4-column footer and I don't see an easy way to do this with Kraken. I know I can nest the columns, but it just doesn't look as uniform as, say, a bootstrap 4-column grid. Any suggestions?

I would like to see base table normalization by default in this way:

table {
  max-width: 100%;
  border-collapse: collapse;
}

why not make the media queries in a separate css file or in the bottom?

You can install NAMESPACE with Bower by using the repository hook:

bower install https://github.com/cferdinandi/NAMESPACE.git

Convinced: http://lea.verou.me/2012/01/why-tabs-are-clearly-superior/

Maintain the 6 column grid, but add styling to specific classes for better performance.

This:
[class^="grid-"],
[class_=" grid-"] {
/_ Styles */
}

Becomes:
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
/* Styles */
}

The default input setting is display: block, and vertical-align cannot be used with block elements. Should be moved down to .input-inline class.

The current layout doesn't allow for four-column layouts, and grid-1 elements are never used.

Proposed Sizes (with offsets to match)

• .grid-quarter
• .grid-third
• .grid-half
• .grid-two-thirds
• .grid-three-fourths
• .grid-full

Sub-Grids

Kraken currently allows for the grid the start earlier than the default if so desired using the naming conventions above, with numbers for the default behaviors.

For version 3, I propose the use of a new class to trigger early grid behavior: .grid-small. Apply to any .row to toggle grid layouts at smaller screen sizes.

It may also be worth adding a .grid-medium class for mid-sized screens, allowing .grid-small to maintain grid structure on really small phone screens.

Currently only works on medium-sized screens and up. Add it to .row-start-xsmall and .row-start-small too.

• Smooth Scroll
• Buoy
• HTML Minify
• Google Analytics
• Antispambot
• Remove Header Junk
• No Self-Pings
• Google-Hosted jQuery
• Image Compress & Sharpen
• Exclude From Search
• Remove Trackbacks
• WordPress Theme Options
• WordPress for Web Apps
• Petfinder for WordPress

The most important functionality: a default "link to image" that get's replaced on scroll. That way if someone is using an unsupported browser, they can still get to the image if desired.

http://blog.cloudfour.com/hide-show-passwords-plugin/

on http://cferdinandi.github.io/kraken/
the tilte Kraken with the kite - jellyfish logo is in some fat style different from the other H1 and much bigger.
Is this using an extension or something else. I cannot seem to reproduce that font and font size using the same code when e.g downloading the hero addon and including kraken.css in the provided hero-master/index.html . I feel i am missing some font or something that is part of github pages maybe

img { max-width: 100%; } in _reset.css breaks Google Map's zoom control.

Ensure this isn't happening in other scripts: cferdinandi/smooth-scroll#43

cferdinandi/smooth-scroll#43

In lieu of a formal style guide, take care to maintain the existing coding style. Don't forget to update the version number, the changelog (in the readme.md file), and when applicable, the documentation.

Remove hacks used for IE7 compatability:

Audio, Canvas, Video

This:
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}

Becomes:
audio, canvas, video {
display: inline-block;
}

Clearfix

This:
.group:before, .group:after,
.container:before, .container:after,
.row:before, .row:after {
display: table;
content: "";
*zoom: 1;
}

Becomes:
.group:before, .group:after,
.container:before, .container:after,
.row:before, .row:after {
display: table;
content: "";
}

I suggest to add word-wrap: break-word to headings in the same way you already do to links
https://github.com/cferdinandi/kraken/blob/master/css/kraken.css#L351

For example:

h1, h2, h3 {
  word-wrap: break-word;
}

Test case: http://jsbin.com/ITABIzA/2/edit

While there are several community-built Sass versions, I'd like to move to the official Kraken release to Sass for version 3. More on the approach here: http://gomakethings.com/kraken-sass-and-open-source/

Files Needed

_config.scss
_reset.scss
_grid.scss
_typography.scss
_code.scss
_buttons.scss
_forms.scss
_icons.scss
_add-ons.scss
_alignment-spacing-visibility.scss
_print.scss
kraken.scss

Proposed Structure 1

|--- Build
... |--- fonts
... |--- img
... |--- js
... |--- index.html
... |--- kraken.css
|--- kraken.scss
|--- _config.scss
|--- _reset.scss
|--- _grid.scss
|--- _typography.scss
|--- _code.scss
|--- _buttons.scss
|--- _forms.scss
|--- _icons.scss
|--- _add-ons.scss
|--- _alignment-spacing-visibility.scss
|--- _print.scss

Proposed Structure 2

|--- Build
... |--- fonts
... |--- img
... |--- js
... |--- index.html
... |--- kraken.css
|--- scss
... |--- kraken.scss
... |--- _config.scss
... |--- _reset.scss
... |--- _grid.scss
... |--- _typography.scss
... |--- _code.scss
... |--- _buttons.scss
... |--- _forms.scss
... |--- _icons.scss
... |--- _add-ons.scss
... |--- _alignment-spacing-visibility.scss
... |--- _print.scss

ACTUAL STRUCTURE

|--- Build
... |--- css
....... |--- kraken.css
... |--- fonts
... |--- img
... |--- js
... |--- index.html
|--- css
... |--- _config.scss
... |--- _mixins.scss
... |--- kraken.scss
... |--- components
....... |--- _buttons.scss
....... |--- _code.scss
....... |--- _forms.scss
....... |--- _grid.scss
....... |--- _icons.scss
....... |--- _overrides.scss
....... |--- _print.scss
....... |--- _reset.scss
....... |--- _typography.scss
|--- fonts
|--- img
|--- js
|--- index.html
|--- template.html

https://help.github.com/articles/github-flavored-markdown#fenced-code-blocks

http://cferdinandi.github.io/kraken/grid.html

<div class="row">
    <div class="grid-1">.grid-1</div>
    <div class="grid-4">.grid-4</div>
    <div class="grid-1">.grid-1</div>
</div>

Add dl, dt, and dd styling.

Long links without any hyphens can run outside of the content area. This can be fixed by applying word-break: break-all; to the a element.

Currently, the vanilla CSS build is in the Build folder, which is weird and due to a limitation in the software used to compile the Sass files.

I've switched to CodeKit, and will be recompiling with an sass folder and a css, both in the main directory. This will also result in less duplication and a smaller total size.

Hi. For those who use libsass to compile SCSS, I suggest that you change your filter rules to avoid the error reading values after opacity error: sass/libsass#72

Offending styles: _typography.scss (line 77) and _buttons.scss (line 57).

Cheers.

input-inline has the display: inline property and the width: auto property. These two properties cannot exist together.

Change to display: inline-block.

Like in Bootstrap: http://getbootstrap.com/javascript/#scrollspy

Kraken is nice! :) I really appreciate the use of vanilla JS.

The Modals add-on examples do not work when one clicks on the buttons.

http://css-tricks.com/almanac/properties/t/tab-size/

Kraken uses a base of 17px for it's typographic scale. Frankly, that was a stupid decision and makes for really weird, ugly math. I'll be redesigning the scale with a base of 16px.

In Bootstrap i am using : <div class="input-append"> and <div class="input-prepend">
to slap some icon next to my input .

With Kraken : i settled for using the icon in a grid-1 and the input in a grid-5 however this doesn't render well on small screens since the icon is above the input

Would it be possible to have a class like non-fluid that we could add to row to make that row not fluid.

Forgive me if I've just missed how to do this, but let's say I'm building an e-commerce site where I want to show four product images across on a regular monitor and two product images across on a mobile device. I see how I can use row-start-xsmall to define columns for mobile, but is there a way to define a row that is 4 columns for monitors and 2 columns for mobile without creating separate divs and using media queries to accomplish this? Thanks.

http://css-tricks.com/international-box-sizing-awareness-day/

*, 
*:before, 
*:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

Incorporate some of the newer approaches from Normalize and HTML5 Boilerplate into the reset.

Astro
Drop
Houdini
Tabby
Jellyfish
Modals
X-Ray
Form Saver
Slider
Smooth Scroll
Right Height

The kraken(-for-wp).scss does not fully work with some applications like LiveReload, Koala, SiteFlow. Problem is the import-style:
@import
"config",
"mixins", ...
Only the first import is recognized.

No problems with:
@import "config";
@import "mixins"; ...

Hammer for Mac is awesome, and I'd like to start using it more. An add-on (much like Kraken for WordPress).

Hold off until version 3 of Kraken to take advantage of Sass.

Example: http://foundation.zurb.com/docs/components/equalizer.html

A Basic jQuery Version:

// Set all course tiles to an equal height
var setCourseListItemHeight = function () {

    // SELECTORS
    var items = jQuery('.course-listing-text');
    var height = 0;


    // METHODS

    var getHeight = function ( index ) {
        var item = jQuery(this);
        if ( item.height() > height ) {
            height = item.height();
        }
    };

    var setHeight = function ( index ) {
        var item = jQuery(this);
        item.height(height);
    };


    // EVENTS, LISTENERS, AND INITS
    items.css( 'height', 'auto' );
    jQuery.each( items, getHeight );
    jQuery.each( items, setHeight );

};

To determine if elements are stacked or inline:
Calculate distance from first element to top of document, and compare to other elements. If they're different, elements are stacked. If not, they're inline (and it's ok to run script).

Approach
Require parent element to handle different rows. Example:
data-balance
data-balance-item

CSS Components

• Snapshot, basic image styling.
• Tables, simple CSS table styling.
• Hero, basic callout boxes.
• Social Sharing links and buttons without the bloat.
• Progress Bars, lightweight CSS progress bars.
• Alerts, simple alert messages.
• Labels, lightweight CSS labels.
• Backgrounds, basic section dividers.
• Spinners, CSS rotation animations. (Decommission)

WordPress Basics

remove gh-pages

• Kraken for WordPress, a WordPress theme boilerplate.
• HTML Minify, compress your HTML output.
• Google Analytics, add an optimized Google Analytics script.
• Antispambot, hide your email address from spam robots.
• Remove Header Junk, removes the junk WordPress adds to the header.
• No Self-Pings, prevent internal links from showing up in your comments.

WordPress Specialty

remove gh-pages

• Google-Hosted jQuery, use Google's CDN for better performance.
• Image Compress & Sharpen, reduce image file size.
• Exclude From Search, exclude pages and posts from search results.
• Remove Trackbacks, umm... removes trackbacks.
• WordPress for Web Apps, transform WordPress into a web app engine.
• WordPress Theme Options, adjust theme settings from the admin dashboard.
• Petfinder for WordPress, functions for working with the Petfinder API.