I'm a full-stack developer working at Hounder.
- โ๏ธ Writing
- ๐ Reading
- ๐จโ๐ป Coding
- โ Coffee
Centurion is a web-based framework for rapid prototyping and building larger web projects.
Home Page: http://www.centurionframework.com
License: GNU General Public License v3.0
I'm a full-stack developer working at Hounder.
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.
A placeholder issue for updating the Centurion Framework NPM and RubyGem once bugs and patches are fixed.
Need to complete the documentation for:
Need some documentation on how to use the semantic grid system with Sass.
Problems in CSS when try to display buttons style on IE ...
fixed with :
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fced62', EndColorStr='#febf04'); /* IE6โIE9 */
New Sass grid markup for tablet and mobile is causing issues with the general reset for .ctn-push-#
and .ctn-pull-#
classes respectively.
@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.
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
Within some compilers the extend of %clearfix
and %column-base
fails because of extend not working properly between media queries.
Code reference on line 108 of _grid.scss
#{$class}-#{$i} {
@extend %column-base;
@extend %clearfix;
width: $percent;
}
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;
}
@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.
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)
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.
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
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 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
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-wrapper
and 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;
}
can it be used for commercial projects? what's the reason to use GPL?
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.
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.
@import 'centurion-framework';
@include clearfix();
@include column-grid();
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.