Giter Club home page Giter Club logo

centurion's Introduction

Centurion FrameworkCenturion

NPM version Gem version Gitter chat

Centurion is a responsive framework built for speed, simplicity, and flexibility. Originally based loosely on the 960 grid built by Nathan Smith, Centurion boasted a responsive grid system that would help alleviate the headache of building responsive designs. Like all web projects it grew and started to capitalize on several different areas like: typography, buttons, tables, and more in order to create a seamless framework that could allow web developers to start up a new project easily without the need to override every little piece.

If you're concerned about browser support then we recommend either html5shiv or Modernizr to your web site or project to help support CSS3 and HTML5.

@TODO

  • Rebuild grid to use Flexbox and CSS Grid - Complete Guide to Flexbox and Complete Guide to CSS Grid
  • Rework for responsive breakpoints
  • CSS classes re-analyzed to be more semantic
  • New color scheme and full greyscale for backgrounds, text, etc. - Sass Color Variables That Don’t Suck
  • Better documentation
  • Component and Pattern library for frequently used layouts
  • SCSS to Sass linter via Hound
  • Travis CI integration
  • Living style guide using Nucleus
  • Removal of Grunt in favor of a full Node build process (for less dependencies)

Install with NPM

Getting Started

This plugin requires Grunt ^0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install centurion-framework --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('centurion-framework');

Grunt Usage

When using Centurion with Grunt you can use one of two modules: grunt-contrib-sass or grunt-sass. We recommend the later since it's built on libsass and compiles much faster, but it is missing some features so the decision is yours.

For grunt-sass you can add Centurion to your project using includePaths (as in the example below) or with grunt-contrib-sass you can change it to loadPath for the same result. Here is an example:

'sass': {
  target: {
    options: {
      precision: 4, // makes all decimals round to 4 places
      sourcemap: 'auto', // adds a sourcemap to compiled CSS for inspecting
      includePaths: ['node_modules/centurion-framework/lib/sass/']
    },
    files: {
      'path/to.css': 'path/to.scss'
    }
  }
}

Gulp Usage

You can also use Centurion with Gulp. By using the module gulp-sass add the library module to your includePaths found in the example Gulp task below.

gulp.task('sass', function() {
  return gulp.src( 'source/sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
    	includePaths: './node_modules/centurion-framework/lib/sass',
    	errLogToConsole: true
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest( 'build/css' ));
});

If you're interested in using Gulp check out a simple starter project on Github that shows you how to start using Centurion in your next web project.

Install as a RubyGem

Getting Started

Install the gem: gem install centurion-framework

If you have an existing project: require 'centurion-framework'

Configuration

You also have the option of importing Centurion components as needed into your project. Start by including the entire library at the top of your Sass file:

@import "centurion-framework";

Then you can include any of the modules from Centurion that you need. For example if you wanted to only include normalize, the Centurion grid, and typography then you would add the following:

@include normalize();
@include flex-grid();
@include typography();

Documentation and Examples

Read our docs or view examples on our Github page. We are always trying to improve our documentation and examples, so please submit an issue labeled docs with the description of what needs to be updated.

Versioning

Centurion no longer supports Internet Explorer 7 as of version 3.5.3.

Review CHANGELOG for updates and changes to the framework.

Bugs and feature requests

If you find a bug or have a feature request you would like added to Centurion. Please search for existing and closed issues to see any similar issues. If you problem or idea is not addressed, please open a new issue.

Contributing

If you're interested in contributing to Centurion simply open an issue labeled contribute and tell us what you would like to contribute. Alternatively, you can fork Centurion and submit a pull request explaining what you are contributing.

Community

We might have a small community in comparison to other open-source frameworks, but we're only getting started.

Special Thanks to Our Community

I would also want to thank a few people for their contributions to Centurion.

  • Josh Northcott - for his tireless effort in spreading the word about responsive design and Centurion.
  • Corey Hadden - for his assistance in making jQuery play nice and for sheer inspiration.

Licensing

Licensed under GPL.

centurion's People

Contributors

dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar gitter-badger avatar janhancic avatar justinhough avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

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.

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.

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

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-

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 */

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.

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

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

why GPL?

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

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

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.