groenroos / bulma-stylus Goto Github PK
View Code? Open in Web Editor NEWA Stylus translation of a modern CSS framework based on Flexbox
License: MIT License
A Stylus translation of a modern CSS framework based on Flexbox
License: MIT License
Thanks a ton for doing this. Bulma not being in Stylus almost made me not use it despite really liking it.
Do you plan on keeping this actively maintained? I wouldn't mind helping with PR requests if need be. Looks like it's a little behind right now, but mainly just some small fixes.
autoprefixer
adds numerous vendor prefixed lines that are not present in the original Sass-based Bulma.
transform*
gets a -webkit-transform*
line above itflex*
gets a -webkit-box-flex
line above itjustify-content
gets a -webkit-box-pack
line above italign-items
gets a -webkit-box-align
line above itdisplay: flex*
gets a display: -webkit-*
line above itIt's not easy to fix, because the original Sass-based Bulma does have some -webkit-
prefixed rules, which should be preserved.
It's not clear why the same version of autoprefixer
appears to behave differently here than it does over on the Sass-based Bulma.
These rules are unlikely to have an impact on the end user (apart from a few additional bytes in filesize, an ostensibly wider browser support).
I am running a Hexo blog with this package and the server throws an OperationalError below.
03:36:22.234 ERROR {
err: [OperationalError: F:/code/nodejs/hexo-theme-unit-test/node_modules/bulma-stylus/stylus/utilities/functions.styl:8:5
4| if match('\b(' + $type + ')\b', typeof(v)) != null
5| _void = _void + 1;
6|
7| if length($list) != _void
8| error("Unexpected type inside the list.")
----------^
9| return false;
10|
11| return true;
Unexpected type inside the list.
] {
cause: [Error: F:/code/nodejs/hexo-theme-unit-test/node_modules/bulma-stylus/stylus/utilities/functions.styl:8:5
4| if match('\b(' + $type + ')\b', typeof(v)) != null
5| _void = _void + 1;
6|
7| if length($list) != _void
8| error("Unexpected type inside the list.")
----------^
9| return false;
10|
11| return true;
Unexpected type inside the list.
] {
fromStylus: true,
lineno: 8,
column: 5,
filename: 'F:/code/nodejs/hexo-theme-unit-test/node_modules/bulma-stylus/stylus/utilities/functions.styl',
stylusStack: '',
input: "listTypeofValuesValidator($list, $type= 'rgba|hsla')\n" +
' _void= 0;\n' +
' for v, i in $list\n' +
" if match('\\b(' + $type + ')\\b', typeof(v)) != null\n" +
' _void = _void + 1;\n' +
'\n' +
' if length($list) != _void\n' +
' error("Unexpected type inside the list.")\n' +
' return false;\n' +
'\n' +
' return true;\n' +
'\n' +
'mergeColorMaps($bulma-colors, $custom-colors)\n' +
" // We return at least Bulma's hard-coded colors\n" +
' $merged-colors = $bulma-colors\n' +
'\n' +
' // We want a map as input\n' +
" if typeof($custom-colors) == 'object'\n" +
' for $name, $components in $custom-colors\n' +
' // The color name should be a string\n' +
' // and the components either a single color\n' +
' // or a colors list with at least one element\n' +
" if typeof($name) == 'string' and (typeof($components) == 'ident' or listTypeofValuesValidator($components, 'rgba|hsla')) and length($components) >= 1\n" +
' $color-base = null\n' +
' $color-invert = null\n' +
' $color-light = null\n' +
' $color-dark = null\n' +
' $value = null\n' +
'\n' +
' // The param can either be a single color\n' +
' // or a list of 2 colors\n' +
" if listTypeofValuesValidator($components, 'rgba|hsla') and length($components) == 1\n" +
' $color-base = $components\n' +
' $color-invert = findColorInvert($color-base)\n' +
' $color-light = findLightColor($color-base)\n' +
' $color-dark = findDarkColor($color-base)\n' +
" else if listTypeofValuesValidator($components, 'rgba|hsla') and length($components) > 1\n" +
' $color-base = $components[0]\n' +
' // If Invert, Light and Dark are provided\n' +
' if length($components) > 3\n' +
' $color-invert = $components[1]\n' +
' $color-light = $components[2]\n' +
' $color-dark = $components[3]\n' +
' // If only Invert and Light are provided\n' +
' else if length($components) > 2\n' +
' $color-invert = $components[1]\n' +
' $color-light = $components[2]\n' +
' $color-dark = findDarkColor($color-base)\n' +
' // If only Invert is provided\n' +
' else\n' +
' $color-invert = $components[1]\n' +
' $color-light = findLightColor($color-base)\n' +
' $color-dark = findDarkColor($color-base)\n' +
'\n' +
' $value = {\n' +
" '1': $color-base,\n" +
" '2': $color-invert,\n" +
" '3': $color-light,\n" +
" '4': $color-dark\n" +
' }\n' +
'\n' +
' // We only want to merge the map if the color base is an actual color\n' +
" if match('\\b(rgba|hsla)\\b', typeof($color-base))\n" +
" // We merge this colors elements as map with Bulma's colors map\n" +
' // (we can override them this way, no multiple definition for the same name)\n' +
' // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))\n' +
' $merged-colors[$name] = $value\n' +
'\n' +
' return $merged-colors\n' +
'\n' +
'powerNumber($number, $exp)\n' +
' return $number ** $exp\n' +
'\n' +
'colorLuminance($color)\n' +
" $color-rgb = {'red': red($color),'green': green($color),'blue': blue($color)}\n" +
' for $name, $value in $color-rgb\n' +
' $adjusted = 0\n' +
' $value = $value / 255\n' +
' if $value < 0.03928\n' +
' $value = $value / 12.92\n' +
' else\n' +
' $value = ($value + .055) / 1.055\n' +
' $value = powerNumber($value, 2)\n' +
' $color-rgb[$name] = $value\n' +
" return (($color-rgb['red'] * .2126) + ($color-rgb['green'] * .7152) + ($color-rgb['blue'] * .0722))\n" +
'\n' +
'findColorInvert($color)\n' +
' if colorLuminance($color) > 0.55\n' +
' return rgba(#000, 0.7)\n' +
' else\n' +
' return #fff\n' +
'\n' +
'findLightColor($color)\n' +
" if typeof($color) == 'rgba' or typeof($color) == 'hsla'\n" +
' $l = 96%\n' +
' if lightness($color) > 96%\n' +
' $l = lightness($color)\n' +
' return lightness($color, $l)\n' +
' return $background\n' +
'\n' +
'findDarkColor($color)\n' +
" if typeof($color) == 'rgba' or typeof($color) == 'hsla'\n" +
' $base-l = 29%\n' +
' $luminance = colorLuminance($color)\n' +
' $luminance-delta = (0.53 - $luminance)\n' +
' $target-l = round($base-l + ($luminance-delta * 53))\n' +
' return lightness($color, max($base-l, $target-l))\n' +
' return $text-strong\n' +
'\n' +
'/* Bif replacements to match the behaviour of Sass */\n' +
'\n' +
'bulma-stylus-darken($color, $amount)\n' +
' return lightness($color, lightness($color) - $amount)\n' +
'\n' +
'bulma-stylus-lighten($color, $amount)\n' +
' return lightness($color, lightness($color) + $amount)\n' +
'\n' +
'bulma-stylus-saturate($color, $amount)\n' +
' return saturation($color, saturation($color) + $amount)\n'
},
isOperational: true,
fromStylus: true,
lineno: 8,
column: 5,
filename: 'F:/code/nodejs/hexo-theme-unit-test/node_modules/bulma-stylus/stylus/utilities/functions.styl',
stylusStack: '',
input: "listTypeofValuesValidator($list, $type= 'rgba|hsla')\n" +
' _void= 0;\n' +
' for v, i in $list\n' +
" if match('\\b(' + $type + ')\\b', typeof(v)) != null\n" +
' _void = _void + 1;\n' +
'\n' +
' if length($list) != _void\n' +
' error("Unexpected type inside the list.")\n' +
' return false;\n' +
'\n' +
' return true;\n' +
'\n' +
'mergeColorMaps($bulma-colors, $custom-colors)\n' +
" // We return at least Bulma's hard-coded colors\n" +
' $merged-colors = $bulma-colors\n' +
'\n' +
' // We want a map as input\n' +
" if typeof($custom-colors) == 'object'\n" +
' for $name, $components in $custom-colors\n' +
' // The color name should be a string\n' +
' // and the components either a single color\n' +
' // or a colors list with at least one element\n' +
" if typeof($name) == 'string' and (typeof($components) == 'ident' or listTypeofValuesValidator($components, 'rgba|hsla')) and length($components) >= 1\n" +
' $color-base = null\n' +
' $color-invert = null\n' +
' $color-light = null\n' +
' $color-dark = null\n' +
' $value = null\n' +
'\n' +
' // The param can either be a single color\n' +
' // or a list of 2 colors\n' +
" if listTypeofValuesValidator($components, 'rgba|hsla') and length($components) == 1\n" +
' $color-base = $components\n' +
' $color-invert = findColorInvert($color-base)\n' +
' $color-light = findLightColor($color-base)\n' +
' $color-dark = findDarkColor($color-base)\n' +
" else if listTypeofValuesValidator($components, 'rgba|hsla') and length($components) > 1\n" +
' $color-base = $components[0]\n' +
' // If Invert, Light and Dark are provided\n' +
' if length($components) > 3\n' +
' $color-invert = $components[1]\n' +
' $color-light = $components[2]\n' +
' $color-dark = $components[3]\n' +
' // If only Invert and Light are provided\n' +
' else if length($components) > 2\n' +
' $color-invert = $components[1]\n' +
' $color-light = $components[2]\n' +
' $color-dark = findDarkColor($color-base)\n' +
' // If only Invert is provided\n' +
' else\n' +
' $color-invert = $components[1]\n' +
' $color-light = findLightColor($color-base)\n' +
' $color-dark = findDarkColor($color-base)\n' +
'\n' +
' $value = {\n' +
" '1': $color-base,\n" +
" '2': $color-invert,\n" +
" '3': $color-light,\n" +
" '4': $color-dark\n" +
' }\n' +
'\n' +
' // We only want to merge the map if the color base is an actual color\n' +
" if match('\\b(rgba|hsla)\\b', typeof($color-base))\n" +
" // We merge this colors elements as map with Bulma's colors map\n" +
' // (we can override them this way, no multiple definition for the same name)\n' +
' // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))\n' +
' $merged-colors[$name] = $value\n' +
'\n' +
' return $merged-colors\n' +
'\n' +
'powerNumber($number, $exp)\n' +
' return $number ** $exp\n' +
'\n' +
'colorLuminance($color)\n' +
" $color-rgb = {'red': red($color),'green': green($color),'blue': blue($color)}\n" +
' for $name, $value in $color-rgb\n' +
' $adjusted = 0\n' +
' $value = $value / 255\n' +
' if $value < 0.03928\n' +
' $value = $value / 12.92\n' +
' else\n' +
' $value = ($value + .055) / 1.055\n' +
' $value = powerNumber($value, 2)\n' +
' $color-rgb[$name] = $value\n' +
" return (($color-rgb['red'] * .2126) + ($color-rgb['green'] * .7152) + ($color-rgb['blue'] * .0722))\n" +
'\n' +
'findColorInvert($color)\n' +
' if colorLuminance($color) > 0.55\n' +
' return rgba(#000, 0.7)\n' +
' else\n' +
' return #fff\n' +
'\n' +
'findLightColor($color)\n' +
" if typeof($color) == 'rgba' or typeof($color) == 'hsla'\n" +
' $l = 96%\n' +
' if lightness($color) > 96%\n' +
' $l = lightness($color)\n' +
' return lightness($color, $l)\n' +
' return $background\n' +
'\n' +
'findDarkColor($color)\n' +
" if typeof($color) == 'rgba' or typeof($color) == 'hsla'\n" +
' $base-l = 29%\n' +
' $luminance = colorLuminance($color)\n' +
' $luminance-delta = (0.53 - $luminance)\n' +
' $target-l = round($base-l + ($luminance-delta * 53))\n' +
' return lightness($color, max($base-l, $target-l))\n' +
' return $text-strong\n' +
'\n' +
'/* Bif replacements to match the behaviour of Sass */\n' +
'\n' +
'bulma-stylus-darken($color, $amount)\n' +
' return lightness($color, lightness($color) - $amount)\n' +
'\n' +
'bulma-stylus-lighten($color, $amount)\n' +
' return lightness($color, lightness($color) + $amount)\n' +
'\n' +
'bulma-stylus-saturate($color, $amount)\n' +
' return saturation($color, saturation($color) + $amount)\n'
}
} Asset render failed: %s css/default.css
In the previous runs I used [email protected]
and there were no errors. The current bulma-stylus
version I use is 0.9.2-rc.1
. So what happens?
Hi, I downloaded your repo, and great work transcribind the framework.
Though I am trying to compile your original repo with gulp and gulp-stylus under Windows, and i have the problem that output file, has several @charset "utf-8";
declaration through the file (7 in total). This means i have to go iside the css and delete them manually. Same thing happens with pure stylus CLI.
I think this is due to some multiple require
-ing in the stylus files.
Edit:
As I thought in every _all.styl
file you have as first line @charset "utf-8"
, this when merges the stylus in css generates multiple lines of that declarations in the output file. As soon as I can I am going to provide a pull request, but i think you can fix it faster than me :)
I found that Bulma.io team starts to import some common files into separate component and elements files. For example to button
. This allows these files to be imported individually into a user's project.
The problem is that if we use it with Stylus, we meets duplication of some virtual rules like $controls
spread around the resulting CSS file. I see, you didn't make these changes at all in the latest release. Perhaps due the problem.
I made a lifehack to prevent duplication and still allow to use files separately, with variables (name is generated randomly, to prevent any conflicts).
Example:
control.styl:
00: $_goSyMvit := true;
...
button.styl:
00: unless $_goSyMvit is defined and $_goSyMvit
01: @import "../utilities/controls"
02:
03: @import "../utilities/mixins"
...
The mergeColorMaps()
function does not work as it uses typeof($custom-colors) == 'map'
to detect whether the input custom color is a map. However, the return value of typeof($custom-colors)
will always be object
according to an old Stylus doc, hash/map's current implementation, and my own experiments:
Perhaps we should use length
or keys
to check whether the input is a list, or simply skip the check.
The hero.styl
file calculates colours for the gradient used in the background of the hero component. At the moment, these colours are subtly different between the two flavours of Bulma.
Colour | Stop | Original Bulma | Bulma Stylus | Match |
---|---|---|---|---|
white |
0% | #e6e6e6 |
#e8e3e3 |
❌ |
white |
100% | white |
#fff |
✅ |
black |
0% | black |
#000 |
✅ |
black |
100% | #181616 |
#181616 |
✅ |
light |
0% | #dfd8d9 |
#dfd8d8 |
❌ |
light |
100% | white |
#fff |
✅ |
dark |
0% | #1f191a |
#1f1a1a |
❌ |
dark |
100% | #46403f |
#463f3f |
❌ |
primary |
0% | #009e6c |
#009e6c |
✅ |
primary |
100% | #00e7eb |
#00e7eb |
❌ |
link |
0% | #1577c6 |
#1576c6 |
❌ |
link |
100% | #4366e5 |
#4266e5 |
❌ |
info |
0% | #159dc6 |
#159cc6 |
❌ |
info |
100% | #4389e5 |
#4289e5 |
❌ |
warning |
0% | #ffaf24 |
#ffae24 |
❌ |
warning |
100% | #fffa70 |
#fffa71 |
❌ |
danger |
0% | #fa0a62 |
#fa0a61 |
❌ |
danger |
100% | #f7595f |
#f7595f |
✅ |
Many of these discrepancies are off by only 1. This would suggest this is likely just a rounding error somewhere in the bowels of Stylus (or Sass).
As this does result in (imperceptibly) different colours, it does technically have an impact on the end user. However, as the differences are largely not visible to the human eye, not too much effort should be spent on fixing this.
The translation has fallen far behind of edge Bulma. Update the translation to the latest version.
The original Sass-based Bulma (mostly) uses named colours (such as white
, whitesmoke
, and black
). For consistency, Bulma Stylus should follow suit.
Currently, Stylus automatically renders with the shortest HEX representation possible (e.g. #fff
or #f5f5f5
).
This could theoretically be fixed in post with stylelint
enforcing the color-named
rule they already have. However, their experimental --fix
flag is not yet able to automatically convert to named colours. Once/if this functionality becomes available, this should be considered.
Until such time, there's little point in pursuing this, as the colours are identical, just represented differently.
Hi friend.
Any ETA on an update to 0.4.1?
Thanks again for your fork. 😍 it.
Hi everyone!
The function is not working for me, or maybe I am using it wrong, could you help me please?
$custom-colors = {
"primary": $primary findColorInvert($primary),
"secondary": $secondary findColorInvert($secondary),
"terceary": $terceary findColorInvert($terceary),
"anti-flash-white": $anti-flash-white findColorInvert($anti-flash-white),
"facebook": $facebook findColorInvert($facebook),
"twitter": $twitter findColorInvert($twitter),
"illuminating-emerald": $illuminating-emerald findColorInvert($illuminating-emerald),
"maastricht-blue": $maastricht-blue findColorInvert($maastricht-blue),
"eerie-black": $eerie-black findColorInvert($eerie-black),
"myrtle-green": $myrtle-green findColorInvert($myrtle-green),
"pearl": $pearl findColorInvert($pearl),
"tan": $tan findColorInvert($tan),
"rubine": $rubine findColorInvert($rubine),
"emerald": $emerald findColorInvert($emerald),
"ruby": $ruby findColorInvert($ruby),
"maya-blue": $maya-blue findColorInvert($maya-blue),
"magic-potion": $magic-potion findColorInvert($magic-potion),
"eucalyptus": $eucalyptus findColorInvert($eucalyptus),
"kepel": $kepe findColorInvert($kepel)
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.