All Projects → moyus → pointcss

moyus / pointcss

Licence: MIT License
A lightweight and flexible CSS Framework for building modern responsive web apps

Programming Languages

SCSS
7915 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to pointcss

Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+2069.7%)
Mutual labels:  front-end, responsive, flexbox
Infima
A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
Stars: ✭ 82 (+148.48%)
Mutual labels:  front-end, responsive
Bootstrap Dark
The Definitive Guide to Dark Mode and Bootstrap 4 - A proof of concept
Stars: ✭ 54 (+63.64%)
Mutual labels:  front-end, responsive
griding
🧱 lean grid & responsive for react
Stars: ✭ 18 (-45.45%)
Mutual labels:  responsive, flexbox
muilessium
UI Framework for simple websites - landings, blogs, etc.
Stars: ✭ 16 (-51.52%)
Mutual labels:  front-end, responsive
Mini.css
A minimal, responsive, style-agnostic CSS framework!
Stars: ✭ 2,938 (+8803.03%)
Mutual labels:  front-end, responsive
boba
A lightweight, modular CSS framework.
Stars: ✭ 47 (+42.42%)
Mutual labels:  responsive, flexbox
Construcao De Paginas Web
Desenvolvimento de páginas semânticas, acessíveis e responsivas. 🚀
Stars: ✭ 113 (+242.42%)
Mutual labels:  responsive, flexbox
game-template
Cross-platform project template using Electron and Angular with the Phaser game engine. Project has Flexbox integrated for easy and responsive organization of components around the Phaser canvas.
Stars: ✭ 16 (-51.52%)
Mutual labels:  front-end, flexbox
buttono
A flexible Sass mixin for creating BEM-style buttons.
Stars: ✭ 82 (+148.48%)
Mutual labels:  front-end, bem
boardz
Create Pinterest-like boards with pure CSS, in less than 1kB.
Stars: ✭ 33 (+0%)
Mutual labels:  responsive, flexbox
englishextra.github.io
English Grammar for Russian-Speakers, a PWA website + SPA
Stars: ✭ 19 (-42.42%)
Mutual labels:  front-end, responsive
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+6200%)
Mutual labels:  responsive, flexbox
ml-stack-nav
Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.
Stars: ✭ 20 (-39.39%)
Mutual labels:  responsive, bem
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (+263.64%)
Mutual labels:  responsive, flexbox
Quickmenu
The new era of mobile navigation for the web, we're out of hamburgers.
Stars: ✭ 119 (+260.61%)
Mutual labels:  front-end, responsive
Flex Layout
Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Stars: ✭ 5,705 (+17187.88%)
Mutual labels:  responsive, flexbox
Formstone
Library of modular front end components.
Stars: ✭ 823 (+2393.94%)
Mutual labels:  responsive, flexbox
ekzo
💫 Functional Sass framework for rapid and painless development
Stars: ✭ 32 (-3.03%)
Mutual labels:  responsive, bem
40-lines-of-Sass
Full featured flexbox grid in 40 lines of Sass
Stars: ✭ 20 (-39.39%)
Mutual labels:  responsive, flexbox

npm (scoped) npm bundle size (scoped)

A lightweight and flexible CSS Framework for building modern responsive web apps.

  • Built with flexbox
  • Mobile friendly layout
  • ~12KB minified and gzipped

Installation

There are 3 ways to get started

Yarn
yarn add @moyu/pointcss
NPM
npm install @moyu/pointcss --save
Download and use production file
<link rel="stylesheet" href="dist/point.min.css" />

Customization

pointcss is coded in SASS, If you're familiar with it, You can continue

Install the dependence
yarn add @moyu/pointcss --dev
Set your variables

you can reference all initial variables in scss/_variables.scss

$color-primary:                         #636AFF; // primary
$color-danger:                          #ff2d20; // negative
$color-success:                         #15CD72; // positive
$color-info:                            #0069ff; // accent
$color-warning:                         #ED6E33; // warning
...
Import pointcss at the end of your code
// overwrite variables
$color-primary:                         #636AFF;

// your code

@import "node_modules/@moyu/pointcss/point"

Browser Support

pointcss uses Normalize.css for CSS reset and Autoprefixer to make styles compatible with earlier browser versions. For best user experience, these browsers are recommended:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Microsoft Edge
  • Internet Explorer 10+

Copyright and License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].