westfieldlabs / scally Goto Github PK

Using inline-block instead of float allows for more layout options e.g. vertical alignment.

For an example, see.

Provide a way to remove this via a utility: https://github.com/westfieldlabs/scally/blob/master/core/base/_media.scss#L34.

Remaining sections:

• Design Principles
• Framework Overview

Ideas:

• Link to our HTML/CSS authoring guidelines when they're open-sourced.

A utility that strips away all browser default styles for buttons.

Currently the mixin generate-percentage-classes-at-breakpoints generates classes like .u-lap-one-half, which is inconsistent with the rest of the framework. The mixin should be updated to append the breakpoint to the end eg .u-one-half-from-lap

Right now Scally enforces a border for form inputs, this should be something you can override via a toggle.

I'm thinking we need the ability to be able to turn off the generate-at-breakpoints at the partial and global level as some partials e.g. https://github.com/westfieldlabs/scally/blob/master/utilities/_u-spacing.scss output a lot of CSS.

A utility that applies common cursor styles e.g. cursor: default.

See.

This will pin an element to all corners of the viewport with a semi-transparent bg.

http://codepen.io/mrrocks/pen/EiplA

A utility that can easily apply a super common transition e.g. subtle fade.

Discussed on HipChat:

Chris Pearce
10:08
@here worried about the generate-at-breakpoints mixin causing monster CSS files. I'm thinking remove it entirely from Scally, like keep the mixin but that's it then it's up to the fw author to create them when needed maybe in style.scss e.g.
Chris Pearce
10:08
@import "utilities/u-alignments";
@include generate-at-breakpoints('.u-align-v-inline-top',
  palm) {
  vertical-align: top;
}
Chris Pearce
10:08
@import "utilities/u-alignments";
@include generate-at-breakpoints('.u-align-v-inline-top',
  palm) {
  vertical-align: top;
}
Chris Pearce
10:08
anyway discuss at 11am
Chris Pearce
10:13
rather than this:
Chris Pearce
10:13
$u-alignments-breakpoints: palm;
@import "utilities/u-alignments";
Chris Pearce
10:13
which outputs this:
Chris Pearce
10:14
.u-align-v-inline-top {
  vertical-align: top; }
@media (max-width: 40em) {
  .u-align-v-inline-top-up-to-palm {
    vertical-align: top; } }
.u-align-v-inline-middle {
  vertical-align: middle; }
@media (max-width: 40em) {
  .u-align-v-inline-middle-up-to-palm {
    vertical-align: middle; } }
.u-align-v-inline-baseline {
  vertical-align: baseline; }
@media (max-width: 40em) {
  .u-align-v-inline-baseline-up-to-palm {
    vertical-align: baseline; } }
.u-align-v-inline-bottom {
  vertical-align: bottom; }
@media (max-width: 40em) {
  .u-align-v-inline-bottom-up-to-palm {
    vertical-align: bottom; } }
.u-align-v-inline-inherit {
  vertical-align: inherit; }
@media (max-width: 40em) {
  .u-align-v-inline-inherit-up-to-palm {
    vertical-align: inherit; } }
/**

• Block level vertical alignments.
  /
  .u-align-v-block-middle-flexbox {
    display: flex;
    align-items: center;
    justify-content: center; }
  @media (max-width: 40em) {
    .u-align-v-block-middle-flexbox-up-to-palm {
      display: flex;
      align-items: center;
      justify-content: center; } }
  .u-align-v-block-middle-table {
    display: table;
    height: 100%;
    width: 100%; }
  @media (max-width: 40em) {
    .u-align-v-block-middle-table-up-to-palm {
      display: table;
      height: 100%;
      width: 100%; } }
  .u-align-v-block-middle-table__inner {
    display: table-cell;
    vertical-align: middle; }
  @media (max-width: 40em) {
    .u-align-v-block-middle-table__inner-up-to-palm {
      display: table-cell;
      vertical-align: middle; } }
  .u-align-v-block-middle-position {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
  @media (max-width: 40em) {
    .u-align-v-block-middle-position-up-to-palm {
      position: relative;
      top: 50%;
      transform: translateY(-50%); } }
  /*
• Center align a block level element.
  *
• 1. Make it work on inline elements e.g. img.
     */
     .u-align-center-block {
       display: block;
       margin-left: auto;
       margin-right: auto; }
     @media (max-width: 40em) {
       .u-align-center-block-up-to-palm {
         display: block;
         margin-left: auto;
         margin-right: auto; } }
     Hide full text
     Alec Raeside
     10:15
     yea it doesnt seem worth it
     Chris Pearce
     10:15
     it's too dangerous
     Chris Pearce
     10:15
     just means its a big non-backwards compatible change to Scally

It would be nice to have a single util to pin to the sides and the bottom:

// Pin to the sides and bottom
%u-position-pin-sides-bottom,
.u-position-pin-sides-bottom {
    left: 0;
    right: 0;
    bottom: 0;
}

https://github.com/necolas/normalize.css/blob/3.0.2/CHANGELOG.md

.u-side-by-side-alt__left column width does not grow to use the amount of space needed by the content.

Expectation: the content placed in either .u-side-by-side-alt__left or .u-side-by-side-alt__right will take up the space it needs by default.

@AlecRaeside determined that this mixin doesn't work properly at all.

• http://pleeease.io/docs/

Be good to have a few utility classes that can apply custom line heights for the u-text-size- utilites e.g.

.u-text-line-height-normal {line-height: normal;}
.u-text-line-height-1 {line-height: 1;}

Should we have all the colour settings in a map: https://github.com/westfieldlabs/scally/blob/master/core/settings/_colours.scss?

The inline code example for the u-drop-down utility needs the u- prefix on all relevant classes.

Function outputs should be unit tested. Possible candiates are listed here http://mts.io/2014/04/02/sass-unit-testing/

The complexity of the generate-at-breakpoints mixin should be refactored by moving functionality into single purpose functions which should be unit testable.

Include all the compiled classes.

A component that groups buttons.

The generate-at-breakpoints mixin doesn't allow max width mq on arbitrary no's only the named bp: palm.

All non-base spacing utilities are missing the All spacing type.

In the todo: "Every Utility needs to be applied via all the main breakpoints"

I think this ability should only be available to some utilities. This will limit the flexibility of scally but will reduce the filesize:

Arrows: no
Blocklist: no
Bottom Spacing: no
Box: yes
Clearfix: no
Columns: yes
Complex Link: no
Disguised Link: no
Display: yes
Divider: yes
Drop Down: yes
Flag: yes
Float: yes
Hardware Accelerated: yes
Hide: yes
Horizontal List: yes
Image Replacement: no
New Block Formatting Context: no
Overlay: yes
Preserve aspect ratio: no
Pull: yes
Skip Link: no
Slats: yes
Smooth Touch Scrolling: yes
spacing: YES
split: yes?
Sprite bg: no
Sprite icon: no
Text: yes
Toggle Visibility: yes
Transitions: no
Vertical alignment: yes
Widths: yes

A component that lets you apply icons, preferably via inline SVG rather than icon fonts.

See.

The .scss-lint.yml config file should be included in the files that are published via bower. This will allow projects that use scally to share the same linting config.

A good round of device testing is needed for this component.

A component that styles a select list beyond the basic style options.

This will probably require Flexbox?

See

• Gem
• npm

Make sure all the setting values are aligning with each other.

A component that makes a button look like a link

@kllevin let's work together on this.

Good to eliminate these warnings:

 bower Scally#~1.0.18-421 mismatch Version declared in the json (1.0.23) is different than the  
 resolved one (1.0.24-444)
 bower Scally#~1.0.18-421  invalid-meta Scally is missing "main" entry in bower.json

Right now the only way to see demo's of Scally is via CodePen. We need to replace CodePen with a proper website to make it easier for Scally users to be able to get up to speed with the framework.

Ideas:

• Remove style.scss in favour of a dedicated web page on how to set this up

Component that applies main button styles.

For this mixin if you specify palm in the breakpoint list e.g. https://github.com/westfield/aem_centre-site/blob/master/content/src/main/content/jcr_root/etc/designs/centre-site/style/scss/style.scss#L217 the generated class is: .u-list-inline-up-to-palm however me and @kllevin thought that it should be: .u-list-inline-up-to-lap.

Generate breakpoint needs to be updated to handle spacing utilities that take multiple properties like ms: 'margin-left margin-right' or m-n: margin