Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A flexible, modular and highly-customizable SCSS framework for rapid webiste prototyping.

Topics

Resources

License

Releases

No releases published

Packages

No packages published