angeal185 / bootstrap-4-stylus Goto Github PK

I couldn't find which version of Bootstrap this is based on.

Having a look on the resulting bootstrap.css and comparing that to the more than 10000 lines of the current Bootstrap 4.3.1, after expanding it via the Sublime CSS Formater plugin, the 7760 lines of the resulting CSS from Boostrap 4 Stylus seem way off from that and also classes like order-first are missing.

So I assume this is still based on Bootstrap 3? 🤔

Hi, i saw the code, and i think, it's better if we use nib, what do you think about that? i think it's better because we can write only one line and nib automatically add the prefix

The flex keyword causes a problem, error message is:
argument "arg3" required for flex(arg1, arg2, arg3)

This is the offending code, that works with regular bootstrap

  .proyecto-info-img
    display block !important
    flex none !important

The error occurs even if $flex-include is set to false

I don't see this being an exact port of the bootstrap 4 sass version. Naming convention is a bit off, but not all the stylus files are in.

Missing the navbar.styl and the grid.styl, etc

Lines

• bootstrap-4-stylus/includes/carousel.styl

  Lines 87 to 88 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg xmlns='http //www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")

• bootstrap-4-stylus/includes/carousel.styl

  Lines 91 to 92 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg xmlns='http //www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")

• bootstrap-4-stylus/includes/custom.styl

  Lines 53 to 54 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg xmlns='http //www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")

• bootstrap-4-stylus/includes/custom.styl

  Lines 58 to 59 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg xmlns='http //www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")

• bootstrap-4-stylus/includes/custom.styl

  Lines 67 to 68 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg xmlns='http //www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")

• bootstrap-4-stylus/includes/custom.styl

  Lines 88 to 89 in 052d6c6

  	background $white url("data:image/svg+xml
  	charset=utf8,%3Csvg xmlns='http //www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center

• bootstrap-4-stylus/includes/nav.styl

  Lines 334 to 335 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http //www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")

• bootstrap-4-stylus/includes/nav.styl

  Lines 363 to 364 in 052d6c6

  	background-image url("data:image/svg+xml
  	charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http //www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")

How I import

@import 'bootstrap-4-stylus/includes/*.styl'

My temporary solution

@import 'bootstrap-4-stylus/includes/!(carousel|custom|nav)*.styl'

lines 334 and 362 of /includes/nav.styl have incorrect strings for the hamburger icon svgs

(is) data:image/svg+xml
(should be) data:image/svg+xml;
The difference? semicolon after xml

(is) xmlns='http //www.w3.org/2000/svg
(should be) xmlns='http://www.w3.org/2000/svg
The difference? colon between http and //

Equal-width did not work.
I think flex-grow should be 1 instead of 0.

col.styl

col()
  .col{arguments}
      -ms-flex 0 0 auto
      flex 0 0 auto
      width auto
      max-width none

->

col()
  .col{arguments}
      -ms-flex 1 0 auto
      flex 1 0 auto
      width auto
      max-width none

Currently breakpoints are all hard-coded into files (see container.styl). Having separate breakpoint variables (like Bootstrap does) would make this library more extensible.

(Thanks for putting the work in to convert this, by the way!)