Skip to content

Commit

Permalink
feat(version): 3.1
Browse files Browse the repository at this point in the history
  • Loading branch information
lubomirblazekcz committed Feb 3, 2022
1 parent c12b599 commit 9e10f82
Show file tree
Hide file tree
Showing 95 changed files with 4,448 additions and 2,261 deletions.
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,3 @@ temp/*
/public/assets/
/public/*.html
/public/*.json
/public/emails/*.html
#!.gitkeep
16 changes: 10 additions & 6 deletions .stylelintrc
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
{
"extends": "stylelint-config-standard",
"rules": {
"no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": [true, {"ignoreFontFamilies": ["iconfont"]}],
"at-rule-no-unknown": [true, {"ignoreAtRules": ["mixin", "define-mixin", "layer", "variants"]}],
"at-rule-no-unknown": [true, {"ignoreAtRules": ["layer", "tailwind"]}],
"selector-list-comma-newline-after": "always-multi-line",
"string-quotes": "double",
"comment-empty-line-before": ["always", {"except": ["first-nested"], "ignore": ["stylelint-commands"], "ignoreComments": ["/^clean-css/"]}],
"length-zero-no-unit": [true, {"ignore": ["custom-properties"]}]
"length-zero-no-unit": [true, {"ignore": ["custom-properties"]}],
"value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }],
"alpha-value-notation": "number",
"property-no-vendor-prefix": [true, { "ignoreProperties": "appearance" }],
"number-max-precision": [4, { "ignoreProperties": "letter-spacing" }],
"max-line-length": 140,
"selector-class-pattern": null
},
"ignoreFiles": ["src/icons/*.css", "**/+.css"]
}
"ignoreFiles": ["**/+.css", "src/styles/Utils/normalize.css", "src/styles/Ui/Input.css"]
}
9 changes: 9 additions & 0 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
v3.1.0
* feat: tailwind v3 update
* feat: stimulus v3 update
* feat: iconfont replaced with svg icons
* feat: updated lib-cookieconsent
* feat: improved lib-anchor
* feat: most of callbacks replaced with promises
* feat: complete refactor of CSS and JS

v3.0.13
* feat: recaptcha enterprise

Expand Down
16 changes: 6 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@

# 🎨 Newlogic UI

> v3 is still in early development
Modern and modular CSS framework with the best principles.
Lightweight, modern and modular CSS framework with the best principles

- 💡 Modern
- 📦 Modular
- 📏 Responsive
- ✨️ Progressive
- ⚡️ Fast

Newlogic UI is component framework with simple syntax. Inspired by popular frameworks like Bootstrap and Bulma. It uses Tailwind CSS for utility classes. The modern approach comes first.
Newlogic UI is component framework with easy syntax. Modern approach of CSS properties, enriched with utility classes from Tailwind. Inspired by favourite frameworks like Boostrap and Bulma

Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP

## ⚙️ Under the hood
* **[Newlogic Core](https://core.newlogic.cz/)** - set of tools that can be used to create modern web applications
Expand All @@ -32,7 +32,7 @@ Newlogic UI is component framework with simple syntax. Inspired by popular frame
* **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.


The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS code and contains other tools for web development. The source code is written in way that it can be used with other tools or a completely different environment than NodeJS, such as Deno. In general the rule is that the source code should be executable in current or future browsers, so it's written with W3C standards in mind. The framework is modular and you can really use only what is needed for your project.
The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.

## 🪄 Instalation

Expand All @@ -56,7 +56,6 @@ $ npm i @newlogic-newlogic/ui

```css
/* main.css or individual modules */
@import "node_modules/@newlogic/ui/src/icons/style.css"
@import "node_modules/@newlogic/ui/src/styles/main.css"
```

Expand All @@ -75,10 +74,7 @@ import "node_modules/@newlogic/ui/src/scripts/main.js"
Each Newlogic Core project has to have config via `gulpfile.js`, docs - [core.newlogic.cz](https://core.newlogic.cz/)

## 📌 Future plans
- finishing docs and translating it to english
- lighthouse optimization
- upgrading form elements
- new elements - dropdown, notificaton, snack and more
- performance optimization

## Licence
GNU GPLv3
171 changes: 10 additions & 161 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { defineConfig } from '@newlogic-digital/core'
import postcssMixins from 'postcss-mixins'
import cms from "./src/module.cms.js"

export default defineConfig({
config: true,
modules: {cms},
serve: {
https: true
},
scripts: {
importResolution: {
directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Utils/Functions', 'Ui']
Expand All @@ -13,11 +18,12 @@ export default defineConfig({
},
styles: {
purge: {
content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'temp/cdn/*.js'],
enabled: true,
content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'www/templates/**/*.tpl', 'temp/cdn/*.js', 'admin_ex/js/templates/*.html', 'index.html'],
options: {
safelist: {
standard: [/(class|is-|to-|grecaptcha)/],
deep: [/(ui-wsw|wsw|datepicker)/]
deep: [/(ui-text|wsw|datepicker)/]
}
}
},
Expand All @@ -29,164 +35,7 @@ export default defineConfig({
},
themePath: 'Utils/theme/{THEME}.{FORMAT}',
postcss: {
extend: [postcssMixins]
extend: []
}
},
tailwind: {
darkMode: 'class', // or "media" or "class"
corePlugins: {
preflight: false,
container: false,
ringWidth: false,
ringColor: false,
ringOpacity: false,
ringOffsetWidth: false,
ringOffsetColor: false,
gradientColorStops: false,
backgroundImage: false,
boxShadow: false
},
theme: {
extend: {
colors: {
background: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-background), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-background), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-background))'
},
default: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-default), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-default), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-default))'
},
invert: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-invert), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-invert), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-invert))'
},
light: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-light), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-light), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-light))'
},
dark: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-dark), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-dark), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-dark))'
},
primary: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-primary), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-primary))'
},
secondary: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-secondary), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-secondary), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-secondary))'
},
warning: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-warning), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-warning), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-warning))'
},
error: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-error), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-error), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-error))'
},
info: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-info), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-info), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-info))'
},
success: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-success), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-success), var(${opacityVariable}, 1))`
}
return 'rgb(var(--color-success))'
}
}
},
fontFamily: {
primary: 'var(--font-primary)',
secondary: 'var(--font-secondary)'
},
fontWeight: {
light: 'var(--weight-light)',
normal: 'var(--weight-normal)',
medium: 'var(--weight-medium)',
semibold: 'var(--weight-semibold)',
bold: 'var(--weight-bold)',
extrabold: 'var(--weight-extrabold)'
},
zIndex: {
0: 0,
10: 'var(--z-10)',
20: 'var(--z-20)',
30: 'var(--z-30)',
40: 'var(--z-40)',
50: 'var(--z-50)',
auto: 'auto'
},
screens: {
m: { max: '47.9375em' },
t: '48em',
d: '60em',
w: '76em',
hd: '88em',
touch: { max: '59.9375em' }
}
},
variants: {
extend: {
backgroundColor: ['checked'],
borderColor: ['checked'],
textColor: ['checked']
}
},
plugins: []
}
})
22 changes: 10 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
{
"name": "@newlogic-digital/ui",
"version": "3.0.13",
"version": "3.1.0",
"type": "module",
"main": "gulpfile.js",
"author": "New Logic Studio s.r.o.",
"description": "Modern and modular CSS framework with the best principles",
"description": "Lightweight, modern and modular CSS framework with the best principles",
"license": "GNU GPLv3",
"scripts": {
"utils:eslint": "eslint 'src/**/*.js' --fix",
"utils:stylelint": "stylelint 'src/**/*.css' --fix"
"utils:eslint": "eslint 'src/scripts/**/*.js' --fix",
"utils:stylelint": "stylelint 'src/styles/**/*.css' --fix"
},
"imports": {},
"dependencies": {
"@simonwep/pickr": "^1.8.1",
"@stimulus/core": "2.0.0",
"cleave.js": "^1.6.0",
"@simonwep/pickr": "^1.8.2",
"@hotwired/stimulus": "3.0.1",
"swup": "2.0.14",
"tippy.js": "^6.3.1",
"vanillajs-datepicker": "^1.1.4"
"tippy.js": "^6.3.7",
"vanillajs-datepicker": "^1.2.0"
},
"devDependencies": {
"@newlogic-digital/core": "~0.6.3",
"@newlogic-digital/core": "~0.9.5",
"eslint-config-standard": "^16.0.3",
"postcss-mixins": "^8.1.0",
"stylelint-config-standard": "^22.0.0"
"stylelint-config-standard": "^24.0.0"
},
"files": [
"src",
Expand Down
30 changes: 30 additions & 0 deletions public/sw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const offlineUrl = '/offline'

self.addEventListener('install', function(event) {
const offlineRequest = new Request(offlineUrl)

event.waitUntil(
fetch(offlineRequest).then(function(response) {
return caches.open('offline').then(function(cache) {
console.log('[oninstall] Cached offline page', response.url)
return cache.put(offlineRequest, response)
})
})
)
})

self.addEventListener('fetch', function(event) {
const request = event.request

if (request.url.match(/\.(css|jpg|jpeg|png|gif|js|woff|woff2|ttf|svg|mp4|webp)$/) || request.url.indexOf(request.referrer) !== 0) {
} else if (request.method === 'GET') {
event.respondWith(
fetch(request).catch(function(error) {
console.log('[onfetch] Failed. Serving cached offline fallback ' + error)
return caches.open('offline').then(function(cache) {
return cache.match(offlineUrl)
})
})
)
}
})
32 changes: 32 additions & 0 deletions src/icons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9e10f82

Please sign in to comment.