centurion-framework

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


Keywords
centurion, framework, web, responsive, awesome, grid-system, grunt-plugins, npm, sass-framework, typography, web-framework
License
GPL-2.0+
Install
npm install centurion-framework@3.9.0

Documentation

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 for 2018

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