▶️ Getting started

🚀 Import using a CDN

Just link the lyt.css file or it minified version.

<!-- Use normal or minified -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ColinEspinas/lyt/dist/lyt.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ColinEspinas/lyt/dist/lyt.min.css">

You can also use each modules individually.

<!-- Use normal or minified -->
<link rel="stylesheet" href="path/to/lyt/dist/grid/flex.css">
<link rel="stylesheet" href="path/to/lyt/dist/grid/flex.min.css">

📦 Install with a package manager

npm install lyt-css

⚙️ Configure

Lyt is designed to be easily configurable using SASS/SCSS.

When using a CDN or local download, you can import the scss files by loading them from the /scss directory.

@import "path/to/lyt/scss/lyt.scss";
/* Or import individual modules */
@import "path/to/lyt/scss/grid/flex.scss";

Then you just need to import your configuration file before you import the lyt module files.

@import "path/to/config";
@import "path/to/lyt/scss/lyt.scss";

You can find a template config file where all variables are commented with the default values in /scss/_config.scss. This configuration file is the default configuration, it is imported by default when building the library.

📚 Documentation

This documentation will be moved in the future when the documentation website will open.

Lyt is build from multiple modules:

• Grid
  • Flex
• Utilities
  • Display
  • Float
  • Margin
  • Padding
  • Width

All the documentation uses the default configuration.

Grid

Flex

Used to manage the layout easily, the flex grid uses a classic system of row and columns and can be fully customized.

Create rows and columns using row and column.

By default columns take 100% of the available width. You can constraint a column width by using the -<n> class (<n> being the amount of space out of 12 taken by the column).

Add the gap class to a row to add gaps between columns.

<div class="row gap">
    <div class="column -6">
        <p class="padding-m box">6 of 12</p>
    </div>
    <div class="column -6">
        <p class="padding-m box">6 of 12</p>
    </div>
</div>

See example live

You can also specify a breakpoint to a column by using the <breakpoint>-<n> class instead (e.g. sm-5).

| Breakpoint | Value | |------------|--------| | sm | 544p | | md | 768px | | lg | 1012px | | xl | 1280px |

By specifying multiple breakpoints to a column, the column will adapt automatically.

<div class="row gap">
    <div class="column sm-10 md-2">
        <p class="padding-m box"></p>
    </div>
    <div class="column sm-2 md-10">
        <p class="padding-m box"></p>
    </div>
</div>

See example live

You can offset columns by using the offset-<n> class. You can also specify breakpoints by using the offset-<breakpoint>-<n> class.

<div class="row ">
	<div class="column sm-10 offset-sm-1 md-6 offset-md-3">
		<p class="padding-m box">Centered column</p>
	</div>
</div>

See example live

Utilities

Display

Use the display-<mode> class to change the display of an element.

<p class="display-ib">...</p>

| Syntax | Mode | |--------|--------------| | b | block | | i | inline | | ib | inline-block | | none | none |

Float

Use the float classes to add float to an element.

<p class="float-l">...</p>

| Syntax | Value | |--------|-------| | l | left | | r | right |

Clear after using floats with the float-clear class on an element.

<p class="float-l">...</p>
<div class="float-clear"></div>

Margin

Use the margin-<size> class to add a margin to an element (<size> being the name of the value to the margin).

<p class="margin-m">...</p>

Default configuration uses the following values for margin: | Syntax | Value | |--------|-------| | a | auto | | xs | 4px | | s | 8px | | m | 16px | | l | 24px | | xl | 32px | | xxl | 40px |

By default, the margin value is applied to all sides. You can specify sides with margin-<side>-<size> (e.g. margin-t-xl).

<p class="margin-tb-m">...</p>

| Syntax | Sides | |--------|----------------| | t | top | | l | left | | b | bottom | | r | right | | tb | top and bottom | | lr | left and right |

Padding

Padding classes are used like margin classes but add padding instead.

<p class="padding-t-xxl">...<p>

Width

You can use the width-<value> class to change the width of an element.

<p class="width-33">...<p>

| Syntax | Values | |--------|-----------------| | 25 | 25% | | 33 | calc(100% / 3) | | 50 | 50% | | 75 | 75% | | 100 | 100% |

You can also use the min-width-<value> or max-width-<value>.

<p class="max-width-50">...<p>

Mixins

Mixins can only be used in SASS/SCSS.

Breakpoint

The breakpoint mixin can be used to declare classes/properties applied at specific breakpoints.

.my-text {
  font-size: 16px;
  @include breakpoint(md) {
    font-size: 24px;
  }
}

Contributing

Any help and contribution is always welcome, feel free to submit issues and/or contribute to the project.

1. Fork the project
2. Create your feature or fix Branch (git checkout -b feature/feature-name or git checkout -b fix/fix-name)
3. Commit your changes using semantic messages (git commit -m "feat/fix: Add some feature or fix")
4. Push to the branch (git push origin feature/feature-name or git push origin fix/fix-name)
5. Open a pull request

License

Lyt is distributed under the MIT License. See LICENSE for more information.

Contact

Colin Espinas - Website - [email protected]

Project link: https://github.com/ColinEspinas/lyt