trykickoff / kickoff Goto Github PK
View Code? Open in Web Editor NEW:basketball: A lightweight front-end framework for creating scalable, responsive sites. Version 8 has just been released!
Home Page: http://trykickoff.com
License: MIT License
:basketball: A lightweight front-end framework for creating scalable, responsive sites. Version 8 has just been released!
Home Page: http://trykickoff.com
License: MIT License
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/"
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
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.
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
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.
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
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 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 ?
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:
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.
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
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
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
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.
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
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.
The choreographic grid needs updating, it could be simplified and improved
/cc @nicbell
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 :)
this is a test
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
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.
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?
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.
Hi team (@nicbell & @ashleynolan), there are still a few things to do for the next version before it can be released.
Is there anything else?
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();
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?
grunt-contrib-uglify
chotto
if we move to Browserify build is not needed anymore.l-blockGrid
> .l-blockgrid--guttered
. Thanks @nicbell
optionalDependencies
. @nicbell.media
element so it doesn't always stack on skinny viewportsI 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.
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?
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'
]);
The class name in utilities.scss
.l-floatLleft
is spelt incorrectly, it should be
.l-floatLeft
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:
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?
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'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?
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.
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;
}
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
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
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:
.dl-horizontal {
@include clearfix;
dt {
@include text-overflow();
float: left;
clear: left;
width: 220px;
text-align: right;
}
dd {
margin-left: 240px;
}
}
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;
}
/**
* 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: "";
}
}
// Addresses
address {
display: block;
margin-bottom: $baseline;
font-style: normal;
}
/**
* 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;
}
}
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
Things like PSI: http://updates.html5rocks.com/2014/06/Automating-Web-Performance-Measurement
I'm sure there are more but this one looks good.
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.
What do you think?
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
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
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?
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
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
Have already started this at https://github.com/tmwagency/kickoff/tree/gruntconfig
Is this worthwhile?
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.