Light

betsydupuis / plasma.css Goto Github PK

View Code? Open in Web Editor NEW

4.0 3.0 1.0 886 KB

A robust, yet minimalist CSS grid framework based on Flexbox.

Home Page: http://betsydupuis.github.io/plasma.css/

License: MIT License

CSS 82.50% HTML 17.50%

flexbox css sass grid-layout grid-system grid-framework

plasma.css's Introduction

Plasma.css

A robust, yet minimalist CSS grid framework based on Flexbox.

Mobile-First 12 Column Grid
Based on Flexbox
Bootstrap 3 Compatible (pending)

Installation

Plasma.css can be installed as a package via NPM

npm install plasma.css

Features

Grid Layout using flexbox

Feature	Supported	Release Status	Default
Based on flexbox	yes	Alpha	✔
Responsive	yes	Alpha	✔
Bootstrap 3 Compatible	yes	Planned	✔
12 column fluid grid	yes	Alpha	✔
12 column fixed grid	yes	Alpha	✔
Vertical grid columns	yes	Alpha	✔
Space filling columns	yes	Alpha	✔
Offsets and Insets	yes	Planned	✔
X-axis Element alignment	yes	Alpha	✔
Y-axis Element alignment	yes	Alpha	✔

Browser Support

Flexbox Grid is depenedent on the CSS property flexbox. See Can I use Flexbox? for more details.

Development

Install the dependencies

npm install

Start the app

npm run app:dev

Dependencies and integrations

Dependencies

Integrations

Twitter Bootstrap 3 Sass Version (optional)

References

Flexbox References

Solved by Flexbox by Philip Walton

plasma.css's People

Contributors

Stargazers

Watchers

Forkers

plasma.css's Issues

Unable to build import.

Organize flexbox grid CSS.

Add animation component

Add initial files.

Adding initial files from previous experiments.

.row-scrollable causes overlap when using `justify-content: center`.

.row-scrollable {
    width: 100%;
    flex-wrap: nowrap;
    overflow-y: auto;
    justify-content: flex-start;
    // justify-content: center; /* Causes overlap / margin issues at the start*/
}

Define feature set for v1

Add `deploy:gh-page` to npm scripts.

Set up gh-pages

Add watch to gulp

Fix rounding errors in units

Create documentation.

Switch photo API to Unsplash

https://source.unsplash.com/

Add helpers for `.scrollable` and `.scrollbar`

.scrollable - scrollbar only shows when the
.scrollbar - show scrollbars at all times using default styles.
.scrollbar-default - default scrollbar settings. I would like this to inherit down if applied to the body.
All have -x and -y options

Add `start` to npm scripts.

Start should install the app after running the build.

Horizontal Scrollbar on landing page.

Create build for plasma.bootstrap.scss.

Create semantic versioning plan.

http://semver.org/

Switch to NPM Builds

In order to make this framework more minimalist, remove gulp and switch to npm builds.

Support for bootstrap 3.

Make duplicate settings optional.
Rename conflicting classes.
Reset the width values.

Add normalize.css to dependencies.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.