microdreamit / shapecss-framework

A modern stylish css framework

Shapecss

Shapecss, modern stylish css framework
Visit Shapecss »

Table of contents

• Quick start
• CDN
• Status
• What's included
• Documentation
• Community
• Creators
• Copyright and license

Quick start

Download the latest release:

Minified CSS

Javascript bundle

Clone the repo: git clone https://github.com/MicroDreamIT/shapecss-framework.git

Install with a package manager:

NPM npm install shapecss

Bower bower install shapecss

Composer composer require microdreamit/shapecss

• Entry javascript, resources/assets/js/shape.js
• Entry scss, resources/assets/sass/main.scss

CDN

Use javascript file bottom of the body tag.

<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/css/shape.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/js/shape.min.js" async></script>

<!-- Latest compiled and unminified CSS & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/css/shape.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/js/shape.js" async></script>

Status

What's included

You find minified and compiled files in public directory.

shapecss-framework/
    public/
      ├── css/
      │   ├── shape.css
      │   ├── shape.min.css
      └── js/
          ├── shape.js
          └── shape.min.js

If you download total repository, then import

shapecss-framework/
    resources/
    assets/
      ├── sass/
      │   ├── main.scss
      └── js/
          └── shape.js

Documentation

Shapecss's documentation, included in this repo in the root directory, is built with Laravel. The docs may also be run locally. https://shapecss.microdreamit.com

Community

Get updates on Shapecss's development and chat with the project maintainers and community members.

• Follow @microdreamit on Twitter.
• Chat with the team and developers on gitter.im
• Read and subscribe to The Official Shapecss Blog.

Creators

Shahanur Sharif

• https://twitter.com/shahanursharif
• https://www.facebook.com/babu.sharif.12

Emu

• https://www.facebook.com/unhappy.emu.9

Copyright and license

Code copyright 2017 Shahanur Sharif. Code released under the MIT license.

shapecss-framework's Issues

Need to add more component and enhance

Looking for developer to upgrade existing modal with clear, and user friendly model development

Error on npm run production on shapecss, #Laravel-mix

I am have error on npm run production, and its killing me :(

/js/shapecss.js from UglifyJs Unexpected token: name (Accordion) [./~/shapecss/resources/assets/js/component/Accordion.js:1,0][/js/shapecss.js:19054,6]

I am using shapecss developed in laravel mix.

here is code is look like on main js entry file shape.js,
directory is, https://github.com/MicroDreamIT/shapecss-framework/blob/master/resources/assets/js/shape.js
'use strict';

import {Accordion} from "./component/Accordion";
import {Modal} from "./component/Modal";
import {getTab} from "./component/Tab";
import {Nav} from "./component/Nav";
import {Circle} from "./component/shapes/Circle";
import {Parallelogram} from "./component/shapes/Parallelogram";
import {Rectangle} from "./component/shapes/Rectangle";
import {Square} from "./component/shapes/Square";

window.onload = function () {
new Accordion();
new Modal();
getTab();
new Nav();
new Circle();
new Parallelogram();
new Rectangle();
new Square();
}
Accordion class is look like,

export class Accordion{
constructor(){
this.accordionDivs = document.getElementsByClassName('accordion');
if(this.accordionDivs)
this.processAccordions();
}
processAccordions() {
...
}

Your documentation page breaks on IE11.

Will this wokr on IE11?