armordarks / ekzo Goto Github PK

Update $version behavior to handle random version

Subj

Add forms modfifiers

Like:

• o- for objects
• h- for helpers
• s- for scopes
• ...

Probably it should be configurable

• Merge devices, custom and etc maps into single $ekzo-breakpoints
• Improve mixin to work with such change

• as replacement of font icons
• option to use font icons and SVG icons for legacy cases

Some readings:

• https://github.com/blog/2112-delivering-octicons-with-svg
• https://habrahabr.ru/company/devexpress/blog/269331/

Partially related to Kotsu

Add at least information about Kotsu starter kit

• Prefix with ekzo-
• Remove base- for variables with basic values, since without that prefix such values are basic by default
• Consistent naming

Add __elements to objects like nav, block-list etc which could be optionally used instead of plain selectors like nav > li.

• rems to pxs function
• font-size function
• rem-generating mixin
• rem-generating mixin even for margins and other properties
• added new parameter for rems into ekzo-font-size() mixin

We need here more complex mixins, because all fallbacks for IE8 should be generated automatically.

Rems will allow to change whole website font-size and margins/paddings for specific screen just by changing root font-size in media query

Write single function to access all 2-dimensional maps easier

Add %silent selectors for helpers and objects

Add ability to use custom media queries.

Probably it should be predefined map breakpoints--custom and parameter in mixin, which will accept bool to trigger that map, or variable to trigger another map

Store fonts in map and loop through it to output shorthand helper-classes and font-faces for each

$fonts: (
    'Open Sans': (
        file:  ... (optional);
        version: ... (optional);
        ...
    ),
    ...
) !default;

Replace

// ---------------------------------------
// Background
// ---------------------------------------

$ekzo-bg: $ekzo-bg-color;

with maps, or separate variables.

They should handle such parameters:

$ekzo-bg: url('#{$ekzo-images-path}/bg--hero.jpg') fixed center 290px $ekzo-bg-color;

Add option to use floated grids, like .floated-grid

Add size variations and rename

• Add ability to define default btn hovers
• Add --border variant

• Arrange;
• More compact view with better information.

Replace arrows mixin and object with more advanced version

Specify if, loops, functions and mixins names in closing comments

It should be configurable and set by default to some value.

Possible candidates:

• _
• e-
• ekzo-

Replace shorthand properties like margin, padding with separated ones to make overriding of single property easier

Since initial idea with rems didn't worked out #40, we have to consider some better options.

So far:

1. Do everything manually
2. Enhance current $ekzo-font-sizes map to carry information about font-sizes for specific elements for specific breakpoints.

$ekzo-font-sizes: (
  text: (
    base: (
      phone: 14px,
      phone-ls: 14px,
      tablet: 16px,
      tablet-ls: 16px,
      lap: 16px,
      desk: 16px,
    ),
    '--': (
      phone: 12px,
      phone-ls: 12px,
      tablet: 14px,
      tablet-ls: 14px,
      lap: 14px,
      desk: 14px,
    ),
    '-': (
      phone: 11px,
      phone-ls: 11px,
      tablet: 12px,
      tablet-ls: 12px,
      lap: 12px,
      desk: 12px,
    )
  )
) !default;

but this looks like... too much...

• Better alignment classes for flexbox. Current conjured with text-align classes may cause some issues... needs testing.
• vertical aligment helpers/mixins. Probably as per http://www.sitepoint.com/centering-with-sass/, http://howtocenterincss.com/ and https://css-tricks.com/centering-css-complete-guide/

Snippet from http://www.sitepoint.com/centering-with-sass/

/**
 * Enable position context for the child
 */
.parent {
  position: relative;
}

/**
 * Absolutely center the element in its parent
 * No dimensions are passed to the mixin, so it relies on CSS transforms
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margin for the
 * horizontal axis and CSS transforms for the vertical axis
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * Absolutely center the element in its parent
 * Height is passed to the mixin, so we rely on a negative margin for the
 * vertical axis and CSS transforms for the horizontal axis
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margins for both
 * horizontal axis and vertical axis
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}

@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width / 2) #{0 0} -($height / 2);
  } @else if not $height {
    width: $width;
    margin-left: -($width / 2);
    transform: translateY(-50%);
  } @else {
    height: $height;
    margin-top: -($height / 2);
    transform: translateX(-50%);
  }
}

Line-height helper modifiers for various line height

Add essential information about ekzo.sass

Yet to be decided do we really need it.

We could allow to define specific for certain scopes font sizes, which will generated all needed sets of helpers classes.

Like that:

$ekzo-font-sizes: (

  text: (
    base: 14px, // used for vertical rhythm calculation; = .text--base, .font-size--base, .line-height--base
    '-':  12px, // = .text-,  .font-size-,  .line-height-
    '--': 10px, // = .text--, .font-size--, .line-height--
  ),

  headings: (
    h1: 36px, // = h1, .h1, .font-size--h1, .line-height--h1
    h2: 30px, // = h2, .h2, .font-size--h2, .line-height--h2
    h3: 24px, // = h3, .h3, .font-size--h3, .line-height--h3
    h4: 21px, // = h4, .h4, .font-size--h4, .line-height--h4
    h5: 18px, // = h5, .h5, .font-size--h5, .line-height--h5
    h6: 16px, // = h6, .h6, .font-size--h6, .line-height--h6
  ),

  extra-headings: (
    \+\+: 96px, // = .extra-h\+\+\+, .font-size\+\+\+, .line-height\+\+\+
    \+:   72px, // = .extra-h\+\+,   .font-size\+\+,   .line-height\+\+
    base:   44px, // = .extra-h\+,     .font-size\+,     .line-height\+
  ),

  buttons: (), // = .btn--*name*

  // --------> here magic happens
  blog: (
    text: 20px,
    headings: ()
  )
  // --------> here magic ends

) !default;

Think about color maps and loops to output .text--{color}

• Better name for variants
• Variable-driven content property

• Add breakpoints-controlled sizes modifiers
• Add ability to define default btn hovers
• Add --border variant

Add map for sprites files instead of single variable

Replace all CSS comments with Sass version

Add more widths variations

Think about better starting values.

Some help:

• https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
• http://design.google.com/resizer/

subj

• Improve code;
• Replace repetitive parts with functions

// @param {string=$font} $file-name        - should be specified in case of different
//                                           font file name from font name

should be

// @param {string} $file-name=$font        - should be specified in case of different
//                                           font file name from font name

Make better looking default colors

Improve naming of paddings and margins helpers

Update documentation of objecs, mixins, functions, helpers etc.

Subj

Think about renaming some components, folders, files etc

Info: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Merge constructions like

@if $ekzo-enable-responsive-widths {

    @each $breakpoint, $value in $ekzo-breakpoints {
        @include ekzo-breakpoint($breakpoint) {
            @include ekzo-widths('#{$breakpoint}-');
        }
    }

} // endif

into single each-breakpoint() mixin

Redefine in default settings

Think about better order

• Merge all groups (breakpoints, types, etc.)
• Instead let each breakpoint have settings about should responsive helpers and objects be generated for it or no
• Let select which exactly helpers and object should generate responsive classes for that breakpoint (probably, via list)

Something like:

$ekzo-breakpoints: (
  palm: (
    rule: 'screen and (max-width: #{$ekzo-lap - 1px})',
    generate-responsive: (buttons, grid, spacing, tables, widths)
  ),
  lap: (
    rule: 'screen and (min-width: #{$ekzo-lap}) and (max-width: #{$ekzo-desk - 1px})',
    generate-responsive: ('*')
  ),
  retina: (
    rule: 'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi)',
    generate-responsive: false
  ),
  vetina: (
    rule: 'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi)'
  )
) !default;

Find suitable name for patterns

.elem+ + .elem+ { margin-top: 10px }

.parent+ {
    .elem + .elem { margin-top: 10px }
}

.parent+ {
    a,
    li
    elem { margin: 10px }
}