justinhough / centurion Goto Github PK

When adding @include column-grid to a new project directly an error occurs since %clearfix is not present. Current solution relies on making sure that @include clearfix is in the project.

Current Solution:

@import 'centurion-framework';
@include clearfix();
@include column-grid();

I'm I blind or is this repository missing the original source SASS file(s) :) ?

All I can find is this: https://github.com/jhough10/Centurion/blob/master/css/centurion.css ... which appears to be the compiled version.

@jnorthcott22 requested feature where he noted that his design could not allow for the grid to be used with full page width in certain areas. This feature would be a class addition to allow the .ctn-container width to change based on necessity to a design.

.ctn-full-container { width: 100%; }

Original use case was part of the fluid grid container, but this case would allow for specific areas to change based on usage not in changing the entire grid max-width for an entire site.

Currently the worldwide usage of IE7 is less than 1% and having those dependencies does bulk up the framework. It might be time for the Centurion Framework to join the cause. http://www.theie7countdown.com/

However, with IE8 usage still around 10% of the world. http://www.theie8countdown.com/ It might be good to keep that dependency as part of the framework for now, but I don't think that any specific hacks are required.

Problem discovered with ctn-center not centering grid elements within a row.

.ctn-center {
  align-self: center;
+ justify-content: center;
}

https://github.com/justinhough/Centurion/blob/master/lib/sass/centurion/_flex-grid.scss#L193

Labels or badges, similar to buttons but way different. Also, would be nice to have a way to add basic styling for notifications to elements.

Need to work on adding form styling, error handling, and other basics to framework. Possibly even add some flair for Wufoo form integration.

New Sass grid markup for tablet and mobile is causing issues with the general reset for .ctn-push-# and .ctn-pull-# classes respectively.

Current Implementation

@if $i > $tablet-columns {
  .#{$push-class}-#{$i}, .#{$pull-class}-#{$i} {
    @extend %no-push-pull-tablet;
  }
}

@if $i > $mobile-columns {
  .#{$push-class}-#{$i}, .#{$pull-class}-#{$i} {
    @extend %no-push-pull-mobile;
  }
}

Needs to extend push and pull reset up the tree so that within mobile media query the push and pull classes for desktop and tablet are reset respectively. Need to implement a solution that doesn't add bulk to the framework.

Mobile navigation will hide the desktop navigation if user clicks in a certain area. Need to allow for only classes and CSS to make the show/hide functionality. Classes should only be set on mobile.
[ ] fix centurion js
[ ] adjust styles for mobile navigation
[ ] pull some styles out of centurion framework and put in custom (should be more generically styled)

There are some display issues with IE9 and with button colors. Also, the font does not seem to be loading properly.

With the eventual release of Centurion 3.3 our main features page has gotten a complete overhaul, but the documentation section is little more than a teaser in the wind. It needs to show how to use the features that already exist in Centurion, but also showcase the latest/greatest features.

Problems in CSS when try to display buttons style on IE ...
fixed with :
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fced62', EndColorStr='#febf04'); /* IE6–IE9 */

A placeholder issue for updating the Centurion Framework NPM and RubyGem once bugs and patches are fixed.

Tried to view with ipad in portrait and got no grid. Works in landscape.

can it be used for commercial projects? what's the reason to use GPL?

Issue: Table content pushes past 100% preset on screen devices below 350px.

Possible Solution: JS creation to wrap tables with wrapper to allow the table to be scrolled horizontally. JS will create ctn-table-wrapperand ctn-responsive-table.

HTML Markup:

<div class="ctn-table-wrapper">
  <div class="ctn-responsive-table">
    <table class="red-table striped-table">
      ...
    </table>
</div></div>

CSS Markup:

.ctn-table-wrapper {
  position: relative;
  margin-bottom: 1rem;
  overflow: hidden;
}
.ctn-responsive-table {
  overflow: scroll;
  overflow-y: hidden;
}

Need the ability to pass auto as a value into REM mixin without it causing the following error during Grunt Sass compile:

>> invalid operands for multiplication

An example would be to use @include rem(margin, 16 auto) for auto centering a block element.

Reference file: _mixin.scss - Line 12

test issue

Issue with collisions with the .container and '.grid-#' classes. Proposed that these be the new options for container and grid default classes to avoid styling issues with other styles being added, as well as, to add specificity to the framework.

• container to ctn-container
• grid- to ctn-grid or ctn-column
• tablet- to ctn-tablet-
• mobile- to ctn-mobile-

Need to complete the documentation for:

• Sass (mixin library)
• CSS (HTML usage)
• NPM (install and usage)
• RubyGem (install and usage)

Within some compilers the extend of %clearfix and %column-base fails because of extend not working properly between media queries.

Current Issue:

Code reference on line 108 of _grid.scss

#{$class}-#{$i} {
  @extend %column-base;
  @extend %clearfix;
  width: $percent;
}

Possible Solution:

Wrap code to extend from root since the main grid needs to be at one level so that all mobile, tablet, and desktop grid classes are extended from the same properties.

#{$class}-#{$i} {
  @at-root (without: media) {
    @extend %column-base;
    @extend %clearfix;
  }
  width: $percent;
}

Need some documentation on how to use the semantic grid system with Sass.