I've spotted this issue since v3, but hadn't any cases where I can test it until today, so I can confirm that there is a problem with the pagination element in FF. Tested in FF 34.0 and FF Dev 36.0a2.

I think the problem is within the overflow-hidden div that supports the responsiveness.

• vars
• custom media
• rework npm

I've git clone'd the repo, and ran npm install, but when I run gulp for some reason I'm getting the following error:

module.js:340
    throw err;
          ^
Error: Cannot find module '../aws.json'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/realph/Desktop/stories/tasks/s3.js:4:14)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Not sure if I'm doing something wrong. Coming off the Christmas holidays, I wouldn't be surprised.

Any help is appreciated. Thanks in advance!

Sorry if this is a silly question, but is there a .scss version of this that I can use?

I cloned the Basscss repo around a month ago, but I've got a bit of a custom build going on, where I'm importing the ./scss files into a file called ./src/main.scss.

I've noticed I'm a few versions behind and was wondering what's the best way to update the repo and keep all my Basscss components up to date?

To showcase the various sites that have been built with Basscss, I'll be putting up a gallery/blog section on the site. If you'd like to have your site featured, please leave a link to it in the comments.

The $bold-font-weight variable isn't declared at the top of the file with the other variables.

I'm currently digging into the missing variable on my fork: https://github.com/johnotander/basscss/compare/update-sass. Though, it looks like it might be an issue with css-scss

would that maybe be possible?

Would you consider adding a .flex-noshrink class to prevent some things from shrinking below their minimum content size?

.flex-noshrink { flex-shrink: 0; }

cf. Minimum sizing bugs here

Maybe I'm crazy, but I don't see any of the flex classes in the compiled end products (basscss.css and basscss.min.css) from any source (GH, bower, CDN).

Looks like @import 'basscss-flex-object'; needs to be added to basscss/src/basscss.css.

Hey,

I'm trying to experiment a little with the project and I can't find a easy way to run the guideline.

gem install rake
rake dev

What about the http serving the guideline? Should I do something else?

Thanks!

PD: I'm not a ruby developer

The link in the README to the CDN has an error in it:

<link src="http://d2v52k3cl9vedd.cloudfront.net/basscss/4.1.2/basscss.min.css" rel="stylesheet">

links use href to specify the file's location, not src :)

For some reason the gulp images task is throwing back this error.

events.js:72
throw er; // Unhandled 'error' event
^
Error: write EPIPE
at errnoException (net.js:904:11)
at Object.afterWrite (net.js:720:19)

Any idea what it might mean?

Carrying on from #70:

Angular directives are probably first on my list, because of my familiarity and the popularity of the library. Polymer is also on the radar because of the similarities to spec-based web components. And, of course, React because of its component-based approach.

Do you have a specific plan/implementation in mind for adding basscss Polymer components?

Here's where I'm at pondering this so far (I'm not particularly familiar with Polymer components, but have been meaning to dive in for some time):

It appears there's a pretty useful generator for polymer:seeds, which can be leveraged to quickly scaffold out each CSS/HTML module to include in a web component. However, one potential pain point is that it looks like Polymer components want to introduce bower dependencies (for linking the styles to the component), and most basscss modules are currently only configured with npm package.json files. This will require some rejiggering by either registering CSS modules with bower or adding the CSS from an npm dependency as some sort of basscss Polymer build.

When I get a chance I will begin fiddling some more to see if there's a way to easily leverage the module CSS as an npm dependency (perhaps something like a gulp task).

I followed the guide for building with Gulp and Rework but when I run gulp rework in the last step I get this error:

[09:58:06] Using gulpfile ~/Projekte/Repos/jancbeck.com/assets/bower_components/basscss/gulpfile.js
[09:58:06] Task 'rework' is not in your gulpfile
[09:58:06] Please check the documentation for proper gulpfile formatting

I installed via bower in this example but it's the same when I clone from github.

Next I looked into gulpfile.js and spotted the task gulp basswork that I ran:

$ gulp basswork
[10:03:42] Using gulpfile ~/Projekte/Repos/jancbeck.com/assets/bower_components/basscss/gulpfile.js
[10:03:42] Starting 'basswork'...
[10:03:42] Finished 'basswork' after 14 ms

That created uncompressed, minified, and gzipped versions of the file.

Is this an mistake in the docs or code? I'm new to gulp, so I'm trying to make sense of it.

Do you have any plan to bring back Sass support?

I love BassCSS, and learned a lot about scales and CSS preprocessing by playing around with the scss source. Now with Rework all the joy seems gone. I find pretty difficult to wrap my head around it.

Thanks in advance

This might been seen to be a feature, so I should caveat:

I see Basscss as being something that can be dropped into a well-written HTML document, and bar adding a couple of simple classes (e.g. table in tables) there shouldn’t be a need to add in extra margin to make a page work.

So with that in mind, I have a bug where the paragraph of text after a table always sits right up against the table.

Obviously the work around is to use mt2 or similar on the first paragraph or on the table adding space below, but it’s circumstantial. In a use case I have, I’m parsing Markdown into HTML, I can easily replace <table> with <table class="table">, but adding correct spacing around it is tricky.

So I understand Basscss uses Rework. I'm using Yeoman to generate out an Angular app for me. I'd typically install a CSS library with Bower, @import it at the top of my main.scss file and go from there. It's worth noting this app uses Grunt as a task runner.

I'm very new to Rework, but would like to give it a go. I understand it uses Gulp, which I'm a huge fan of and have used previously. I guess what I'm asking is what would be the best way to go about including a copy of Basscss into my app? Would Grunt and Gulp clash? How do I get Rework to work with all of this? I've read through the Using Rework page, but I can't seem to understand it.

My project directory looks like this:

/app
/bower_components
/dist
/node_modules
/test
bower.json
Gruntfile.js
package.json

If anyone could help point me in the right direction, it would be really helpful. Thanks in advance!

I'm trying to get to grips with Basscss to use it on a project I'm working on during the holidays. It's worth noting that it's my first time using Rework, but for some reason runs for cover I can't seem to understand how it all fits together even after reading through the docs. I wondered if someone on here could help answer a few questions?

• Is gulp dev the command I want to run when developing a page? I ask this, because if I edit the ./index.html file and run gulp dev later, it reverts the changes I've made to the page. Is there a different command I should be running when developing?
• While running the watch-css task changes made to ./src/basscss.css are saved out to ./css/basscss.css and ./css/basscss.min.css, I take it ./src/basscss.css is the primary CSS file I should be editing?
• What's with the ./scss directory then?
• What would be a typical workflow for using something like Basscss?

Sorry if these questions border on stupidity. I'd really appreciate if someone could help point me in the right direction. Any help is appreciated.

Thanks!

Again, thanks for an awesome project, @jxnblk.

I've noticed that recently you've begun wrapping basscss for other frameworks (ng, handlebars). I'm curious if there's interest in an Ember wrapper, namely one that integrates with the ember-cli.

Thanks to the modularity of this project it'd be possible to add each as a single module to an Ember project:

• ember-basscss-buttons
• ember-basscss-typography
• ember-basscss-forms
• etc.

Only requiring ember install:addon ember-basscss-buttons to inject basscss components and CSS into the app. With an all-encompassing ember install:addon ember-basscss which basically introduces dependencies for all the other modules.

I'd be happy to create all the wrappers for integrating basscss CSS and components (as a whole and as separate modules) into ember-cli projects. However, I don't know if you'd like those to be under your own repo umbrella, @jxnblk, or if I should just start creating them under mine. Thoughts?

Hello!

What is the best way to have a 3-column layout be full-height in basscss?

Currently, I'm doing:

<div class='root' style='height: 100vh;'>
  <div class='container'>
    <div class='clearfix outline-blue'>
      <div class='col col-2 border' style="height: 100vh;" >
        <p class='m1'>Col 1</p>
      </div>
      <div class='col col-4 border' style="height: 100vh;" >
        <p class='m1'>Col 2</p>
      </div>
      <div class='col col-6 border' style="height: 100vh;" >
        <p class='m1'>Col 3</p>
      </div>
    </div>
  </div>
</div>

Which works, but seems wonky :/ The use case is to have Col1 be a sidebar with links, and Col2 a list of messages (potentially empty). Am I wrong for wanting to mandate height? I don't see mentions to it on the docs. Take into account I'm kind of a stranger to CSS :D

Thanks for any pointers!

• Basic
• Wireframe
• Blueprint
• Bassdock
• Basscore
• Basskit
• Bassmap
• Bassbook
• Bassstrap
• Bassdrop
• Basskick
• Basshub

As of now, I'm unable to use this product because there's no license included, unless that's your intention

Flex Object

• flex-column + flex-center, flex-stretch, flex-start, flex-end
• Update example div/button styles
• Include all examples from solved by flexbox

Button Outline & Button Transparent

• Show all basic color combinations

Guides

• Design for index
• Use consistent example styles
• Better hero image for layout guide
• More flex-object examples in UI guide
• Add flex grid guide
• Descriptions for Custom Builds and Using Rework

Other

• Safe color combination list with visual examples
• Note which utilites use inherited properties
• Better placeholder image for background images utility
• Update Showcase
• Modular/linkable table of styles
• Specificity graph in Stats
• React customizer app
• Add optional modules to customizer app

It seems odd that there isn't a standalone class for this, considering how often I need it. Is there a reason this class doesn't exist?

• Clarify double-sided media object example
• Check on clarity of positions section

e.g. https://github.com/jxnblk/basscss/blob/master/scss/_utilities.scss#L23

Considering how often it's used, it seems odd that basscss doesn't have a class for it. Is there a reason for this or might it be added?

I'm using the bower-main-files node module to inject bower dependencies into my html files.

Currently, you have "basscss.css" as the main file, which according to your tree structure should be "./css/basscss.css".

www.nixlos.de
www.anhaltischer-kunstverein.de
www.michaelamaxischulz.de

I’m trying to use Rework and my own Sass, but I can’t get them to play nicely.

Example:

main.scss

@import "basscss-base";
@import "basscss-utilities";

:root {
    --font-family: Georgia, serif;
}

body {
    /**
     * As an example
     */
    h1 {
        color: #f00;
    }
}

gulp.js Example 1

'use strict';

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var basswork = require('gulp-basswork');
var mincss = require('gulp-minify-css');

var DEST = 'public/var/';

// CSS
gulp.task('sass', function () {
    gulp.src('./resources/sass/*.scss')
        .pipe(basswork())
        .pipe(sass())
        .pipe(gulp.dest(DEST))
        .pipe(mincss())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(DEST))
});

// Run!
gulp.task('default', ['sass']);

Returns:

Error: /home/user/project/resources/sass/main.scss:9:5: property missing ':'

Then by swapping around basework() and sass():

gulp.js Example 2

'use strict';

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var basswork = require('gulp-basswork');
var mincss = require('gulp-minify-css');

var DEST = 'public/var/';

// CSS
gulp.task('sass', function () {
    gulp.src('./resources/sass/*.scss')
        .pipe(sass())
        .pipe(basswork())
        .pipe(gulp.dest(DEST))
        .pipe(mincss())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(DEST))
});

// Run!
gulp.task('default', ['sass']);

Returns:

Error: source string:1: error: file to import not found or unreadable: "basscss-base"

So in example 1 basework() doesn’t like Sass, and in example 2 sass() doesn’t like @import "basscss-base";.

This might be a Gulp error, or maybe a Rework problem, I’m not quite sure right now.

My goal is to be able to do this:

.user-name {
    @extend .border-bottom;
}