beg-in / frow Goto Github PK

Please check the issue with sass compile error while customizing feature set of Frow.

`Error: Invalid CSS after "...rgin-left: math": expected expression (e.g. 1px, bold), was ".div(-$grid-gutter-"
on line 38 of Users/mdnazmul/Downloads/frow-4.0.0/src/_grid.sass
from line 13 of sass/Users/mdnazmul/Downloads/frow-4.0.0/frow.sass

  margin-left: math.div(-$grid-gutter-width, 2);`

Hope the screenshot will make more sense.

Some utility classes such as .opacity-100 would seemingly almost always benefit from a transition being added to it. transition: opacity $animate-speed.

The problems occur with the fact that transitions don't add to each other but instead overrule the past rules:

transition: opacity 1s;
transition: transform 1s;

is not equivalent to
transition: opacity 1s, transform 1s;

Should a transition be automatically be added to certain utility classes like ,opacity-100, .opacity-0, and .rotate-180? Or perhaps there are transition utility classes like .transition-opacity?

The current gutter system is awkward and depends on .frow-container in some situations to avoid the negative margins from colliding with other page margins. .frow-container should be removed the equation completely.

Perhaps a new set-up would be something like:

<div class="gutters>
  <div class="frow">
    <div class="col-md-1-2></div>
    <div class="col-md-1-2></div>
  </div>
</div>

The negative margins would be applied directly to .gutters. Is this better? Does it solve the problem?

While .text-bold seems like an obvious addition after adding .text-italic in Frow 3.3, there's actually a bit more complexity there with how to handle what the class should do.

Is the correct default behavior to add font-weight: bold, or is it font-weight: bolder. Should .text-bolder and .text-lighter exist?

I did not create .text-oblique when including .text-italic as I didn't see the need. The bold classes need the same evaluation.

Have form elements that are :read-only match :disabled styling.

Create a variable for the label color, have it default to form-secondary-color for fall back.

The Getting Started section of the docs lists an example start to creating a new .html file, but I think there could be some improvements to what meta tags are recommended. Should the default still allow pinch zooming on mobile?

@media (min-width: $screen-sm-max: ($screen-md-min - 1) !default;
$screen-xs-max: ($screen-sm-min - 1) !default;)

would set up for something a little easier to read, such as when making a media query:

/* SM */
@media (min-width: $screen-sm-min) and ($screen-sm-max)

Same could end up going for CSS variables

The default :focus is a blue outline. How can this be improved to better match Frow?

Firstly, is .frow-container the best name? It got the name from back when Frow and Bootstrap were most identical, and was to just differentiate between Bootstrap's `.container' and Frow's. Now it's mostly used to make whole pages not go too wide. Can we perhaps rename this, and provide more options. Sometimes it's too wide or too skinny. Frow's own documentation website found it too wide, but other projects have found it too skinny. Perhaps some type of "-lg" "-sm" system?

@import 'frow' isn't working.

.button-none should have text-align: left
.button-none should have no :hover styling
.button-none should be .button-unstyled or something clearer?

And any other similar changes.

.link-none would be created to not show underline on :hover and etc. Handy for when an anchor tag is wrapping something like a button.

At some point in the past a

.frow > * {
  max-width: 100%;
}

was added. Is this still the best idea moving forward? What did this solve?

https://www.w3.org/TR/css-flexbox-1/#min-size-auto
https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout

.frow {
  min-width: 0; // fixes whitespace: nowrap
}

It would be awesome if the Sass variables were automatically converted to CSS3 variables on build.

Being able to change the $text-color/var(--text-color) even when not using Sass would be so cool.

Just a note to investigate if this anchor philosophy would be more concise vs doing the typical :hover, :active, :focus rules.

a {
  color: #fff;
}

a:not(:hover) {
  text-decoration: none;
}

Personally I'm finding myself using .nowrap more and more frequently. As CSS Grid eats away at the old .col- systems, and Frow's (awesome) existing .shrink-0 and .grow-1 classes make working with nowrap more common, I'm debating making it the default.

This would require the .col- system to be altered, as the user would have to add the .wrap class to the containing.frow. Perhaps add a new rule to enable the use of columns?

I would like the ability to use just the Grids portion of the frow framework and not the other modules. I have a project that requires 24 columns and your framework handles this nicely.

Is this possible? Thank you very much!

This is a recurring class I've made custom at the global level in projects, can something like this be added into Frow without too much bloat?

Hi,

I'm having this problem when using webpacks sass-loader and loading the package with a simple @import 'node_modules/frow/frow'; in my welcome.scss file.

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/welcome.scss
Module build failed: 
  =visible-classes($size)
        ^
      Mixins may not be defined within control directives or other mixins.
      in /home/welcome-gui/node_modules/frow/src/_responsive-utilities.sass (line 43, column 10)

How is that possible? Thanks for your help.

I'm not sure the display attribute for the SVG element should be block, as is set in _scaffolding.sass. As it is, it breaks the inline uses of svg, for example those resulting from MathJax rendering of math formulas. This problem can be fixed by overriding the attribute after loading frow, but I don't think it's ideal.

Thanks for the excellent framework.

A lot of my projects end up having the same animations added to them. pop-in, fade-in, etc. Should they become a part of Frow (disable-able with a Sass variable of course)?

The classes would be able to be utilized as both calling animation: fade-in 1s as well as having quick reusable classes like .fade-in which would use the $animate-speed.

Add support for the + icon in Chrome's URL bar to allow the docs to be installed as an offline PWA. Similar to how Gatsby's docs allow for this.

Will possibly also need icons made up?

Setting the <input type="range"> to appearance: slider-vertical creates a styling issue due to Frow's custom styling.

Consider adding the [visibility] attribute global rules from the collab.tools project directly into Frow as a feature.

https://css-tricks.com/the-focus-visible-trick/

Add in some type of system for quickly rotating elements.

Examples:

.rotate-180 {
  transform: rotate(180deg);
}

.rotate--90 {
  transform: rotate(-90deg);
}