groenroos / bulma-stylus Goto Github PK

View Code? Open in Web Editor NEW

30.0 30.0 7.0 659 KB

A Stylus translation of a modern CSS framework based on Flexbox

License: MIT License

Stylus 35.36% CSS 64.64%

bulma css css-framework design flexbox html stylus

bulma-stylus's People

Contributors

Stargazers

Watchers

Forkers

kk9599 atrumsaurus kumorig m-o-z-g laggingreflex thecodechef aiclouds merept

bulma-stylus's Issues

Thanks!

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.

Unnecessary vendor prefixing

autoprefixer adds numerous vendor prefixed lines that are not present in the original Sass-based Bulma.

Each transform* gets a -webkit-transform* line above it
Each flex* gets a -webkit-box-flex line above it
Each justify-content gets a -webkit-box-pack line above it
Each align-items gets a -webkit-box-align line above it
Each display: flex* gets a display: -webkit-* line above it

It'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).

Unexpected type inside the list

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 :)

Import shared styl files to import individual components.

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"
...

mergeColorMaps() does not work

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.

Subtly different colours for the hero component

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.

Update to 0.7.1

The translation has fallen far behind of edge Bulma. Update the translation to the latest version.

Named colours should be used

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.

Update to 0.4.1

Hi friend.

Any ETA on an update to 0.4.1?

Thanks again for your fork. 😍 it.

the mergeColorMaps function is not working

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)
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.