picturepan2 / spectre Goto Github PK

Here is screenshot with the issue - the layout goes out of the Safari's window:

I wish to change tab control to put a close button.

Is this easy?

You can update the NPM module to version 0.1.5.

Example: http://codepen.io/anon/pen/VjLGLP

Hi,

Considering how very much Spectre looks like Bootstrap, both from a visual perspective and also naming convention, it would be good to have some info on what the actual difference is between them.

I understand Spectre is smaller, but what else? My thinking is that Bootstrap is bigger for a reason, but why..? Do they support older browsers, or what's the reason?

See example:

1. Icon
   
2. Loading icon
   

First off, love the framework! Really great, clean design, implements many common components flawlessly, yet is incredibly tiny. (filesize-wise)

Do you have any plans for writing a JS library for interactions with various components, eg .menu, .modal, and .toast? If you haven't or have but have not implemented it yet, I have a few files for said components that could provide a jumping-off point for writing these JS interactions; they're simple, curt, and use vanilla JS.

Other suggestions:

• Include Sass port (this may be able to be done by simply changing all @variable instances to $variable, but I may be mistaken)
• I resized my window after happily sketching a site in Spectre for a few hours, and I noticed that it's not very responsive relative to the numerical value of column sizes. (ie column widths do not scale consistently with screen size adjustments) This image shows that the .col-8 class, along with apparently all other .col-x classes simply default to 50% between 481px and 840px. There may have been a reason for this, but I am not picking up on it.
• Design an adorable/menacing spectre logo for the framework!

I am more than willing to help with any of the above, and will likely be throwing some PRs your way.

Can you please think about deleting or replace this behavior to another class this states of many elements. Many elements such tabs or buttons on click must only do what they need to do, but they after clicking stayed focused. On tabs this behavior reminds active tab and user will be confused. Buttons confusing because they looks like they lagged or something like that

Sorry for my bad english

These may be not intended:

Would be great if form controls (inputs, selects, switches and input groups) could have size classes like buttons has.

Hi,

Currently you can change input sizes with .input-sm/.input-lg, but there is no equivalent for switch/checkbox/radio buttons.
These elements should be able to be resized.

Nice job by the way and thanks for the framework.

Currently there is are no instructions how to transpile Less to CSS.
I suggest using a build task runner like NPM, Gulp or Grunt.

If done so, it might be helpful, to add some information to readme.md

You should try this for spectre tables.

https://css-tricks.com/molten-leading-css/

Hi,

is there a plan to change 'input type file' look? It's a bit delicate problem, heck I can't make it properly, but defaults are just soooo ugly.

Thank you

Hi,
Can you implement this methodology in spectre-css

https://en.bem.info/methodology/
https://css-tricks.com/bem-101/

It would be cool to have an option for floating labels on text input boxes, similar to material design.

I tried using a Input group inside a Empty state, but the button loses alignment with the input.

<div class="empty">
    <p class="empty-title">You have no new messages</p>
    <p class="empty-meta">Click the button to start a conversation.</p>
    <div class="input-group">
        <span class="input-group-addon">slack.com/</span>
        <input type="text" class="form-input" placeholder="site name" />
        <button class="btn btn-primary input-group-btn">Submit</button>
    </div>
</div>

Thanks in advance, good mini-framework!

P.D. View image for a better idea.

Currently, when the hover effect in place on disabled buttons, its a little bit confusing and not so intuitive (IMHO) that the button is disabled.

spectre is Easily one of the most robust CSS frameworks I've seen. 😄

vue-spectre components built with Vue.js
examples

Hi Yan Zhu, firstly, thanks for your great work on this CSS framework! 👍

I noticed that there is no formal method adopted yet to show menu-item state as disabled. Are there any plans to add support for this?

Sorting CSS properties by alphabet will reduce the file size when gzipped:

http://peteschuster.com/2014/12/reduce-file-size-css-sorting/

Use the initals if the picture is not yet loaded or unavailable.
Example code:

<figure class="avatar" data-initial="YZ" style="background-color: #5764c6;">
    <img src="https://gravatar.com/avatar/d36a92237c75c5337c17b60d90686bf9?size=32"/>
</figure>

0002-Initials-as-fallback-avatar.patch.txt

It's a feature or bug?

If I'd like to display the tooltip on a disabled button, how to do?
Thank you.
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" disabled>top tooltip</button>

Hi There,

Is there a reason why a form-select does not have a font-size and form-input does? This way when you set a font-size in the body {} through CSS, the select font-size changes to the one defined in the body and the input element doesn't.

Thanks.

button.btn.btn-primary is not identifiably focused

Could you explain which branch is what and where we should checkin out contributions?

I assume master is the latest, but some stuff is missing e.g. navbar.

On tabs badges looks awful :

I know that badges on tab isn't good idea, but it will be nice if you add that feature, becouse its very beautiful way to show user new content in tab

See example:

Replace blockquote-source class with cite tag.

before:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <span class="blockquote-source">- Source</span>
</blockquote>

after:

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <cite>- Source</cite>
</blockquote>

You could also replace - in cite tag with:

cite::before {
  content: '-';
}

In my opinion it is more of a stylistic symbol than content.

Modal is hidden, even it has an 'active' className.
Force show it by using jQuery show.It displays, but not have the same style in iOS9.

Does spectre test the compatible in iOS8 mobile safari?

试了下，貌似是字体太小导致中间的按钮边框没有和边上的按钮边框完美重叠

Is it possible to have columns that wrap to the next line. This would be useful to show a list of cards.

Examples
http://foundation.zurb.com/sites/docs/grid.html#block-grids
http://v4-alpha.getbootstrap.com/layout/grid/#example-column-wrapping

It would be useful to have separate toasts for success and errors

Hi,

can I choose col- depending on screen size like in Bootstrap or Foundation ?

I don't want the same % of width on mobile and desktop.

At the moment, there seems to be no support for a disabled button.
All the button skins currently have a hover/click effect even if disabled, so it's impossible to get a pseudo-disabled skin with what's available.

how to show fullscreen / large modal ?

Congrats on the attention today! Easily one of the most robust CSS frameworks I've seen. Perhaps it's a good idea to create a GitHub organization for it?

Navbar is not responsive on mobile screen

.empty {
  background: #f8f8f8;
}

or maybe make it a variable?

Hello! in a plain html set the navbar looks totally destroyed:

http://codepen.io/anon/pen/ZOJGPK

https://github.com/picturepan2/spectre/blob/master/src/forms.less#L113

// Form element: Checkbox and radio
.form-checkbox,
.form-radio,
.form-switch {
  input {
    display: none;
  }
}

Setting display: none on input fields is an accessibility bad practice. Anybody who uses your framework will automatically be excluding a group of disabled users from using their site effectively. As framework developers, you need to get this right.

Hi, is there currently a way to offset, or center columns?

.columns {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
}

Shouldn't it be .column .columns for those negative margins ?

Negative margins got me an undesired horizontal scroll :/

Does the menus fit for dropdown?

Tried these in chrome and firefox browsers

<i class="icon icon-menu"></i> <span class="icon icon-favorite_border"></span>

Is in possible to setup tooltip appearing delay? Say 3sec?

from zero to varies width

Instead of adding position classes, I think we can control the tooltip position using CSS only.

data-pos="left"
data-pos="right"
data-pos="bottom"

<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-pos="bottom">top tooltip</button>

tooltip.txt