liip / kanbasu Goto Github PK

In some case you don't have the control over the markup and you might need to use @extend.
Could you please add silent classes to all components so we can easily extend them without any side effect?

Components should be flagged to display the following info when applicable:

• Version in which the component was introduced
• Warning when the component got major changes
• Version from which component is deprecated/removed

Unfortunately, the color property applied on link from the box component override other color property of nested elements.
https://github.com/liip/kanbasu/blob/master/src/assets/scss/components/_box.scss#L16

For instance:

.box {
    color: black;
}

.box a {
    color: inherit;
}

.btn--primary {
    color: red;
)

<div class="box">
   <p>This button has not the right</p>
   <a href="#" class="btn btn--primary">color</a>
</div>

If you try to set $font-size-default to any unit other than px, you'll get the following error:

Error: node_modules/kanbasu/src/assets/scss/defaults/_forms.scss
Error: Incompatible units: 'px' and 'em'.
        on line 104 of node_modules/kanbasu/src/assets/scss/defaults/_forms.scss
>>   height: floor($field-calc-font-size*$field-line-height + $padding-vertical +
   ----------------^

This happens on Kanbasu 1.7.0.

In settings, $namespace should be flagged as !default.

$font-size-default is used for several calculations, these calcs force the use of px, especially in typography.scss:
the html definition:
font-size: 100% * $font-size-default / 16px;
could be remplaced by something like:
@if ( unit($font-size-default) == "px" ){ font-size: 100% * $font-size-default / 16px; } @else { $font-size-unitless: $font-size-default / ($font-size-default * 0 + 1); font-size: percentage($font-size-unitless); }

In the same way, the function rem() in tools/functions.scss returns an error when $font-size-defaultisn't set in px

In order to let the user choose his default font-size, I would like to be able to set the $font-size-default with percentage values.
WDYT?

Just like it’s done in the README

• Clean-up all code flagged as deprecated until now
• Use classes instead of styling default form elements (input[type='text'], input[type='search'], …)
• Use Flexbox for media object
• Use Flexbox for Grid by default, drop inline-block version
• Use Flexbox for list-inline
• Drop mosaic component in favor of grid/media
• Don’t make dl--inline depends on the presence of the float helper partial
• Reduce madness of padding calculation for buttons and form fields
• Update Normalize
• Bump browsers support to IE11 / Flexbox required
• Add a customizable container/wrapper element #46
• Drop absolute positioning classes?
• Write migration guide
• Create a responsive table component #14
• Keep version 1 documentation somewhere and link it from the new documentation

Here is a list of current problems I see with Kanbasu 2 that I would like to fix in the next major version:

• It provides components or variants that are rarely used in project, or too much customized, so providing a default doesn't really make sense; for exemple: box, btn--small, btn--large, field--small, field--large.
• The configuration is either incomplete or too complex. For example the field style goes probably too far whereas it's not possible to change headings default font-sizes.
• There are multiple classes that apply the same properties and bloat the CSS, for example grid--middle == media--middle == pusher--middle, and could be achieved with a single utility class.
• Settings "ranges" like colors, font sizes, spacings, breakpoints, widths, … should all be Sass maps and utility classes should loop on them to generate classes. We should encourage the usage of PurgeCSS to remove unused classes.
• There should be more "spacings" values by default using a range that scales easily, for example 0, 1, 2, 3, 4, 5, 6, … instead of tight, tiny, small, large, huge.
• All utility classes and component variants should be possible to be applied per-breakpoint
• Breakpoint-specific classes should be refactored to all use the same naming convention.
• Lists inline should be refactored to not add unexpected spaces on the sides when it wraps on multiple lines

Globally prevent using hacks (inline-block, rtl, …) to create layout per columns as this module has been specially developed for such thing.

This should not replace the current grid as we still want to keep support for IE9. Maybe check out how this could degrade nicely on such browser.

Responsive behavior has to be investigated.

A component that list buttons inline on large screens but stack them as blocks on mobiles. The following code works just fine but lacks flexibility in terms of spacings and media query choice.

To be potentially split in two components: responsive lists (switch between inline and block) and responsive block buttons.

.actions {
  @extend %list;

  @include media('xs', $breakpoints-desc) {
    .btn {
      display: block;
      width: 100%;
    }

    > li:not(:last-child) {
      margin-bottom: $spacing-unit-small;
    }
  }

  @include media('sm') {
    > li {
      display: inline-block;

      &:not(:last-child) {
        margin-right: $spacing-unit-default;
      }
    }
  }
}

It currently triggers deprecation warnings in the latest Dart Sass version:

DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$spacing-value: null` at the top level.

   ╷
13 │     $spacing-value: nth($spacing, 2) !global;
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/kanbasu/src/scss/tools/_mixins.scss 13:5    foreach-alternative-spacing()

Hint from their Changelog:

Deprecate !global variable assignments to variables that aren't yet defined. This deprecation message can be avoided by assigning variables to null at the top level before globally assigning values to them.

Currently only the widths are mobile first. But it would makes sense to have the same behavior for spacings and display.

It happens quite often that you need to align something in the middle or on the side and having box alignment properties (align-items, justify-content, …) as helper classes would be quite useful in these case.

They could even replace some existing components modifiers to make the code more DRY. For example the grid has a grid--middle modifier just like media has media--middle and both could be replaced by an align-items-center class that itself could be used within a flex class anywhere.

I would consider this for version 3.

"Checkbox & Radio" for example, is not reachable with the quick search. Probably due to the special char.

See http://zellwk.com/blog/media-query-units/

We are starting to see some issues with parallelshell because of it's compatibility with newer node versions. In addition, parallelshell is in maintenance mode which means we're likely not to see fixes for the upcoming issues regarding node updates.

To resolve this issue, which already appeared for me, we should definitely switch to a solution like npm-run-all which offers the same features as parallelshell.

http://kanbasu.liip.ch/2/components/detail/btn-base.html

When a button has the class .btn the outline has been removed and there is no indication that the button has received focus.

Many people ask me if there’s a container in Kanbasu. Even if I think it is very specific to a project, it’s present in almost all so it probably make sense to provide one.

It would be great to add something like this:

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: $container-gutter-width;
  padding-right: $container-gutter-width;
}

.container--default {
  max-width: $container-default-max-width;
}

Thanks for the nice and simple framework, really like the grid and the spacing helper.
When I need to take a quick look at a particular section in the doc, it's not as quick as expected because of the 3 distinct html pages. I think that this is what makes the bootstrap documentation quite friendly when searching.
I understand you separated them because default list is not the same as list component for example, but for a small framework like this one I would just merge them. imo of course.

It would be perfect if we could avoid repeating media-queries in there and just get them from the Sass or wherever.

const MIN = {
  sm: '40.0625em',
  md: '48.0625em',
  lg: '64.0625em',
};
const MAX = {
  xs: '40em',
  sm: '48em',
  md: '64em',
};

export default function media(query, direction = 'up') {
  switch (direction) {
    case 'up':
      query = `(min-width: ${MIN[query]})`;
      break;
    case 'down':
      query = `(max-width: ${MAX[query]})`;
      break;
    default:
      query = '';
  }

  return matchMedia(query).matches;
}

Hello 😃,

This is cool to have text-right, text-left etc., but it does not adapt to the current text direction of the page. So having text-start and text-end that adapts to :root[dir="…"] would be awesome.

Thank ❤️.

In some cases, you want fields width to match their content, for inline use mostly. This is something Kanbasu should provide by default.

Small typo in http://kanbasu.liip.ch/2/components/detail/typography.html, notes are rendered in the component instead of being in the "notes" tab:

--- notes: | Use these only when dedicated tags, such as `em` or `strong`, are not applicable. Since version 1.5.0, you can also restrict alignment to specific breakpoints by prefixing them with the media query name, for example `.lg-text-right` to match only large screens. Those breakpoints are mobile-first and therefor apply to the targeted breakpoint and above. ---

PS: great job @LeBenLeBen , I like the level of simplicity and clarity!

To prevent users from having to copy and adapt the main and settings file when starting a new project, a script should be provided.

input--small nor input--large alter the height of <select/> elements.

• Simply hide with display: none
• Hide with visibility: hidden
• Hide but keep accessible for screen-readers ❓

Implement a simple component able to manage table overflows on small screens such as Bootstrap did.