{"id":21287582,"url":"https://github.com/vinaypillai/acute-framework","last_synced_at":"2026-05-17T09:37:14.890Z","repository":{"id":44250490,"uuid":"252337902","full_name":"vinaypillai/Acute-Framework","owner":"vinaypillai","description":"The Acute Framework is a (relatively) lightweight Vue.js component framework designed for Bootstrap users who want a bit more control over their layouts.","archived":false,"fork":false,"pushed_at":"2022-02-10T22:28:00.000Z","size":1811,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-23T12:40:14.105Z","etag":null,"topics":["acute-framework","bootstrap","vue","vue-component-library","vuejs","vuejs-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/acute-framework","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinaypillai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-02T02:39:27.000Z","updated_at":"2020-05-30T00:09:19.000Z","dependencies_parsed_at":"2022-08-24T13:21:31.671Z","dependency_job_id":null,"html_url":"https://github.com/vinaypillai/Acute-Framework","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaypillai%2FAcute-Framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaypillai%2FAcute-Framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaypillai%2FAcute-Framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaypillai%2FAcute-Framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinaypillai","download_url":"https://codeload.github.com/vinaypillai/Acute-Framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243748004,"owners_count":20341616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acute-framework","bootstrap","vue","vue-component-library","vuejs","vuejs-components"],"created_at":"2024-11-21T12:13:54.389Z","updated_at":"2025-10-24T21:36:56.641Z","avatar_url":"https://github.com/vinaypillai.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Acute Framework\n\n![NPM](https://nodei.co/npm/acute-framework.png)\n\n![version badge](https://img.shields.io/github/v/release/vinaypillai/Acute-Framework) ![Travis status](https://img.shields.io/travis/com/vinaypillai/Acute-Framework) ![dependencies badge](https://img.shields.io/librariesio/release/npm/acute-framework) ![License badge](https://img.shields.io/npm/l/acute-framework)\n\nThe Acute Framework is a (relatively) lightweight Vue.js component framework designed for Bootstrap users who want a bit more control over their layouts.\n*   [Installation](#installation)\n*   [Add to Vue.js Projects](#add-to-vue.js-projects)\n*   [Usage](#usage)\n    *   [Grids](#grids)\n    *   [Columns](#columns)\n    *   [Breakpoints](#breakpoints)\n    *   [Dropdowns](#dropdowns)\n    *   [Buttons](#buttons)\n        * [Variant](#variant)\n        * [Block](#block)\n        * [Outline](#outline)\n        * [Pill](#pill)\n        * [Round](#round)\n    * [Semantic Colors](#semantic-colors)\n    * [Navs](#navs)\n        *  [Layout](#layout)\n            * [Position](#position)\n            * [Fixed](#fixed)\n            * [Hidden](#hidden)\n            * [Sticky](#sticky)\n        * [Design](#design)\n            * [Dark](#dark)\n            * [Transparent](#transparent)\n* [License](#license)\n\n## Installation\n\n```bash \nnpm install acute-framework\n```\n\n## Add to Vue.js Projects\n```javascript\n/* /src/main.js */ \nimport Vue from 'vue' \nimport App from './App.vue' \n.\n.\n.\nimport AcuteFramework from 'acute-framework'\nVue.use(AcuteFramework) \n```\n\n## Usage\n\n### Grids\nThe 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.\n```html\n\u003cac-grid cols=\"12\"\u003e\u003c/ac-grid\u003e\n```\nThe number of columns in each grid can be specified according to the [device size breakpoints](#breakpoints).\n```html\n\u003cac-grid cols=\"12\" md-cols=\"6\"\u003e\u003c/ac-grid\u003e\n```\nThe content in a grid can be aligned according to flex box alignment properties.\n```html\n\u003cac-grid cols=\"3\" align-h=\"center\" align-v=\"center\"\u003e\u003c/ac-grid\u003e\n```\nPossible values for `align-h`:\n* `flex-start`\n* `flex-end`\n* `center`\n* `space-between`\n* `space-around`\n* `initial`\n* `inherit`\n\nPossible values for `align-v`:\n* `stretch`\n* `flex-start`\n* `flex-end`\n* `center`\n* `base-line`\n* `initial`\n* `inherit`\n\n### Columns\nWithin 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.\n```html\n\u003cac-grid cols=\"4\"\u003e\n    \u003cac-col cols=\"1\"\u003eColumn 1\u003c/ac-col\u003e\n    \u003cac-col cols=\"1\"\u003eColumn 2\u003c/ac-col\u003e\n    \u003cac-col cols=\"1\"\u003eColumn 3\u003c/ac-col\u003e\n    \u003cac-col cols=\"1\"\u003eColumn 4\u003c/ac-col\u003e\n\u003c/ac-grid\u003e\n```\nColumns don't have to be the same size. Each column can be sized independently based off\nits content using the [device size breakpoints](#breakpoints).\n```html\n\u003cac-grid cols=\"5\"\u003e\n    \u003cac-col cols=\"3\" md-cols=\"1\"\u003eColumn 1\u003c/ac-col\u003e\n    \u003cac-col cols=\"2\" md-cols=\"4\"\u003eColumn 2\u003c/ac-col\u003e\n\u003c/ac-grid\u003e\n```\nThe 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.\n```html\n\u003cac-grid cols=\"6\" lg-cols=\"12\"\u003e\n    \u003cac-col cols=\"1\" lg-cols=\"6\"\u003eColumn 1\u003c/ac-col\u003e\n    \u003cac-col cols=\"5\" lg-cols=\"6\"\u003eColumn 2/ac-col\u003e\n\u003c/ac-grid\u003e\n```\nIn addition, columns can be offset to allow for different kinds of positioning within a row.\n```html\n\u003cac-grid cols=\"3\" lg-cols=\"12\"\u003e\n    \u003cac-col cols=\"1\" lg-cols=\"1\" offset=\"1\"\u003eColumn 1\u003c/ac-col\u003e\n\u003c/ac-grid\u003e\n```\n\n### Breakpoints\nContent can be divided according to the following device width breakpoints:\n|Name|Size|\n|:--:|:--:|\n|xs (default)| 0px|\n|sm| 576px|\n|md| 768px|\n|lg|992px |\n|xl|1200px|\n\nThe 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.\n\n### Buttons\nMany varieties of buttons are possible out of the box with the Acute Framework. There are five main properties involved in styling buttons:\n* `variant`\n* `block`\n* `outline`\n* `pill`\n* `round`\n\n#### Variant\nThe variant represents a buttons default color. Each of the [semantic colors](#semantic-colors) is a viable button variant.\n```html\n \u003cac-button variant=\"primary\"\u003e\u003c/ac-button\u003e\n```\n#### Block\nBlock 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](#outline) flag. The default fill mode is `block`.\n```html\n \u003cac-button variant=\"secondary\" block\u003e\u003c/ac-button\u003e\n```\n#### Outline\nOutline 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](#block) flag. \n```html\n \u003cac-button variant=\"success\" outline\u003e\u003c/ac-button\u003e\n```\n \n#### Pill\nPill is a flag for a button's shape. The `pill` flag will make the left and right sized of the button fully rounded over.\n```html\n \u003cac-button variant=\"hazard\" outline pill\u003e\u003c/ac-button\u003e\n```\n#### Round\nPill 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.\n```html\n \u003cac-button variant=\"danger\" solid round\u003e\u003c/ac-button\u003e\n```\n\n### Semantic Colors\nThere are five semantic colors in the Acute Framework. The colors are integrated across the various components.\n|Name|Hexcode|\n|:--:|:--:|\n|primary|#009d46|\n|secondary| #333333|\n|success|#3498db|\n|danger|#e55947|\n|hazard|#bd7800|\n\n### Navs\nThe Acute Framework has six properties for customization available for navs. These are divided across layout:\n* `position`\n* `fixed`\n* `hidden`\n* `sticky`\n\nAnd design:\n* `dark`\n* `transparent`\n\n#### Layout\n\n##### Position\nAn `ac-nav` element can be positioned at the `top`, `left`, or `right` of the screen.\n```html\n\u003cac-nav position=\"top\"\u003e\u003c/ac-nav\u003e\n```\nLike any other element, the sizing of a nav can be made responsive through the use of the grid system.\n```html\n\u003cac-grid cols=\"4\"\u003e\n    \u003cac-col cols=\"3\" md-cols=\"1\"\u003e\n        \u003cac-nav position=\"left\"\u003eSome content\u003c/ac-nav\u003e\n    \u003cac-col\u003e\n\u003c/ac-grid\u003e\n```\n\n##### Fixed\nIf the `fixed` flag is set for a navbar, its position will be constant on the screen, regardless of scrolling.\n```html\n\u003cac-nav position=\"right\" fixed\u003e\u003c/ac-nav\u003e\n```\nTo 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.\n\n##### Hidden\nThe `hidden` flag serves as a way to control the visibility of side navs when they are not needed. \n```html\n\u003cac-nav position=\"left\" hidden\u003e\u003c/ac-nav\u003e\n```\nSetting hidden to false, or omitting the flag altogether will make the navbar slide into view.\n```html\n\u003cac-nav position=\"left\" :hidden=\"false\"\u003e\u003c/ac-nav\u003e\n```\n\n##### Sticky\nThe `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.\n```html\n\u003cac-nav position=\"top\" sticky\u003e\u003c/ac-nav\u003e\n```\n\n#### Design\nThe default color scheme for a navbar is a white `background-color` with \"black\" text. However, this can be easily altered for different use cases.\n\n##### Dark\nThe `dark` flag will change the `background-color` to #333 and use white text.\n```html\n\u003cac-nav position=\"top\" dark\u003e\u003c/ac-nav\u003e\n```\n\n##### Transparent\nThe `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.\n```html\n\u003cac-nav position=\"top\" transparent\u003e\u003c/ac-nav\u003e\n```\n## License\nCopyright 2020 Vinay Pillai\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinaypillai%2Facute-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinaypillai%2Facute-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinaypillai%2Facute-framework/lists"}