lyt-css

lyt

A flexible and highly configurable CSS layout library. Designed to be tweaked.

Request Feature / Report a Bug

▶️ 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 - [e-mail]

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