Acute Framework

The Acute Framework is a (relatively) lightweight Vue.js component framework designed for Bootstrap users who want a bit more control over their layouts.

• Installation
• Add to Vue.js Projects
• Usage
  • Grids
  • Columns
  • Breakpoints
  • Dropdowns
  • Buttons
    • Variant
    • Block
    • Outline
    • Pill
    • Round
  • Semantic Colors
  • Navs
    • Layout
      • Position
      • Fixed
      • Hidden
      • Sticky
    • Design
      • Dark
      • Transparent
• License

Installation

npm install acute-framework

Add to Vue.js Projects

/* /src/main.js */ 
import Vue from 'vue' 
import App from './App.vue' 
.
.
.
import AcuteFramework from 'acute-framework'
Vue.use(AcuteFramework) 

Usage

Grids

The grid is the most basic component for layouts. Each grid can have 1-12 columns, and content within each column is positioned responsively through flexboxes.

<ac-grid cols="12"></ac-grid>

The number of columns in each grid can be specified according to the device size breakpoints.

<ac-grid cols="12" md-cols="6"></ac-grid>

The content in a grid can be aligned according to flex box alignment properties.

<ac-grid cols="3" align-h="center" align-v="center"></ac-grid>

Possible values for align-h:

• flex-start
• flex-end
• center
• space-between
• space-around
• initial
• inherit

Possible values for align-v:

• stretch
• flex-start
• flex-end
• center
• base-line
• initial
• inherit

Columns

Within a grid, content is divided into columns. The number of columns a grid contains is dependent on both the size of the grid and the columns.

<ac-grid cols="4">
    <ac-col cols="1">Column 1</ac-col>
    <ac-col cols="1">Column 2</ac-col>
    <ac-col cols="1">Column 3</ac-col>
    <ac-col cols="1">Column 4</ac-col>
</ac-grid>

Columns don't have to be the same size. Each column can be sized independently based off its content using the device size breakpoints.

<ac-grid cols="5">
    <ac-col cols="3" md-cols="1">Column 1</ac-col>
    <ac-col cols="2" md-cols="4">Column 2</ac-col>
</ac-grid>

The number of columns can also be adjusted to match the size of the grid for a particular breakpoint. As long as the number of columns present is less than or equal to the number of columns specified by the grid, all the content will appear aligned in one row.

<ac-grid cols="6" lg-cols="12">
    <ac-col cols="1" lg-cols="6">Column 1</ac-col>
    <ac-col cols="5" lg-cols="6">Column 2/ac-col>
</ac-grid>

In addition, columns can be offset to allow for different kinds of positioning within a row.

<ac-grid cols="3" lg-cols="12">
    <ac-col cols="1" lg-cols="1" offset="1">Column 1</ac-col>
</ac-grid>

Breakpoints

Content can be divided according to the following device width breakpoints:

Name	Size
xs (default)	0px
sm	576px
md	768px
lg	992px
xl	1200px

The size listed is the minimum screen width for the breakpoint styles to take effect. Styling for xs devices is the default. As the screen size grows, styles for each successive breakpoint will supercede the previous one.

Buttons

Many varieties of buttons are possible out of the box with the Acute Framework. There are five main properties involved in styling buttons:

• variant
• block
• outline
• pill
• round

Variant

The variant represents a buttons default color. Each of the semantic colors is a viable button variant.

 <ac-button variant="primary"></ac-button>

Block

Block is a flag for a button's fill mode. A button with block fill will have a solid background according to the variant, and white text. On hover, the button will appear similar to a button with the outline flag. The default fill mode is block.

 <ac-button variant="secondary" block></ac-button>

Outline

Outline is a flag for a button's fill mode. A button with outline fill will be transparent except for its variant colored text and a border. On hover, the button will appear similar to a button with the block flag.

 <ac-button variant="success" outline></ac-button>

Pill

Pill is a flag for a button's shape. The pill flag will make the left and right sized of the button fully rounded over.

 <ac-button variant="hazard" outline pill></ac-button>

Round

Pill is a flag for a button's shape. The round flag will make the button fully circular, with width set according to its content text.

 <ac-button variant="danger" solid round></ac-button>

Semantic Colors

There are five semantic colors in the Acute Framework. The colors are integrated across the various components.

Name	Hexcode
primary	#009d46
secondary	#333333
success	#3498db
danger	#e55947
hazard	#bd7800

Navs

The Acute Framework has six properties for customization available for navs. These are divided across layout:

• position
• fixed
• hidden
• sticky

And design:

• dark
• transparent

Layout

Position

An ac-nav element can be positioned at the top, left, or right of the screen.

<ac-nav position="top"></ac-nav>

Like any other element, the sizing of a nav can be made responsive through the use of the grid system.

<ac-grid cols="4">
    <ac-col cols="3" md-cols="1">
        <ac-nav position="left">Some content</ac-nav>
    <ac-col>
</ac-grid>

Fixed

If the fixed flag is set for a navbar, its position will be constant on the screen, regardless of scrolling.

<ac-nav position="right" fixed></ac-nav>

To solve the common problem of content being swallowed when a top nav is fixed, a spacer is automatically inserted with the same height of its parent nav to preserve layouts.

Hidden

The hidden flag serves as a way to control the visibility of side navs when they are not needed.

<ac-nav position="left" hidden></ac-nav>

Setting hidden to false, or omitting the flag altogether will make the navbar slide into view.

<ac-nav position="left" :hidden="false"></ac-nav>

Sticky

The sticky flag works similarly to the fixed flag, for top navs. Sticky navs can be placed anywhere on the screen, but will fix to the top once they are scrolled to.

<ac-nav position="top" sticky></ac-nav>

Design

The default color scheme for a navbar is a white background-color with "black" text. However, this can be easily altered for different use cases.

Dark

The dark flag will change the background-color to #333 and use white text.

<ac-nav position="top" dark></ac-nav>

Transparent

The transparent flag is designed for use with fixed top navs. A transparent top-nav will have white text and a transparent background before the user has scrolled, but will transition to the default nav formatting of a background-color with "black" text once scrolling occurs.

<ac-nav position="top" transparent></ac-nav>

License

Copyright 2020 Vinay Pillai

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.