Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

fullstack-ui

Package Overview
Dependencies
Maintainers
3
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fullstack-ui

SCSS framework built to scale

  • 0.2.0
  • latest
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

FullStack UI

What is FullStack UI?

FullStack UI is a SCSS framework built to make front end UI development fast and scalable. This project is under active development and is not recommended for production use at this time.

Architecture

  • CORE: Framework core
  • TOOLS: Mixins and functions
  • SETTINGS: Site-wide settings
  • GENERIC: Low-specificity, far-reaching rulesets and classless elements
  • OBJECTS: Objects, abstractions, and design patterns (e.g. .media {})
  • COMPONENTS: Discrete, complete chunks of UI (e.g. .carousel {})
  • UTILITIES: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-hidden {})

Getting Started

The best way to start using FullStack UI is with NPM.

Download and install Node. Node comes with npm installed, so all you have to do is update it:

$ npm install npm@latest -g

Now you can install this framework:

$ npm install fullstack-ui --save

Navigate to node_modules/fullsack-ui/

Copy index.scss to your project's root CSS folder.

Update the import paths to point to the framework:

@import "node_modules/fullstack-ui/palettes/palettes.default";

You'll need something to compile the app. node-sass is an option.

$ npm install node-sass --save-dev

You can have nodemon watch for SCSS and compile on save.

$ npm install nodemon --save-dev

Add this to your package.json. The build script takes the first argument as the source directory and the second as the destination. Adjust these as needed:

"scripts": {
  "build:css": "node-sass src/scss/index.scss src/css/index.css",
  "watch:css": "nodemon -e scss -x \"npm run build:css\"",
}

Finally, run this:

$ npm run watch:css

Don't forget to <link> index.css in your project's <head> and you're ready to roll!


License

MIT

Keywords

FAQs

Package last updated on 01 Nov 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc