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

better-base-template

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

better-base-template - npm Package Compare versions

Comparing version 1.0.3 to 1.0.5

4

config.js

@@ -19,3 +19,3 @@ module.exports = {

columnGaps: true,
columnCount: true,
columnCount: 12,
customColumns: [

@@ -89,3 +89,3 @@ {

tfFontFamilyAliases: false,
tfFontFamilyAliasBreakpoints: true,
tfFontFamilyAliasBreakpoints: true,//
tfEnableFontSize: true,

@@ -92,0 +92,0 @@ tfFontSizes: [

@@ -1,4 +0,13 @@

# Documentation for `Better Base Template 1.0.3`
# Documentation
#### How to install the package?
## Table of contents
- [Installation](#installation)
- [Configuration](#configuration)
- [Media Breakpoints](#media-breakpoints)
- [Row & Column layout](#row--column-layout)
- [Margin & Padding preset](#margin--padding-preset)
- [Font Formatting preset](#font-formatting-preset)
## Installation

@@ -23,1 +32,200 @@ 1) Install npm package.

## Configuration
### Media breakpoints
#### Functionality
1) Generates SCSS mixins for each media breakpoint scope.
2) Allows other components to change depending on MB* scope.
#### Example of usage
```scss
@include mobile { /** content in mobile MB scope */ }
@include media(mobile) { /** this one is working as well */ }
```
#### Options
- `enableBreakpoints`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling MB* functionality.
- `mediaBreakpoints`
- **Type** - two-dimensional `array`
- **Template** - `[[MB* prefix, MB* alias, MB* min-width, MB* max-width],[...]]`
- **Default value** - `[['m', 'mobile', 'null', '1023px'], ['d', 'desktop', '1024px', 'null']]`
- **Description** - List of breakpoints to generate.
<sup>*</sup> MB - Media Breakpoint
### Row & Column layout
#### Functionality
1) Generates HTML classes for building column based layout.
#### Example of usage
```html
<div class="row">
<div class="col-6 gap-6">
<!-- Content of this element will take 50% of available space on the right --->
</div>
<div class="m-col-6 d-col-3">
<!-- Element will take 25% of space on desktop, and 50% on mobile --->
</div>
</div>
```
#### Options
- `enableColumns`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling CL* functionality.
- **Example** - `<div class="col-12">`, `col` + `-` + column size
- `columnGaps`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling CL* gaps functionality.
- **Example** - `<div class="gap-4">`, `gap` + `-` + gap size
- `columnCount`
- **Type** - `integer`
- **Default value** - `12`
- **Description** - Number of columns in one row.
- `customColumns`
- **Type** - two-dimensional `array`
- **Template** - `[[column alias, column width],[...]]`
- **Default value** - `[['one-fifth', '20%']]`
- **Description** - List of custom columns to generate.
- `columnBreakpoints`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling CL* functionality in scope of media breakpoints.
- **Example** - `<div class="m-col-4">`, media breakpoint prefix + `-` + column or gap
<sup>*</sup> CL - Column Layout
### Margin & Padding preset
#### Functionality
1) Generates HTML classes for quick element alignment.
#### Example of usage
If the [specificity value](https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0) of the element is less than `0,0,1,0`, you should not extend it with `%mp`. If greater, `%mp` extension is obligatory.
```scss
.class {
@extend %mp;
}
p {
/** %mp extension is not needed, while value is less then `0,0,1,0` */
}
```
```html
<h2>Random heading here</h2>
<p class="margin-top-m">
<!-- This text is much aligned a bit further down,
than default, because class 'margin-top-m' is applied. -->
</p>
```
#### Options
- `enableMp`
- **Type** - `boolean`
- **Default value** - `false`
- **Description** - Switch for enabling and disabling MP* functionality.
- `mpSizes`
- **Type** - two-dimensional `array`
- **Template** - `[[MP* alias, MP* size],[...]]`
- **Default value** - `[['none', '0'], ['xs', '3px'], ['xs', '3px'], ['s', '5px'], ['m', '10px'], ['l', '15px'], ['xl', '20px'], ['2xl', '25px'], ['3xl', '30px'], ['4xl', '35px'], ['5xl', '40px'], ['6xl', '45px'], ['7xl', '50px'], ['huge', '80px']]`
- **Description** - List of MP* to generate.
- **Example** - `<div class="padding-left-xl"> ... </div>`, (`padding` or `margin`) + `-` + direction + `-` + size
- `mpVerticalHorizontal`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling vertical and horizontal MP* functionality.
- **Example** - `<div class="padding-vertical-xl"> ... </div>`
- `mpBreakpoints`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling MP* functionality in scope of media breakpoints.
- **Example** - `<div class="m-padding-vertical-xl">`, media breakpoint prefix + `-` + margin or padding
<sup>*</sup> MP - Margin & Padding
### Font Formatting preset
#### Functionality
1) Generates HTML classes for quick text formatting.
#### Example of usage
If the [specificity value](https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0) of the element is less than `0,0,1,0`, you should not extend it with `%tf`. If greater, `%tf` extension is obligatory.
```scss
.class {
@extend %tf;
}
p {
/** %tf extension is not needed, while value is less then `0,0,1,0` */
}
```
```html
<p class="ff-curved fs-xl">
<!-- This text is using font-face with alias 'curved',
as well as font-size with alias 'xl'. -->
</h2>
```
#### Options
- `enableTf`
- **Type** - `boolean`
- **Default value** - `false`
- **Description** - Switch for enabling and disabling TF* functionality.
- `tfFontFaces`
- **Type** - two-dimensional `array`
- **Default value** - `false`
- **Template** - `[[font-family, path to font, font-weight - optional, font-style - optional], [...]]`
- **Description** - List for generating font-faces.
- `tfEnableFontFamilyAlias`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling font-family preset.
- `tfFontFamilyAliases`
- **Type** - two-dimensional `array`
- **Default value** - `false`
- **Template** - `[[font-family, alias], [...]]`
- **Description** - List of font-family and it's aliases.
- **Example** - `<div class="ff-[alias]">`, `ff-` + alias name!
- `tfFontFamilyAliasBreakpoints`
- **Type** - `boolean`
- **Default value** - `true`
- **Description** - Switch for enabling and disabling font-family aliases functionality in scope of media breakpoints.
- **Example** - `<div class="m-ff-curved">`, media breakpoint prefix + `-` + font-family alias
**DOCUMENTATION IS IN PROGRESS**...
<sup>*</sup> TF - Text Formatting
{
"name": "better-base-template",
"version": "1.0.03",
"version": "1.0.5",
"description": "An awesome base-template generator.",

@@ -17,3 +17,3 @@ "main": "./src/index.js",

"library",
"scss"
"sass"
],

@@ -20,0 +20,0 @@ "author": "Alfred Genkin",

<p align="center">
<a href="http://gulpjs.com">
<img height="501" width="668" src="https://user-images.githubusercontent.com/29531824/33809208-e259f0a6-ddfb-11e7-9ce4-e3577bceda45.png">
</a>
<img height="187" width="320" src="https://user-images.githubusercontent.com/29531824/33828830-4c914bd4-de76-11e7-9d1a-a96d916f084b.png">
</p>

@@ -9,10 +7,17 @@

- **Presets** - better-base-template is a configurable library of element styling presets.
- **Optimization** - decrease page loading time, increase coding speed by using pre-coded values.
- **Simplicity** - style pages, by adding classes, not writing a style code!
- **Library** - better-base-template is a configurable library of element styling presets.
- **Optimization** - decrease page loading time and increase coding speed by using pre-coded values.
- **Simplicity** - style pages, by adding classes to an element, do not write a style code for each!
- **Configurability** - configure everything, anyway!
## What's inside?
- **Layout** - light weight row-column layout system.
- **Presets** - classes for preset margin and padding, text formatting.
- **Mixins** - mixins for writing SCSS in media-breakpoint scope.
> **Coming soon** - basic style for base-elements.
## Documentation
Get a full guide in [documentation for the current release](/docs/README.md).
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