sierra-library / sierra Goto Github PK

Hi, while browsing the home page of your library, I tried resizing a textarea and it actually reacted weirdly

So basically you can resize it both vertically and horizontally, and while vertical resizing is acting normally, horizontal resizing doesn't work as I thought it would: when you release the mouse, the textarea remains the same size ( so it's not overflowing its parent, good ), but the symbol in the bottom right of the textarea on which you click to resize actually stays where you left it

I tried puttin max-width: 100% on the .textarea textarea and it actually behaved like I think it should

Note: It's actually my first ever contribution outside my personal projects, sorry if I did it the wrong way.

This is such a great base. Foundation NEEDS it.

I'll love to play around sierra before link it to my project. Something like to have on your demo page.

Thanks!

Hey there!

I would argue it is not Penguin’s role to prefix the styles and this should be delayed to a third party library such as Autoprefixer. While I understand how having “all-in-one” is a good thing, Autoprefixer handles prefixing based on actual stats + configuration, which is better than hard-coded prefixes in a stylesheet.

If you want me to submit a PR to get rid of the prefixes, just ask. :)

Wondering if anyone knows of a lib out them implementing sierra-library in react or preact? Might build one if not.

This is a meaningless variable.

The library include has:

// Flexbox based grid. More info: https://github.com/kristoferjoseph/flexboxgrid
//@import 'scss/flexboxgrid';

// Twitter bootstrap's grid. More info: https://getbootstrap.com/examples/grid/
@import 'scss/bootstrapgrid';

Line 55 of testscss/src/_variables.scss: Invalid CSS after " 'primary'": expected ")", was ": ..."

I'm not familiar with SCSS so it's going to take me a little while to figure out how it works. A hello world application would be good for new users to help adoption.

The official site has .select select set with webkit- and moz-appearance: none not the src files found here on github.

Found on https://sierra-library.github.io/

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Githubs src/components/_forms.scss

Mightily

Originally posted by @GoogleZip in https://github.com/surfcodes/surf/issues/32

Hi!
When you do a transition on button hover, this listen only the background-color, if you add (or replace background property) opacity can see that the transition it's more clean.

I don’t think it is the responsibility of the ellipsis mixin to set the display property, as it is somehow unrelated. I would remove it from the mixin, which has the positive side of making the mixin argument-less.

Hi,

Fontawesome is missing in your repository. Could you add it by default?

Origin

I recently built my own website, which uses Sierra Library.

Issue

1. Since Sierra Library is Licensed under GPL-2.0, copyright notices have to be applied, but no unambiguous license and copyright notice was present in any file header
2. It is not clear, whether the GPL-2.0 variant GPL-2.0-only, or GPL-2.0-or-later is intended

Solution

1. Add a license and copyright notice the the main source file (like src/index.scss)
2. Add the intended license code to the license name for clarification

Every component seems to have its own colour name, especially Buttons, they seem to have a completely different color naming scheme ?? Wondering why with is?

Im trying to implement this ui into a react lib but this is making things complicated.

Wondering for 3.0 if we can have a constant colour, size scheme through out the lib ??

If you look at the demo page, Outlined and Transparent buttons have an issue if you click (focus) and move your mouse off the button element the text becomes invisible. Something to do with hover i guess ?

This means there is no difference with or without fullWidth.

This might also be an issue for textarea? Or is this intended ?

Please put in the documentation that Font Awesome is a requirement where applicable.

Hi. Not sure what is going on with the ampersand selector here: https://github.com/Penguin-Library/penguin/blob/master/src/scss/_mixins.scss#L167-L168. :)

"Horitzontal" -> "Horizontal"
Affects source code and github site

Hi,

the textarea class font color, which should be $text-body, is overridden by the user stylesheet. 🤷‍♂️

This screenshot is from your demo site:

Tested in latest Chrome & Safari (Mac).

The breakpoint mixin could be made a bit more automatic and elegant like this. :)

Improvements:

• Query-agnostic (to allow min-height and max-height queries for instance)
• Emit a warning when using an unknown breakpoint
• Less repetitive code

@mixin breakpoint($breakpoint, $query: 'min-width') {
  $breakpoints: (
    'bp-small': $screen-xs-min,
    'bp-medium': $screen-sm-min,
    'bp-large': $screen-md-min,
    'bp-huge': $screen-lg-min,
  );

  @if map-has-key($breakpoints, $breakpoint) {
    @media (#{$query}: map-get($breakpoints, $breakpoint)) { @content; }
  } @else {
    @warn 'No breakpoint found for `#{$breakpoint}`. Allowed values are: #{map-keys($breakpoints)}.';
  }
}

<sup> elements look just like other text elements due to sharing the same font-size and vertical-align, and this could present accessibility issues.
I found it necessary to override Sierra with the following:

sup
  vertical-align: super
  font-size: 0.8rem

Config:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1300px
);

Mixin call:

.bla{
  @include media-breakpoint-down(xl){
    display:none;
  }
}

CSS output:

.bla{
  display:none;
}

Mixin/Debugging:

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @debug("===========");
  @debug($name);  // ==> xl
  @debug($max); // ==> null
  @debug("===========");
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

This is because the breakpoint-max function ...

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}

... is (also) designed for the media-breakpoint-between mixin. So, the media-breakpoint-down mixin needs to address this.

Possible fix:

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    // Largest (last) breakpoint
    @media (max-width: (map-get($grid-breakpoints, $name) - 1px)) {
      @content;
    }
  }
}

Thoughts?

Awesome lib, looks great.

Only thing I'm not keen on is the fact that "dropdowns", for example on the menus are the default browser select options. Anything that can be done/made?

I have been relying on sierra-ui since around 2017, and I have noticed that updates stopped back in 2019. This makes me wonder - is the project abandoned? If so, could you please refer me to an alternative?

Thank you.

P.S There is a similar issue already closed, but it is way older.

If someone wants to use Bower to install Sierra, and then use bower_components\sierra\src as a location to look for items being imported they'd have to use the generic @import "entry" which is not very descriptive and would lend itself to importing in the wrong file from a different directory.

entry.scss should be renamed to sierra-entry.scss or something similarly namespaced.

See how the following mixin libraries follow this same pattern:

Since this may be a breaking change for those who explicitly targeted bower_components\sierra\src\entry.scss you should include a major version bump from v1.1.4 to v2.0.0.

Text input cursor is showing above the line when focus due to line height in Safari (latest) browser.

.header-nav should have overflow-x: auto instead of scroll
the first thing one sees when entering the http://sierra-library.github.io website is an ugly scrollbar :D

Hi,

I thinks that it would be great if you included global variables with !default flags so they can be easily overwritter in custom .scss files.

And thanks for awesome work!

Thinking as a Version 2, I'll BEMify the sass to be just another supporter of the SASS movement.. What you guys thinking? Think it'll leave even a lower footprint..

There's a warning when I compile, which isn't an issue but can easily be resolved to remove that warning. For the badges, the compiler doesn't like how the key gray in _variables.scss is being interpolated. An easy fix is to simply scroll down to $badges-color-map and rename gray to something else, such as light. Then of course we'll have to begin using that new class (badge-light) if we want to use that grey badge.

The warning is bringing attention to the fact that the color may be converted to another value such as hex, but in this case, I don't believe that will happen since we're just grabbing a key name in _badges.scss.

Is it possible to display radiobuttons and checkboxes horizontally?

I including in app.jsx by import "sierral-ibrary"
but getting error :

ERROR in ./node_modules/sierra-library/dist/sierra.min.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

I apologize if this is a fairly neophyte question. But it's hard to keep up with speed at which CSS stuff moves. What is the decision for only using class names for styling and not element names?

For instance, <h2>Heading</h2> will not be styled while <h2 class="text-big">Heading</h2> will be.

I attempted to use Sierra on jekyll and can't due to this constraint.

I have noticed a small issue: when clicking right on the blue arrow (the pointer of the mouse has to be right above the blue part) on a select element, the drop-down list is not shown. The issue observed in both Chrome and Firefox browsers.

Is black, should be white.
And padding is missing.
And background:focus highlight:

My change in _forms.scss:

// textarea
.textarea {
  background-color: $form-bg-color;
  padding: 0;
  width: 100%;
  color: $form-text-color;
  padding: 10px 15px;

  textarea {
    background: transparent;
    border: 0;
    display: block; // prevent small margin at the bottom of textarea
    font-family: $basefont;
    width: 100%;
  }
    &:focus,
    &:active {
      outline: none;
      background-color: lighten($form-bg-color, 5%);
    }
}

And please change "Klingon search" to "Ferengi find"

hello there, just wanted to ask if there will be any updates to the library or the project is dead?

Trying to compile with sassc (node-sass should be the same) yields:

Error: Import directives may not be used within control directives or mixins.
        on line 28 of sierra/src/_sierra.scss
>>   @import 'scss/flexboxgrid';
   --^

@import inside @if statements are apparently not really supported by sass, they just happen to work with the ruby compiler.

what's the variable for the form element's placeholder text?

what's the recommended script for form validation that can be hooked to the form element's states?

I find it very weird with the classes for container sizes

There's three classes for the container:
.container
.container-small
.container-xs

I think it should be consistent with the naming, so it's easier to remember and use.
The current 3 classes is confusing, in the way that two of them have the same "size", small. One is even smaller than small - Does it make sense?

I recommend using these classes instead, for easy use and consistent naming:
.container
.container-medium - equivalent to .container-small
.container-small - equivalent to .container-xs

Also, I find it weird that there isn't SCSS/SASS variables for all the container sizes.

Due to using DART-SASS instead of NODE-SASS, I am getting DEPRACATION warnings;
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. on all the areas of Sierra that using / to work stuff out, any chance this could be addressed?