_nel Framework

Introduction

Create your web with css variables and open code sources. Now you don't have to worry about IE browser, because _nel it has blocked it. Besides, css variables are also not supported. C.F.O.E.S is an abbreviation of five popular browsers that are supported _nel.

Starter Template

Below is the default code for building. After the code will be painted several elements, you understand it.

<!DOCTYPE html>
<html lang="zxx">

<!-- head -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="description">
    <meta name="author" content="author">
    <!-- title -->
    <title>Template</title>
    <!-- Favicon -->
    <link rel="icon" href="img/nel.png" type="image/x-icon">
    <!-- _nel.css-->
    <link rel="stylesheet" href="css/nel.min.css">
    <!-- cdn jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- end head -->

<!-- body -->
<body>

    <!-- Alert Dont Support IE -->
    <div id="_IE-Alert"></div>
    <!-- End Alert Dont Support IE -->

    <!-- Load -->
    <div class="_load" id="_load">
        <div class="_load-middle">
            <div class="_load-circle"></div>
        </div>
    </div>
    <!-- End Load -->


    <!-- your code -->
    
    

    <!-- end your code -->


    <!-- _nel.js -->
    <script src="js/nel.min.js"></script>

</body>
</html>

CDN

Recommended using a cdn starter template

<!DOCTYPE html>
<html lang="zxx">

<!-- head -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="description">
    <meta name="author" content="author">
    <!-- title -->
    <title>Template</title>
    <!-- Favicon -->
    <link rel="icon" href="img/nel.png" type="image/x-icon">
    <!-- cdn _nel.min.css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nel-quantum@1.0.1/css/nel.min.css">
    <!-- cdn jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- end head -->

<!-- body -->
<body>

    <!-- Alert Dont Support IE -->
    <div id="_IE-Alert"></div>
    <!-- End Alert Dont Support IE -->

    <!-- Load -->
    <div class="_load" id="_load">
        <div class="_load-middle">
            <div class="_load-circle"></div>
        </div>
    </div>
    <!-- End Load -->


    <!-- your code -->
    
    

    <!-- end your code -->


    <!-- cdn _nel.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/nel-quantum@1.0.1/js/nel.min.js"></script>

</body>
</html>

CDN SRI

It is highly recommended to use CDN SRI

<!DOCTYPE html>
<html lang="zxx">

<!-- head -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="description">
    <meta name="author" content="author">
    <!-- title -->
    <title>Template</title>
    <!-- Favicon -->
    <link rel="icon" href="img/nel.png" type="image/x-icon">
    <!-- cdn _nel.min.css SRI-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nel-quantum@1.0.1/css/nel.min.css" integrity="sha256-wTzcimECnnrQzzMJjA6AUe5CJgsxsBW8pEK47B1Kqt4=" crossorigin="anonymous">
    <!-- cdn jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- end head -->

<!-- body -->
<body>

    <!-- Alert Dont Support IE -->
    <div id="_IE-Alert"></div>
    <!-- End Alert Dont Support IE -->

    <!-- Load -->
    <div class="_load" id="_load">
        <div class="_load-middle">
            <div class="_load-circle"></div>
        </div>
    </div>
    <!-- End Load -->


    <!-- your code -->
    
    

    <!-- end your code -->


    <!-- cdn _nel.min.js SRI -->
    <script src="https://cdn.jsdelivr.net/npm/nel-quantum@1.0.1/js/nel.min.js" integrity="sha256-eLzyFt8p21vpld3JNJESRPlRht+q/E1J0QUUhP2fq4c=" crossorigin="anonymous"></script>

</body>
</html>

Explanation

Below are some explanations for the basic knowledge of using the framework. If you see there is a sign (_) at the beginning of each class or file, it is intentionally made to distinguish between classes and _nel framework files with vendor classes and files. _nel using css variable, so it doesn't use SASS, and that's also the reason why framework _nel doesn't support IE Browser.

IE Alert

The code below is used to raise a warning when a user uses IE Browser. If you don't believe open it in IE and you will see a black page with the words "Not Supported IE".

<!-- Alert Dont Support IE -->
<div id="_IE-Alert"></div>
<!-- End Alert Dont Support IE -->

Load

The code below is used to bring up the circle animation when the page is loaded. So a new page will be visible when all elements are successfully loaded.

<!-- Load -->
<div class="_load" id="_load">
    <div class="_load-middle">
        <div class="_load-circle"></div>
    </div>
</div>
<!-- End Load -->

Content

_nel is built using css variables and open source code, so there is a class _nel and vendor mixed, but don't worry because nel has a uniq code _ to overcome the overriding class. _nel also creates a function for javascript code, so each code is always wrapped with functions.

Browsers & Devices

_nel supports the latest browsers, and doesn't support older browsers especially IE. The reason is because _nel uses the function css and flexbox variables in the grid section

Mobile devices

Android	Supported
iOS	Supported
Windows 10 Mobile	Supported

Desktop Browsers

Chrome	Supported
Firefox	Supported
Microsoft Edge	Supported
Opera	Supported
Safari	Supported
IE 11-	Not Supported

Vendor

_nel recommends the use of vendors for better support. Because the tunnel is created with an open source code that is dominantly licensed by MIT. So use the vendor for your needs. And don't worry the class will be overwritten, because nel already has a unique code to deal with it

Variable

_nel does not use SASS because it already uses the variable css function. And that will also make it easier for you without setting Ruby or something.

:root

The _nel variable is placed on :root. This functions globally and you can call variables even though they are different files. Below this is part of the variable code from the _nel, a deliberate variable naming similar to make it easier to remember.

/*-----------------------------------------------------------------*/
/*global variable*/

:root{

  /*position*/
  --fixed    : fixed;
  --absolute : absolute;
  --relative : relative;
  --static   : static;
  --sticky   : sticky;

  /*vw & vh*/
  --100vw  : 100vw;
  --100vh  : 100vh;

/*end global variable*/
}
/*-----------------------------------------------------------------*/

Typography

To be honest, the author used to dislike typography, but after years of developing the web, this is very important. If you don't believe, wait to realize it.

Headings

H1. _nel Heading	4em
H2. _nel Heading	3em
H3. _nel Heading	2.5em
H4. _nel Heading	2em
H1. _nel Heading	1.5em
H1. _nel Heading	1em

<h1>h1. _nel Heading</h1>
<h2>h2. _nel Heading</h2>
<h3>h3. _nel Heading</h3>
<h4>h4. _nel Heading</h4>
<h5>h5. _nel Heading</h5>
<h6>h6. _nel Heading</h6>

Small

Make a small font size 80% with color #999

_nel Linquini

<h3>_nel <small>Linquini</small></h3>

Paragraph

Paragraphs are made margin and padding 0 so that there is no distance, and given word-wrap : break-word; so that the paragraph is always responsive to the browser.

<p>...</p>

Marked text

If you want to create a background color on the text, you use it tag mark

<mark>mark</mark>

Deleted text

I fell ~~love~~ from the stairs

<del>del</del>

S ^strong E ^em I ^ins

SEI is an abbreviation of strongemins Bold Italic Underline

<strong>Bold</strong>
<em>Italic</em>
<ins>Underline</ins>

Alignment

_nel Framework

<p class="_left-align">_nel Framework</p>

_nel Framework

<p class="_right-align">_nel Framework</p>

_nel Framework

<p class="_center-align">_nel Framework</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, doloremque accusamus cumque laudantium odio quasi, similique corporis! Molestiae quas nulla numquam tenetur maxime odit laboriosam vitae dignissimos dolorem aut, eos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis mollitia esse vitae nesciunt ratione reprehenderit blanditiis. Modi, eos assumenda? Debitis sit rem commodi numquam aspernatur dignissimos architecto doloribus perspiciatis qui.

<p class="_justify-align">_nel Framework</p>

Position Absolute

This position has absolute properties, so you can make a relative container to use this position. In addition, you can also use a fixed position or the position itself (absolute) for use. For example the letters below are made with relative and high positions 300px

Top left

Top right

Bottom Left

Bottom Right

Bottom Middle

Top Middle

Left Middle

Right Middle

Middle

Transformation

Change text transformation with class.

lowercase

uppercase

capitalize

<p class="_lowercase">lowercase</p>
<p class="_uppercase">uppercase</p>
<p class="_capitalize">capitalize</p>

Drop Caps

m lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit libero aspernatur quibusdam quam inventore totam fugiat commodi. Temporibus ut corrupti sint maiores excepturi aliquid omnis consectetur voluptates cumque laborum?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolorem suscipit illo voluptates dolore quos, quisquam natus quidem soluta temporibus eveniet animi ullam odio ut dolorum. Blanditiis amet animi, natus.

<p class="_drop-caps">Drop Caps</p>

Hover Text

Its function is to bring up words of understanding embedded when hovered abbr

<p class="_drop-caps">Drop Caps</p>

Address

Flamecore
Dusun Rambe, Melati II, Perbaungan 20986
Deli Serdang, Sumatera Utara, ID
Phone : (+62) 23-xxxx-xxxx

Full Name
first.last@example.com

<address>
    <strong>Flamecore</strong><br>
    Dusun Rambe, Melati II, Perbaungan 20986<br>
    Deli Serdang, Sumatera Utara, ID<br>
    Phone : (+62) 23-xxxx-xxxx
</address>

<address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus odio iusto ex eius praesentium placeat quas, consequuntur reprehenderit harum fugiat dolor explicabo voluptas qui quaerat recusandae, molestias. Tenetur veniam, porro?
-Name Quote

<blockquote>
    <p>Quote</p>
    <cite> -Name Quote</cite>
</blockquote>

List

_nel 1
_nel 2
- _nel sub 2.1
- _nel sub 2.2
  - _nel sub 2.2.1
  - _nel sub 2.2.2
  - _nel sub 2.2.3
- _nel sub 2.3
_nel 3

<ul class="_list">
    <li>_nel 1</li>
    <li>_nel 2
        <ul>
            <li>_nel sub 2.1</li>
            <li>_nel sub 2.2
                <ul>
                    <li>_nel sub 2.2.1</li>
                    <li>_nel sub 2.2.2</li>
                    <li>_nel sub 2.2.3</li>
                </ul>
            </li>
            <li>_nel sub 2.3</li>
        </ul>
    </li>
    <li>_nel 3</li>
</ul>

List Circle

_nel 1
_nel 2
- _nel sub 2.1
- _nel sub 2.2
  - _nel sub 2.2.1
  - _nel sub 2.2.2
  - _nel sub 2.2.3
- _nel sub 2.3
_nel 3

<ul class="_list-circle">
    <li>_nel 1</li>
    <li>_nel 2
        <ul>
            <li>_nel sub 2.1</li>
            <li>_nel sub 2.2
                <ul>
                    <li>_nel sub 2.2.1</li>
                    <li>_nel sub 2.2.2</li>
                    <li>_nel sub 2.2.3</li>
                </ul>
            </li>
            <li>_nel sub 2.3</li>
        </ul>
    </li>
    <li>_nel 3</li>
</ul>

List Square

_nel 1
_nel 2
- _nel sub 2.1
- _nel sub 2.2
  - _nel sub 2.2.1
  - _nel sub 2.2.2
  - _nel sub 2.2.3
- _nel sub 2.3
_nel 3

<ul class="_list-square">
    <li>_nel 1</li>
    <li>_nel 2
        <ul>
            <li>_nel sub 2.1</li>
            <li>_nel sub 2.2
                <ul>
                    <li>_nel sub 2.2.1</li>
                    <li>_nel sub 2.2.2</li>
                    <li>_nel sub 2.2.3</li>
                </ul>
            </li>
            <li>_nel sub 2.3</li>
        </ul>
    </li>
    <li>_nel 3</li>
</ul>

List Upper Roman

_nel 1
_nel 2
- _nel sub 2.1
- _nel sub 2.2
  - _nel sub 2.2.1
  - _nel sub 2.2.2
  - _nel sub 2.2.3
- _nel sub 2.3
_nel 3

<ul class="_list-upper-roman">
    <li>_nel 1</li>
    <li>_nel 2
        <ul>
            <li>_nel sub 2.1</li>
            <li>_nel sub 2.2
                <ul>
                    <li>_nel sub 2.2.1</li>
                    <li>_nel sub 2.2.2</li>
                    <li>_nel sub 2.2.3</li>
                </ul>
            </li>
            <li>_nel sub 2.3</li>
        </ul>
    </li>
    <li>_nel 3</li>
</ul>

List Lower Alpha

_nel 1
_nel 2
- _nel sub 2.1
- _nel sub 2.2
  - _nel sub 2.2.1
  - _nel sub 2.2.2
  - _nel sub 2.2.3
- _nel sub 2.3
_nel 3

<ul class="_list-lower-alpha">
    <li>_nel 1</li>
    <li>_nel 2
        <ul>
            <li>_nel sub 2.1</li>
            <li>_nel sub 2.2
                <ul>
                    <li>_nel sub 2.2.1</li>
                    <li>_nel sub 2.2.2</li>
                    <li>_nel sub 2.2.3</li>
                </ul>
            </li>
            <li>_nel sub 2.3</li>
        </ul>
    </li>
    <li>_nel 3</li>
</ul>

List Number

_nel 1
_nel 2
1. _nel sub 2.1
2. _nel sub 2.2
  1. _nel sub 2.2.1
  2. _nel sub 2.2.2
  3. _nel sub 2.2.3
3. _nel sub 2.3
_nel 3

<ul class="_list-number">
    <li>_nel 1</li>
    <li>_nel 2
        <ul>
            <li>_nel sub 2.1</li>
            <li>_nel sub 2.2
                <ul>
                    <li>_nel sub 2.2.1</li>
                    <li>_nel sub 2.2.2</li>
                    <li>_nel sub 2.2.3</li>
                </ul>
            </li>
            <li>_nel sub 2.3</li>
        </ul>
    </li>
    <li>_nel 3</li>
</ul>

Description

Lorem: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem a, fugiat placeat maiores reprehenderit voluptate at quaerat, alias explicabo sit eos minus dolore iste modi? Corporis iusto accusamus dicta, maxime?

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

Lorem ipsum dolor sit amet: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem a, fugiat placeat maiores reprehenderit

<dl class="_dl-side">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Code

Make a code with the tag pre and code. Besides that you can also use xmp tags, but this is not recommended. To make the code untranslated, use it class="notranslate".

body{
    height: var(--100vh);
}

<pre class="notranslate">
<code>body{
    height: var(--100vh);
}
</code>
</pre>

Keyboard

ctrl+k+b

<kbd>...</kbd>

Images

Create responsive images using only img tags. Below are the styles used by the img tag.

img {
  display   : var(--block);
  max-width : var(--100pc);
  margin    : var(--auto);
}

200px x 200px

<img src="folder/sub-folder" alt="images">

Figures

Creating an image has a description.

200px x 200px

Figure Caption

<figure>
    <img src="folder/sub-folder" alt="images">
    <figcaption>Figure Caption</figcaption>
</figure>

Tables

Make tables responsive and more elegant.

No	HTML	CSS	Javascript
1	Haml	LESS	Babel
2	Pug	SCSS	TypeScript

<div class="_table-scroll">
    <table>
        <tr>
            <th>No</th>
            <th>HTML</th>
            <th>CSS</th>
            <th>Javascript</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Haml</td>
            <td>LESS</td>
            <td>Babel</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Pug</td>
            <td>SCSS</td>
            <td>TypeScript</td>
        </tr>
    </table>
</div>

Forms

Styles that are only made simple. If you don't believe, see for yourself.

<form action="form.php">
    <label for="text">Type Text</label>
    <input id="text" type="text" name="text" placeholder="Text">
    
    <label for="password">Type Password</label>
    <input id="password" type="password" name="password" placeholder="Password" required>

    <label for="email">Type Email</label>
    <input id="email" type="email" name="email" placeholder="Email" required>

    <label for="search">Type Search</label>
    <input id="search" type="search" name="search" placeholder="Search">

    <label for="url">Type URL</label>
    <input id="url" type="url" name="url" placeholder="URL">

    <label for="number">Type Number</label>
    <input id="number" type="number" name="number" min="1" max="30" value="30">

    <label for="range">Type Range</label>
    <input id="range" type="range" name="range" min="1" max="100">

    <label for="file">Type File</label>
    <input id="file" type="file" name="file">

    <label for="submit">Type Submit</label>
    <input id="submit" type="submit" name="submit" value="Submit">

    <label for="button">Type Button</label>
    <input id="button" type="button" name="button" value="Button"> 
        
    <label for="reset">Type Reset</label>
    <input id="reset" type="reset" name="reset">

    <label for="radio">Type Radio</label>
    <input id="radio" type="radio" name="radio">

    <label for="checkbox">Type checkbox</label>
    <input id="checkbox" type="checkbox" name="checkbox">      
</form>

Buttons

Make simple buttons with class ._btn

Button Button Button Button Button

<span class="_btn-default">Button</span>
<span class="_btn _nel-bg-red">Button</span>
<span class="_btn _nel-bg-yellow">Button</span>
<span class="_btn _nel-bg-green">Button</span>
<span class="_btn _nel-bg-blue">Button</span>

Helper Class

Make colored warning boxes and important note boxes with the helper class. The soft colors of the rainbow are beautiful. Red, Yellow, Green, Blue.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis vero necessitatibus, dolorum sint libero consequatur iste sapiente quam similique, excepturi provident deserunt, eveniet velit quae facilis, veritatis aut. Unde?

<p class="_warning-default">...</p>
<p class="_warning-red">...</p>
<p class="_warning-yellow">...</p>
<p class="_warning-green">...</p>
<p class="_warning-blue">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<p class="_helper-red">...</p>
<p class="_helper-yellow">...</p>
<p class="_helper-green">...</p>
<p class="_helper-blue">...</p>

Position

Make the position static, relative, absolute, fixed and sticky with class.

Class	Value
_static	static
_relative	relative
_absolute	absolute
_fixed	fixed	top: 0	left: 0	right: 0	z-index: 9998
_sticky	sticky	top : 0	z-index: 9998

<div class="_static">

</div>
<div class="_relative">

</div>
<div class="_absolute">

</div>
<div class="_fixed">

</div>
<div class="_sticky">

</div>

Badge

Beautiful badge to make small round notifications.

New 1.0 2.0 3.0 4.0 5.0

<span class="_badge-text _nel-bg-blue">New</span>
<span class="_badge">1.0</span>
<span class="_badge _nel-bg-red">2.0</span>
<span class="_badge _nel-bg-yellow">3.0</span>
<span class="_badge _nel-bg-green">4.0</span>
<span class="_badge _nel-bg-blue">5.0</span>

Breadcrumb

Make a horizontal arrow navigation.

library bin mysql

<div class="_breadcrumb">
    <span>library</span>
    <span>bin</span>
    <span>mysql</span>
</div>

Article

Make articles from titles, when they are published, comments, readmore, etc.

Heading

Written by andikachamberlin 01 Januari 2018 Category

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita ratione maxime mollitia aperiam vel error ex libero delectus neque nemo ab quia illum sed minus in unde, voluptatem eaque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ipsam ex optio fugit assumenda accusamus labore exercitationem a blanditiis, repudiandae veritatis unde dolorum amet magni eum. Totam modi, accusamus doloremque.

Readmore Comments 10

<div class="_article">
    <h3 class="_article-heading">Heading</h3>
    <div class="_article-publish">
        <span>Written by</span>
        <span><a href="#">andikachamberlin</a></span>
        <span>01 Januari 2018</span>
        <span><a href="#">Category</a></span>
    </div>

    <p class="_article-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita ratione maxime mollitia aperiam vel error ex libero delectus neque nemo ab quia illum sed minus in unde, voluptatem eaque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ipsam ex optio fugit assumenda accusamus labore exercitationem a blanditiis, repudiandae veritatis unde dolorum amet magni eum. Totam modi, accusamus doloremque.
    </p>

    <div class="_article-btn">
        <a href="#">Readmore</a>
        <a href="#">Comments <span class="_badge">10</span></a>
    </div>
</div>

Pagination

Make navigation move pages.

Previous
1
2
3
Next

<ul class="_pagination">
    <li><a href="#"></a>Previous</li>
    <li><a href="#"></a>1</li>
    <li><a href="#"></a>2</li>
    <li><a href="#"></a>3</li>
    <li><a href="#"></a>Next</li>
</ul>

Media Query

Eliminating Elements on the condition of smartphones, tablets, desktops.

_hs	@media (max-width: 600px)	Removes elements in smartphone conditions
_hm	@media (max-width:992px) and (min-width:601px)	Removes elements on tablet conditions
_hl	@media (min-width:993px)	Removes elements in desktop conditions

You are currently in a desktop condition. This element is removed in the condition of smartphones and tablets

<div class="_hs _hm">...</div>

You are currently in a tablet condition. This element is removed in the condition of smartphones and desktops

<div class="_hs _hl">...</div>

You are currently in a smartphone condition. This element is removed on tablet and desktop conditions

<div class="_hm _hl">...</div>

Borders

Make a line with the border. Up, Right, Down, Left.

Border Default Border Top Border Right Border Bottom Border Left

Circle

<span class="_border">
    Border Default
</span>

<span class="_border-t">
    Border Top
</span>

<span class="_border-r">
    Border Right
</span>

<span class="_border-b">
    Border Bottom
</span>

<span class="_border-l">
    Border Left
</span>

<div class="_border _circle">
    Circle
</div>

Display

Make a display with class.

_block

_inline-block

_inline

<div class="_block">...</div>
<div class="_inline-block">...</div>
<div class="_inline">...</div>

Width & Height

Make width and height with class. Width with% while height with px.

Width
_width-10pc	10%
_width-20pc	20%
_width-30pc	30%
_width-40pc	40%
_width-50pc	50%
_width-60pc	60%
_width-70pc	70%
_width-80pc	80%
_width-90pc	90%
_width-100pc	100%

._width-d	400px
._width-s	200px
._width-m	600px
._width-l	800px
._width-g	1000px

Height
._height-d	400px
._height-s	200px
._height-m	600px
._height-l	800px
._height-g	1000px

_nel Color

Four smooth colors _nel.

_nel Red _nel Yellow _nel Green _nel Blue

<div class="_nel-bg-red">...</div>
<div class="_nel-bg-yellow">...</div>
<div class="_nel-bg-green">...</div>
<div class="_nel-bg-blue">...</div>

<div class="_nel-red">...</div>
<div class="_nel-yellow">...</div>
<div class="_nel-green">...</div>
<div class="_nel-blue">...</div>

Push

Class to push elements by margin. Can push (+) or (-).

Please note, the unique code behind the class has the meaning, (d) default, (t) top, (r) right, (b) bottom, (l) left. and mpush means minus push. Means minus size.

Size	_push	_mpush	_push-t	_push-r	_push-b	_push-r
1em	_push-d	_mpush-d	_push-t-d	_push-r-d	_push-b-d	_push-l-d
4px	_push-s	_mpush-s	_push-t-s	_push-r-s	_push-b-s	_push-l-s
8px	_push-m	_mpush-m	_push-t-m	_push-r-m	_push-b-m	_push-l-m
24px	_push-l	_mpush-l	_push-t-l	_push-r-l	_push-b-l	_push-l-l
32px	_push-g	_mpush-g	_push-t-g	_push-r-g	_push-b-g	_push-l-g

<div class="_push-t-d"></div>

Embeds

Display external files with iframe, video, embed and object tags. To display youtube videos, it is recommended to use the embed tag. But for offline, you can use a tag other than the embed tag.

<div class="_embed _ratio-21by9">
    <embed class="_embed-item" src="https://www.youtube.com/embed/ID">
</div>

<div class="_embed _ratio-16by9">
    <embed class="_embed-item" src="https://www.youtube.com/embed/ID">
</div>

<div class="_embed _ratio-4by3">
    <embed class="_embed-item" src="https://www.youtube.com/embed/ID">
</div>

<div class="_embed _ratio-1by1">
    <embed class="_embed-item" src="https://www.youtube.com/embed/ID">
</div>

Grid

Make 12 columns with flex easily. It's time to say goodbye to float, so far he has accompanied us in making a column. Let's say thank you.

Responsive breakpoints

Below is a media query to overcome the appearance of columns in 3 main devices. If you look at the code below, the class without media is the class for smartphone mode, while min-width: 600px for tablets and then for desktop.

._flex._s12 {width: var(--flex12)}
...

@media only screen and (min-width:601px){
    ._flex._m12 {width: var(--flex12)}
    ...
}

@media only screen and (min-width:993px){
    ._flex._m12 {width: var(--flex12)}
    ...
}

12 Column

Size	Desktop	Tablet	Smartphone
100%	_l12	_m12	_s12
91.66666667%	_l11	_m11	_s11
83.33333333%	_l10	_m10	_s10
75%	_l9	_m9	_s9
66.66666667%	_l8	_m8	_s8
58.33333333%	_l7	_m7	_s7
50%	_l6	_m6	_s6
41.66666667%	_l5	_m5	_s5
33.33333333%	_l4	_m4	_s4
25%	_l3	_m3	_s3
16.66666667%	_l2	_m2	_s2
8.33333333%	_l1	_m1	_s1

12

6

3

12

6

3

12

6

3

12

6

3

<div class="_row-flex">
    <div class="_flex _l3 _m6 _s12">
        
    </div>
    <div class="_flex _l3 _m6 _s12">
        
    </div>
    <div class="_flex _l3 _m6 _s12">
        
    </div>
    <div class="_flex _l3 _m6 _s12">
        
    </div>
</div>

To make an offset, you don't need to fill the content on the left side, and it's like a margin-left push on the column float. But on Flexbox, we don't need to create more classes, just empty it.

Offset

<div class="_row-flex">
    <div class="_flex _l6 _m6 _s6">
        No Content
    </div>

    <div class="_flex _l6 _m6 _s6">
        Content 
    </div>
</div>

Class Grid

The grid class is the padding to make the column have a distance, see the example below.

Size	Class	Stuck Container (16px)
8px	_grid	_mpush-d
4px	_grid-s	_mpush-m
16px	_grid-m	_mpush-g

When the container is given a padding, it will automatically push all the elements including the column, so it will make the column pushed too. But if the container is not given a padding value, the column will run well. Below is an example if the container is rated padding.

12

6

12

6

<div class="_row-flex _grid">
    <div class="_flex _grid _l6 _m6 _s12">
       
    </div>
    <div class="_flex _grid _l6 _m6 _s12">
        
    </div>
</div>

To overcome this additional class _mpush-d

12

6

12

6

<div class="_row-flex _grid _mpush-d">
    <div class="_flex _grid _l6 _m6 _s12">
       
    </div>
    <div class="_flex _grid _l6 _m6 _s12">
        
    </div>
</div>

Layout

Keep the container in the middle when it passes through the browser supervisor. See the example below to understand.

Size	Class
1024px	layout-d
300px	layout-t
600px	layout-s
800px	layout-m
1280px	layout-l
1600px	layout-g

<div class="_layout-d">

</div>

About

I'm Andika Chamberlin created a _nel framework with good intentions, which is to make it easier for other developers to create web display. I also want to thank all parties for the code that I use to be incorporated into the _nel framework. I am a Muslim, and only hope your prayers can enter the paradise of Amin.

History

Initially the _nel framework is a core framework that will be released in version 6.0, but for reasons of name: core is identical to the net framework belongs to microsoft, so the author changed its name to _nel. It seems that no one has this name, moreover _nel has a unique code _ so it's more certain that there is no same framework name. In the past I created a framework called core, in short during the development period, I always had difficulty overcoming new css properties that did not support the old browser. Examples of css variables that do not support IE and many other examples. Therefore, I finally risked not supporting all IE browser versions. And emphasizes the use of 5 popular browsers, chrome, firefox, edge, opera and safari. And created the gear. Framework created with variable css and open source code.

I honestly are not good at talking, I should just close it. But if you want to be friends, I am very grateful and want to say how are you? hope you're healthy always.

Introduction

Starter Template

CDN

CDN SRI

Explanation

IE Alert

Load

Content

Browsers & Devices

Mobile devices

Desktop Browsers

Vendor

Variable

:root

Typography

Headings

H1. _nel Heading

H2. _nel Heading

H3. _nel Heading

H4. _nel Heading

H1. _nel Heading

H1. _nel Heading

Small

_nel Linquini

Paragraph

Marked text

Deleted text

S strong E em I ins

Alignment

Position Absolute

Transformation

Drop Caps

Hover Text

Address

Blockquotes

List

Description

Code

Keyboard

Images

Figures

Tables

Forms

Buttons

Helper Class

Position

Badge

Breadcrumb

Article

Heading

Pagination

Media Query

Borders

Display

Width & Height

_nel Color

Push

Embeds

Grid

Responsive breakpoints

12 Column

Class Grid

Layout

About

History

S ^strong E ^em I ^ins