Kraken is a lightweight, mobile-first boilerplate for front-end web developers. View the demo and get started.
The code is available under the MIT License.
A lightweight, mobile-first boilerplate for front-end web developers.
Home Page: http://cferdinandi.github.io/kraken
License: MIT License
Kraken is a lightweight, mobile-first boilerplate for front-end web developers. View the demo and get started.
The code is available under the MIT License.
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
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.
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;
}
Currently only works on medium-sized screens and up. Add it to .row-start-xsmall
and .row-start-small
too.
Ensure this isn't happening in other scripts: cferdinandi/smooth-scroll#43
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.
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
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.
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>
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.
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.
Incorporate some of the newer approaches from Normalize and HTML5 Boilerplate into the reset.
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.
remove gh-pages
remove gh-pages
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
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
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 */
}
Like in Bootstrap: http://getbootstrap.com/javascript/#scrollspy
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.
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.
Remove hacks used for IE7 compatability:
This:
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
Becomes:
audio, canvas, video {
display: inline-block;
}
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: "";
}
You can install NAMESPACE with Bower by using the repository hook:
bower install https://github.com/cferdinandi/NAMESPACE.git
input-inline
has the display: inline
property and the width: auto
property. These two properties cannot exist together.
Change to display: inline-block
.
why not make the media queries in a separate css file or in the bottom?
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.
init()
call with options to run scriptsExample
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
};
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.
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?
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.
Astro
Drop
Houdini
Tabby
Jellyfish
Modals
X-Ray
Form Saver
Slider
Smooth Scroll
Right Height
I would like to see base table normalization by default in this way:
table {
max-width: 100%;
border-collapse: collapse;
}
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.
img { max-width: 100%; }
in _reset.css
breaks Google Map's zoom control.
Add dl
, dt
, and dd
styling.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.