Skip to content
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
src
.gitignore
Gulpfile.js
README.md
package-lock.json
package.json

README.md

Dark Matter CSS Pattern & Component Library

Pattern Requirements

This document describes the structure of the CSS Framework and its behaviour under various screen sizes


The Grid System (Chaos)

Description

  • 12 column
  • Responsive & Fluid
  • Columns will be wrapped in a container .row
  • Each column will have the class of .col-#
  • Create a .container class that wraps all content and centers it on the page. Fluid in width.

Responsive Behaviour

  • Small screen sizes (<1024px) the columns will have their gutter width halved
  • In mobile sizes (<768px) all columns will be 100% width

Typography

Elements

  • Headings
  • Paragraphs
  • Bold, em, strike, link
  • Code blocks
  • Lists
  • Blockquotes

Buttons

Description

  • 2 styles: default, primary
  • 3 sizes: small, default, large
  • Styles for all HTML elements: ', , , '

Form elements

Elements

  • Inputs
  • Radio and checkboxes (custom controls)
  • Pre-made forms: signin, signup, contact

Icons

Description

  • Search for a font icon library (Fontawesome)
  • Styles for bordered Icons
  • Styles for square, rounded or circle borders
  • 3 different sizes: small, default, large

Feedback

Description

  • 4 message boxes: info, success, error & warning

Navigation

Elements and characteristics

  • Navbar
  • Logo left or center and menu on left or right side
  • Dropdown menu with Superfish jQuery plugin

Responsive behaviour

  • At page load, the main menu will be cloned via jQuery into responsive menu
  • In mobile sizes (<768px) the main menu will be hidden, the logo will be moved to the center and the responsive menu will be displayed below.

Animations

Description

  • Will use the animate.css library by Dan Eden

Tabs and accordions

  • Custom controls

Carousels

  • Cycle2 jQuery plugin

PATTERNS & COMPONENTS TODO

  • Grid
  • Typography (-> Make headings more inteligent for margins)
  • Buttons
  • Forms
  • Icons
  • Feedback
  • Navigation
  • Animations
  • Tabs
  • Accordions
  • Carousels
  • Tables
  • Modals
  • Css Filters

LIBRARY TODO

  • Css preprocessor - Sass
  • Templating engine - Handlebars
  • Gulp server with livereload or browser-sync
  • Default colors
  • Website & App Defaults but separate layouts
  • Flexboxify
  • SVG
  • i8n
  • Less & Myth preprocessors
  • React Components
  • Ember Components
You can’t perform that action at this time.