fullstack-ui
Advanced tools
Readme
This project is under active development and is not recommended for production use at this time.
FullStack UI is a fork of InuitCSS maintained by FullStack Labs. It builds on the some of the core architectural principles of InuitCSS and introduces new paradigms that allow for greater extensibility and scalability.
FullStack UI is our answer to the challenges we faced in our software consultancy. We needed the ability to start and complete projects quickly while keeping the codebase scalable. We wanted something as easy to get started with as Bootstrap, as themeable as Semantic UI and as dynamic as InuitCSS.
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!
FullStack UI's killer feature is its generative qualities. It utilizes structured data (maps) and initializers (mixins) to generate classes and styles. This strategy allows you to build on the framework in a truly scalable way. To get the most out of this framework, you'll want to familiarize yourself with the following concepts.
Tools are Mixins and Functions that will help us build our UI.
$global-palette's values can be added to or overwritten with set-color($id, $color):
@include set-color("primary", #BADA55);
Sometimes it's helpful to apply a whole palette to $global-palette. You can do this with:
@include set-palette($palette-google-material);
$global-spacing contains our app's single source of spacing units. Its default values are based on sensible sizes that make vertical rhythm easy:
$global-spacing: (
null: round($global-line-height),
"nano": round($global-line-height * 0.125),
"micro": round($global-line-height * 0.25),
"tiny": round($global-line-height * 0.5),
"small": round($global-line-height * 0.75),
"large": round($global-line-height * 1.5),
"huge": round($global-line-height * 2),
) !default;
You can add or override these with set-spacing($name, $spacing):
@include set-spacing("my-custom-spacing-unit": 100px);
This will automatically be converted to relative units.
Sometimes its helpful to display the value of a variable at a specific point in compilation. For example, if you'd like to see what's in $global-palette.
@include debug($global-palette);
This embeds a pseudo element on <body> that includes the variable's value.
A Palette is a Sass map with with one or more key-value pairs. FullStack UI comes with a default palette that will provide a minimal but effective supply of ready-to-go colors. This gets applied to the $global-palette which acts as our single source of our app's colors.
$global-palette: (
"primary" : rgb(33,150,243),
"secondary" : rgb(39,49,68),
"success" : rgb(76,175,80),
"alert" : rgb(244,67,54),
...
);
NOTE: This will eventually fall under a higher-level Themes paradigm.
FAQs
SCSS framework built to scale
The npm package fullstack-ui receives a total of 447 weekly downloads. As such, fullstack-ui popularity was classified as not popular.
We found that fullstack-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.