Mixins API
Каталог SCSS-міксинів (варіанти scss/sass/less) і детермінований генератор CSS clamp() — давайте своєму конвеєру збирання чи LLM-агенту ті самі відповіді, що повертають наші інструменти.
Два ендпоінти (переважно для читання), на яких працюють наші власні інструменти для розробників: каталог SCSS-міксинів (його використовує /dev/scss-mixins) і математика CSS clamp() (її використовує /dev/clamp-generator). Створені, щоб LLM-агенти й CI-скрипти отримували точно ті самі відповіді, що показує наш UI, — без скрейпінгу сторінки.
# List all mixins (summary, no source)
curl "https://jinero.online/api/v1/dev/scss-mixins"
# Fluid font-size clamp from 16px → 48px
curl "https://jinero.online/api/v1/dev/clamp?min_fs=16&max_fs=48"const r = await fetch("https://jinero.online/api/v1/dev/scss-mixins?group=Project&fields=summary");
const { items, groups, count } = await r.json();Обидва ендпоінти публічні й працюють на чистому PHP (без Node / Python). Щедрі ліміти, без холодних стартів.
# Anonymous limits (per IP):
# GET /dev/scss-mixins 60 req/min
# GET /dev/scss-mixins/{id} 60 req/min
# GET /dev/clamp 60 req/minКаталог усіх наших міксинів — реекспорти Bootstrap, власні міксини проєкту, поширені патерни й SCSS-плейсхолдери. Фільтруйте за групою, шукайте в id/title/description і вирішуйте, чи потрібні лише короткі описи, чи повний код.
https://jinero.online/api/v1/dev/scss-mixins
| Параметр | Тип | Опис |
|---|---|---|
group |
string | Одна з груп, які повертає відповідь (зараз Bootstrap, Project, Pattern, Placeholder). З урахуванням регістру. |
search |
string | Нечіткий пошук підрядка в id, назві, короткому й повному описі. |
fields |
string | summary (за замовчуванням — без коду, легша відповідь) або full (з scss / sass / less / demo). |
# Only Project mixins, with full source
curl "https://jinero.online/api/v1/dev/scss-mixins?group=Project&fields=full"
# Search
curl "https://jinero.online/api/v1/dev/scss-mixins?search=clamp"const r = await fetch("https://jinero.online/api/v1/dev/scss-mixins?fields=full");
const { items } = await r.json();
// Build an in-memory index
const byId = Object.fromEntries(items.map(m => [m.id, m]));{
"success": true,
"count": 27,
"groups": ["Bootstrap", "Project", "Pattern", "Placeholder"],
"items": [
{
"id": "centerer",
"title": "centerer()",
"group": "Project",
"short": "Absolute centering helper with axis toggles.",
"desc": "A practical utility when you need a badge, dot, handle, or overlay element pinned to the real visual center.",
"url": "https://jinero.online/dev/scss-mixins#centerer"
}
]
}Повний код одного міксину в синтаксисах scss, sass і less, а також коротке демо, щоб побачити використання. Підходить для агента, який хоче одразу додати міксин у проєкт.
https://jinero.online/api/v1/dev/scss-mixins/{id}
| Параметр | Тип | Опис |
|---|---|---|
id |
string (path) | id міксину з відповіді списку (slug у kebab-case, напр. "centerer", "media-breakpoint-up"). |
curl "https://jinero.online/api/v1/dev/scss-mixins/centerer"const r = await fetch("https://jinero.online/api/v1/dev/scss-mixins/centerer");
const { mixin } = await r.json();
navigator.clipboard.writeText(mixin.scss);{
"success": true,
"mixin": {
"id": "centerer",
"title": "centerer()",
"group": "Project",
"short": "Absolute centering helper with axis toggles.",
"desc": "...",
"scss": "@mixin centerer($horizontal: true, $vertical: true) {\n position: absolute;\n ...\n}",
"sass": "@mixin centerer($horizontal: true, $vertical: true)\n position: absolute\n ...",
"less": "...",
"demo": "centerer",
"url": "https://jinero.online/dev/scss-mixins#centerer"
}
}Розраховує плинний clamp() для типографіки чи відступів. Повертає CSS-рядок і саму математику (нахил, зсув, коефіцієнт vw), тож результат можна використати і в CSS, і в SCSS. Розрахунки байт у байт збігаються з нашим вебінструментом /dev/clamp-generator.
https://jinero.online/api/v1/dev/clamp
| Параметр | Тип | Опис |
|---|---|---|
min_fs |
number | Мінімальний розмір у px (зазвичай font-size, але підходить для будь-якої довжини). |
max_fs |
number | Максимальний розмір у px. |
min_vw |
number | Ширина в'юпорту, за якої досягається min_fs. За замовчуванням 320. |
max_vw |
number | Ширина в'юпорту, за якої досягається max_fs. За замовчуванням 1440. Має бути > min_vw. |
unit |
string | px, rem (за замовчуванням) або both. Визначає, який варіант повертає поле css. |
root |
number | Кореневий font-size у px для перерахунку в rem. За замовчуванням 16. |
# 16px → 48px between 320 and 1440 viewports
curl "https://jinero.online/api/v1/dev/clamp?min_fs=16&max_fs=48"
# Spacing token with px output
curl "https://jinero.online/api/v1/dev/clamp?min_fs=24&max_fs=64&min_vw=480&max_vw=1920&unit=px"const r = await fetch("https://jinero.online/api/v1/dev/clamp?min_fs=16&max_fs=48");
const { css, variants } = await r.json();
document.documentElement.style.setProperty("--fluid-fs", variants.rem);$res = Http::get("https://jinero.online/api/v1/dev/clamp", [
"min_fs" => 16,
"max_fs" => 48,
]);
$css = $res->json("css");{
"success": true,
"inputs": {
"min_fs": 16, "max_fs": 48,
"min_vw": 320, "max_vw": 1440,
"root": 16, "unit": "rem"
},
"math": {
"slope": 0.028571,
"intercept_px": 6.8571,
"vw_coefficient": 2.8571
},
"css": "clamp(1rem, 0.4286rem + 2.8571vw, 3rem)",
"variants": {
"px": "clamp(16px, 6.8571px + 2.8571vw, 48px)",
"rem": "clamp(1rem, 0.4286rem + 2.8571vw, 3rem)"
}
}Стандартна семантика HTTP. Помилки повертають JSON із полем "message".
// 404 — mixin id not found
{ "message": "Mixin not found" }
// 422 — invalid clamp inputs (e.g. max_vw <= min_vw)
{ "message": "max_vw must be greater than min_vw." }
// 422 — invalid step (must be 5, 10, 20 or 25 — for shades only, not relevant here)
{ "message": "The selected step is invalid." }
// 429 — rate limit exceeded
{ "message": "Too Many Attempts." }Про Dev API jinero.online
Безкоштовний REST API утиліт для розробників — каталог SCSS-міксинів із пошуком і варіантами scss/sass/less та детермінована математика CSS clamp() для плинної типографіки й відступів.
Каталог міксинів як API
Кожен міксин нашої SCSS-бібліотеки — реекспорти Bootstrap, утиліти проєкту, дизайн-патерни, плейсхолдери — доступний як JSON з id, групою, полями для пошуку й повним кодом.
scss · sass · less
Кожен міксин повертається в трьох синтаксисах. Обирайте той, якого чекає ваш конвеєр збирання, — без ручного переписування.
Детермінована математика clamp
Математика clamp() написана на чистому PHP й ідентична JS-реалізації в нашому інтерфейсі /dev/clamp-generator — те саме округлення, ті самі рядки на виході.
Без кроку збирання
Обидва ендпоінти переважно для читання, на чистому PHP, без Node чи Python — швидка перша відповідь і передбачувана вартість.
Часті запитання
Ні. Обидва ендпоінти публічні й мають ліміт 60 запитів/хв з одного IP. Якщо для пакетної роботи агентів потрібні вищі ліміти, зареєструйтеся й отримайте токен.
Це JSON-каталоги в storage/app/mixins/ — bootstrap.json, project.json, project-extra.json, patterns.json, placeholders.json. Поки що додати міксини можна лише редагуванням цих файлів (і повторним розгортанням); згодом ми можемо перенести їх у базу даних, якщо з'являться внески від користувачів.
Повний каталог із кодом scss/sass/less для 27 міксинів важить ~80 КБ. Більшості клієнтів потрібен лише індекс для навігації, а далі вони отримують міксини по одному. Передайте fields=full, якщо хочете все за один запит.
Так — slope = (maxFs - minFs) / (maxVw - minVw); intercept = minFs - slope * minVw; clamp(minFs, intercept + slope*100vw, maxFs). Варіант у rem ми рахуємо відносно root (за замовчуванням 16px). Нулі в кінці чисел обрізаються для читабельності.
Вебінструмент пропонує обгортку у вигляді SCSS-функції, але API повертає сирий вираз CSS clamp() — якщо потрібна SCSS-функція, обгорніть його на клієнті. Можливо, додамо поле scss_fn, якщо буде попит.