World's smallest responsive 🔥 css framework (395 bytes)

Last update: Jan 7, 2023

Overview

lit 🔥

a ridiculously small responsive css framework.

I challenged myself to see how small I could go, but preserve everything Skeleton, Milligram, and other micro frameworks have to offer.

Features

12 Column Responsive Grid
Typography for h1-h6, and body text
Three types of buttons
Cards
Inputs
Table Styles

and a little bit more...

util

util is an atomic css addon for lit. It is currently a work in progress, but feel free to check it out at https://ajusa.github.io/lit/docs/util.html

Getting Started

Install lit.css with one of the following:

NPM: npm install --save @ajusa/lit
CSS3: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ajusa/lit@latest/dist/lit.css" />
CSSNext: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ajusa/lit@latest/src/lit.css" />

Read the Docs to see usage

Note: lit uses PostCSS to transform from CSSNext to CSS3. If you are comfortable outright using CSSNext, you can directly include the lit.css file in the src directory. Otherwise, use the dist/lit.css file.

Supported Browsers

lit supports most modern browsers (Chrome, Firefox, Edge, Opera) but it also has impressive support for older browsers. lit has been tested on Internet Explorer 11 with no issues.

Development Setup

Clone this repository (https://www.github.com/ajusa/lit)
Make sure you have npm installed
Run npm install in the root directory of lit
Once that is completed, run npm run build to build the minified version and the gzipped file.
If you are making changes live, use npm run watch. watch will build the minified css file in ./dist whenever there is a change in ./src/lit.css.

Comments

Using zopfli to compress squeezes out 3 more bytes

The following outputs a file that is 395 bytes:

function css(done) {
    var postcss = require('gulp-postcss');
    var cleanCSS = require('gulp-clean-css');
    var cssvariables = require('postcss-css-variables');
    var zopfli= require('gulp-zopfli');
    return gulp.src('src/*.css')
        .pipe(postcss([cssvariables()]))
        .pipe(cleanCSS({ level: 2 }))
        .pipe(gulp.dest('dist/'))
        .pipe(zopfli())
        .pipe(gulp.dest('dist/'));
    done();
}

opened by davidmurdoch 8

Grid system with numbers?

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B\26 W\3F”.

opened by Mark-Creeten 5
Create development guide

Needs to include how to get set up with lit's build system (gulp), and how to extend and modify lit with minimal hassle. This should go on the readme, with a link from the website.

opened by ajusa 5
var idea

just an idea... thought i'd throw it out there... love what you've done here! the simplicity is great! Not sure how much this adds but it would be nice to have some easy overrides... like i said. just a thought.

opened by archae0pteryx 5
Grid cell with "6 col" takes more then half of the width if content is large

Hi there

If not defining the column width with two columns or using "6 col", a cell with some larger content will take as much space as it needs. Other column widths than 6 work as expected.

See an example here; https://www.w3schools.com/code/tryit.asp?filename=GETCRXX18RSO

opened by ractive 4
Publish to npm

The package.json says the name is lit but npm shows something different.

Can you deploy to npm so that other projects can include this as a dependency. Also CDNs such as unpkg and jsdilvr can work without build tools with npm packages. For an example, see copee.

opened by styfle 3
Orange Color looks boring

Maybe its just me but the orange color kinda looks bad. It doesn't work with the background, makes it boring I guess. Maybe changing it to some dark contrast color would make the website look great. Also the links are hard to read bcz of the color contrast. Now I'm not a designer but I like beautiful designs & I think the framework is great but the color takes the appeal away. What do you guys think ?

opened by deadcoder0904 3
The card example in the docs doesn't work because the w-100 class is missing from the img tag

Hi,

Cf title.

How it should be (actual html of the docs website): https://github.com/ajusa/lit/blob/430bd49875c1289402a30bf659a7c9d04d66ae24/docs/lit.html#L321

How it is (example), the class="w-100" is missing which makes the card not responsive: https://github.com/ajusa/lit/blob/430bd49875c1289402a30bf659a7c9d04d66ae24/docs/lit.html#L339

Thank you for your work on this library, it's very nice and clean.

opened by EtienneDesticourt 2
Move Zopfli to dev dependencies
When I use this as a git dependency:

"lit": "github:Ajusa/lit"

It will build Zopfli from source each time:

I assume this can just be moved to dev deps where everything else is?
opened by jamen 1
Chore: add npm scripts

Actually you have done everything right in https://github.com/Ajusa/lit/issues/5#issuecomment-355965222. I just assume you have called the scripts wrongly. Once you have set up your npm scripts, you also have to call them as such. In this PR I introduced the scripts watch and build. These should be executed as npm run watch or npm run build (as I mentioned in the Dev Setup).

Just a hint, if you want to test that gulp is running in your npm scripts, you can write ./node_modules/.bin/gulp into your shell. As in ./node_modules/.bin are all modules which are executable within your npm script (hope this was not confusing).

Here I added a screenshot to illustrate it. In the first section I ran gulp, but gulp is not installed globally - so the command is unknown. In the second part, I ran gulp via the local node_modules. And in the third part, I run everything in the npm scripts, where nothing is installed globally now. But this does not mean you can't have a globally version of gulp as well 👍

Btw, within your Dev Docs I changed the path in (now) point 5. I just added a ./ before, so it is obvious that it is a directory in the root.

opened by JPeer264 1
Bump postcss, gulp-postcss and postcss-css-variables
Bumps postcss to 8.4.19 and updates ancestor dependencies postcss, gulp-postcss and postcss-css-variables. These dependencies need to be updated together.

Updates postcss from 6.0.16 to 8.4.19

Release notes

Sourced from postcss's releases.

8.4.19

Fixed whitespace preserving after AST transformations (by @romainmenke).

8.4.18

Fixed an error on absolute: true with empty sourceContent (by @KingSora).

8.4.17

Fixed Node.before() unexpected behavior (by @romainmenke).

Added TOC to docs (by @muddv).

8.4.16

Fixed Root AST migration.

8.4.15

Fixed AST normalization after using custom parser with old PostCSS AST.

8.4.14

Print “old plugin API” warning only if plugin was used (by @zardoy).

8.4.13

Fixed append() error after using .parent (by @thecrypticace).

8.4.12

Fixed package.funding to have same value between all PostCSS packages.

8.4.11

Fixed Declaration#raws.value type.

8.4.10

Fixed package.funding URL format.

8.4.9

Fixed package.funding (by @mondeja).

8.4.8

Fixed end position in empty Custom Properties.

8.4.7

Fixed Node#warn() type (by @ybiquitous).

Fixed comment removal in values after ,.

8.4.6

Prevented comment removing when it change meaning of CSS.

Fixed parsing space in last semicolon-less CSS Custom Properties.

Fixed comment cleaning in CSS Custom Properties with space.

Fixed throwing an error on .root access for plugin-less case.

8.4.5

Fixed raws types to make object extendable (by @43081j).

Moved from Yarn 1 to pnpm.

... (truncated)

Changelog

Sourced from postcss's changelog.

8.4.19

Fixed whitespace preserving after AST transformations (by Romain Menke).

8.4.18

Fixed an error on absolute: true with empty sourceContent (by Rene Haas).

8.4.17

Fixed Node.before() unexpected behavior (by Romain Menke).

Added TOC to docs (by Mikhail Dedov).

8.4.16

Fixed Root AST migration.

8.4.15

Fixed AST normalization after using custom parser with old PostCSS AST.

8.4.14

Print “old plugin API” warning only if plugin was used (by @zardoy).

8.4.13

Fixed append() error after using .parent (by Jordan Pittman).

8.4.12

Fixed package.funding to have same value between all PostCSS packages.

8.4.11

Fixed Declaration#raws.value type.

8.4.10

Fixed package.funding URL format.

8.4.9

Fixed package.funding (by Álvaro Mondéjar).

8.4.8

Fixed end position in empty Custom Properties.

8.4.7

Fixed Node#warn() type (by Masafumi Koba).

Fixed comment removal in values after ,.

8.4.6

Prevented comment removing when it change meaning of CSS.

Fixed parsing space in last semicolon-less CSS Custom Properties.

Fixed comment cleaning in CSS Custom Properties with space.

Fixed throwing an error on .root access for plugin-less case.

8.4.5

Fixed raws types to make object extendable (by James Garbutt).

Moved from Yarn 1 to pnpm.

... (truncated)

Commits

c26baf3 Release 8.4.19 version

ed5103d Update dependencies

8086ea3 Merge pull request #1790 from romainmenke/fix-whitespace-bug--passionate-afri...

4b38845 fix whitespace bug

cf9425a Merge pull request #1789 from eduardopilati/patch-1

ca04e0a Update plugins.md

fe63768 Update dependencies

3b6ba56 Add Node.js 19

d33f272 Release 8.4.18 version

75d6556 Update dependencies

Additional commits viewable in compare view

Updates gulp-postcss from 7.0.1 to 9.0.1

Release notes

Sourced from gulp-postcss's releases.

9.0.1

Bump postcss-load-config to ^3.0.0

9.0.0

Bump PostCSS to 8.0

Drop Node 6 support

PostCSS is now a peer dependency

8.0.0

Bump PostCSS to 7.0

Drop Node 4 support

Commits

70dfabe Release 9.0.1

5d3bf7a Merge pull request #176 from postcss/switch-to-github-workflows

22e8c3a Switch to github workflow for testing

a1b8242 Merge pull request #168 from alkorlos/update-dependency-postcss-load-config

1162ef1 update: dependency postcss-load-config

a073cf4 Merge pull request #1 from postcss/master

94170d6 Release 9.0.0

f3751c8 Merge pull request #162 from m4thieulavoie/chore/postcss-major-bump

c0519ac fix: changing node versions

0a013d0 fix: added postcss in devDependencies for testing

Additional commits viewable in compare view

Updates postcss-css-variables from 0.8.0 to 0.18.0

Release notes

Sourced from postcss-css-variables's releases.

postcss-css-variables-v0.14.0

Changelog: https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md#v0140---2019-11-24

postcss-css-variables-v0.13.0

Changelog: https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md#v0130---2019-6-17

postcss-css-variables-v0.12.0

Changelog: https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md#v0120---2019-2-21

postcss-css-variables-v0.11.0

Changelog: https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md#v0110---2018-10-9

postcss-css-variables-v0.10.0

Changelog: https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md#v0100---2018-9-25

postcss-css-variables-v0.9.0

v0.9.0 changelog

postcss-css-variables-v0.8.1

No release notes provided.

Changelog

Sourced from postcss-css-variables's changelog.

v0.18.0 - 2021-05-11

[breaking] Add basic postcss 8 support (older versions of PostCSS no longer compatible)

Thank you to @delucis for the contribution

v0.17.0 - 2020-04-24

Expand variables in AtRule properties

Thank you to @pvande for the contribution

Merged via MadLittleMods/postcss-css-variables#121

v0.16.0 - 2020-04-24

Add ability to pass callback function to options.preserve to determine whether to preserve declaration

Thank you to @ekatioz for the contribution

v0.15.0 - 2020-04-24

Fix algorithm to find balanced var() pairs and nested parenthesis

Thank you to @Poetro for the contribution

v0.14.0 - 2019-11-24

Fix regex in resolve-value.js to allow nested CSS functions

Thank you to @juliovedovatto for the contribution

v0.13.0 - 2019-06-17

Add options.preserveAtRulesOrder so media queries are outputted in the order they are defined (as expected)

Thank you to @erikthalen for the contribution via MadLittleMods/postcss-css-variables#101

Remove calc from readme table of contents for non-existent section

Thank you to @AlexandreArpin for the contribution

v0.12.0 - 2019-02-21

Accept whitespace in var( --var ) expression

Thank you to @benwest for the contribution

v0.11.0 - 2018-10-09

Fix JS-defined variables using isImportant, MadLittleMods/postcss-css-variables#87

v0.10.0 - 2018-09-25

Cast opts.variables variable values to string

Thank you to @shonie for the contribution

v0.9.0 - 2018-06-26

... (truncated)

Commits

f791dd2 0.18.0

0ae84a1 Prepare changelog with #129

2d7e0ee adding basic postcss 8 support

de77c3c Fix typo

8eb32cf 0.17.0

d4b5a2c Merge branch 'master' of github.com:MadLittleMods/postcss-css-variables

f4b703f Prepare changelog with #104

933738b Resolve review from #104

5af0790 Allow AtRules containing properties to have their variables expanded

47677f2 0.16.0

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Changed default font to `sans-serif` and some tweaks

Hello! In this PR, I changed the default font to sans-serif and did some small adjustments to lit.css. As a result, lit.css.gz increased a total of 39 bytes. I understand if that's a lot for a tiny CSS framework, and I understand if this PR is not accepted. I hope you like it anyway.

opened by ivan-avalos 1
Remove hardcoded font-family Nunito

Hello! It's a bit odd that nunito is hardcoded in the stylesheet, which forces you to install Nunito and misses the point of "ridiculously small". The font-family should be up to the user by default, I think.

opened by ivan-avalos 3

Releases(0.1)

0.1(Jan 8, 2018)
Hello everyone, Lit 0.1 is out! This means that lit's features are frozen: nothing should be removed at this point, and no class names should change. Lit currently includes:

Container

Grid

Typography

Navbar

Code Block

Buttons

Lists

Forms

Tables

Cards

Feature releases of lit will be based on reducing the size below 400 bytes, and then maintaining stability and adding features where possible.
Source code(tar.gz)
Source code(zip)

Owner

Arham Jain

I'm just a guy who likes to code

GitHub https://ajusa.github.io/lit

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device. What is it? OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on al