justinhough / centurion

Centurion is a web-based framework for rapid prototyping and building larger web projects.

Hi there, I'm Justin. 👋

I'm a full-stack developer working at Hounder.

Hobbies

• ✍️ Writing
• 📚 Reading
• 👨‍💻 Coding
• ☕ Coffee

Stats

centurion's Issues

Add basic labels or badges

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.

Update NPM and RubyGem of Centurion Framework

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

Write Sass and usage documentation

Need to complete the documentation for:

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

How to use the semantic grid with Sass

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

Display issues on Documentation in IE9

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

Problem with gradients on IE

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

Grid push and pull on mobile is not being reset

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.

Add styling for form elements

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

test issue

test issue

Extend issue with anything that needs to extend from root.

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;
}

Force `ctn-container` to full width

@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.

Fix mobile navigation

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)

Source SASS file missing?

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.

Is it time to remove IE7 and IE8 Support?

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.

Cannot Center Grid Elements within Flex Grid

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

Default class collisions

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-

REM mixin cannot accept "auto"

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

Tables not responsive below 350px

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;
}

Grid not working on iPad in portrait

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

why GPL?

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

Update documentation to 3.3

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.

%clearfix issue when grid added directly to new project

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();