Skip to content
This repository has been archived by the owner. It is now read-only.
A flexible, modular and highly-customizable SCSS framework for rapid webiste prototyping.
CSS 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.
css
docs
scss
tasks
.gitignore
LICENSE
README.md
gulpfile.js
package-lock.json
package.json

README.md

Wireframe

Wireframe is a flexible, modular and highly-customizable SCSS framework for rapid webiste prototyping. It provides you with a solid architectural baseline upon which to complete your own work.

Installation

NPM:

$ npm install wireframe-framework

Copy/paste (not recommended):

You can download Wireframe and save it into your project’s css directory. This method is not recommended because you lose the ability to easily and quickly manage and update Wireframe as a dependency.

Getting started

Wireframe follows a specific folder structure, which you can follow as well in your own CSS directory:

  • configuration: Global variables, site-wide settings, config.
  • components: Discrete, complete parts of UI such as forms.
  • content: Unclassed HTML elements, such as typography.
  • layout: Very basic elements of your website skeleton.
  • resets: Low-specificity, far-reaching rulesets.
  • utils: Override, utility and helper classes.
@import "wireframe-framework/configuration/functions/split-str";
@import "wireframe-framework/configuration/functions/strip-units";
@import "wireframe-framework/configuration/functions/to-length";
@import "wireframe-framework/configuration/functions/to-number";
@import "wireframe-framework/configuration/mixins/typography";
@import "wireframe-framework/configuration/mixins/responsive";
@import "wireframe-framework/configuration/mixins/clearfix";
@import "wireframe-framework/configuration/typography";
@import "wireframe-framework/configuration/responsive";
@import "wireframe-framework/configuration/colors";

@import "wireframe-framework/utils/responsive/display";
@import "wireframe-framework/utils/prototype/grid";
@import "wireframe-framework/utils/display/flex";
@import "wireframe-framework/utils/display/rounded";
@import "wireframe-framework/utils/align/align-start";
@import "wireframe-framework/utils/align/align-center";
@import "wireframe-framework/utils/align/align-end";
@import "wireframe-framework/utils/align/align-top";
@import "wireframe-framework/utils/align/align-middle";
@import "wireframe-framework/utils/align/align-bottom";
@import "wireframe-framework/utils/align/align-around";
@import "wireframe-framework/utils/align/align-between";
@import "wireframe-framework/utils/is-unselectable";
@import "wireframe-framework/utils/is-reversed";

@import "wireframe-framework/resets/normalize";
@import "wireframe-framework/resets/highlight";
@import "wireframe-framework/resets/global";

@import "wireframe-framework/content/typography";
@import "wireframe-framework/content/table";
@import "wireframe-framework/content/list";

@import "wireframe-framework/layout/app";
@import "wireframe-framework/layout/block";
@import "wireframe-framework/layout/content";
@import "wireframe-framework/layout/drawer";
@import "wireframe-framework/layout/footer";
@import "wireframe-framework/layout/header";

@import "wireframe-framework/components/forms/control";
@import "wireframe-framework/components/forms/buttons";
@import "wireframe-framework/components/forms/inputs";
@import "wireframe-framework/components/box";
@import "wireframe-framework/components/grid";
@import "wireframe-framework/components/menu";
@import "wireframe-framework/components/alerts";
@import "wireframe-framework/components/badges";

Contributing

Bug reporting

Changes and improvements are more than welcome! Feel free to fork and open a pull request. If you have found any issues, please report them here - they are being tracked on GitHub Issues.

Developing

$ npm run <command>

List of commands

Command Description
build Builds Wireframe
watch Rebuilds on changes, creates a live local server for documentation
clean Cleans the build folder
docs Builds documentation
You can’t perform that action at this time.