search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.33k stars 809 forks source link

Javascript Library and other suggestions #24

Open geoffdavis92 opened 8 years ago

geoffdavis92 commented 8 years ago

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:

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

picturepan2 commented 8 years ago

Thank you. I haven't any plan on JS library for .menu, .modal or .toast.

  1. I will see if more people need Sass version.
  2. Updated this week. Now Spectre provides .col-xs-, col-sm-, col-md-.
  3. Sure.

Thank you. šŸ˜„

geoffdavis92 commented 8 years ago

@picturepan2 I cleaned up and updated the javascript that I previously wrote. Still could use some work, but this will give you some idea of what I was shooting for. Here is the link.

I have 3 files so far, one for menus, modals, and toasts each; technically there could be 4, as I added support for an arrow pseudo element that could switch orientation on click, but I don't know if you wanted that in the project.

Like I said, these are kind of rough, and only use ES6/vanilla JS. If you like the idea, I can optimize these and write more .js files.

Edit: worth noting that at the moment these are a combined 24kb, uncompressed.

picturepan2 commented 8 years ago

Thank you. I think I will wait and see if other people need JS example codes, maybe just jQuery or Angular examples. Firstly, I need to perfect basic CSS codes.

victorwpbastos commented 8 years ago

First, thanks for this amazing project. So simple, clean and powerful! Second, would be great to have a Sass variant (scss).

picturepan2 commented 8 years ago

@victorwpbastos May I know why you want Sass variant?

geoffdavis92 commented 8 years ago

@picturepan2 The reason I suggested it originally is because not every one uses LESS, which is fine, and some people would like to compile it during development with custom variable settings.

victorwpbastos commented 8 years ago

Sass is just a personal preference. Many CSS frameworks are using Sass instead Less. But I repeat: is just a personal preference.

picturepan2 commented 8 years ago

Thank you both. Do you know tools to keep Less and Sass coexist and synced?

victorwpbastos commented 8 years ago

Maybe maintain the two flavors (Less and Sass) won't be a good idea. If you like Less keep Less. No problem.

picturepan2 commented 8 years ago

OK. I will keep Less. I will read more about Sass to see if Spectre.css needs a switch.

sudheerDev commented 8 years ago

@picturepan2 sass would be an important port! any reason for less implementation?

kelkes commented 8 years ago

SASS version would be great.

chekun commented 8 years ago

SASS version +1

fabiocaccamo commented 8 years ago

Generally I use Foundation or Bootstrap, and there is a Foundation feature that nobody offers, it's list-block-grid support. In few words if you have an inline list (for example a list of cards) you can specify how many elements display for each row without breaking the list at dom level.

ignishub commented 8 years ago

No. I dont think SASS version make situation more better. It make things worse! Support two versions is harder. And its make more time to review pull requests and and test everything

jakobrosenberg commented 8 years ago

I have seen a lot of projects move from less to sass, but never from sass to less.

Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.

To me it's a bit like underscore vs lodash.

geoffdavis92 commented 8 years ago

@IgnisFire I don't think anyone is suggesting @picturepan2 should support 2 different versions, at least not concurrently. If he were to offer a Sass port and did not want to maintain both, he could release stable Sass versions at major framework versions.

I see the benefit from moving away from LESS to Sass, as @jakobrosenberg pointed out, Sass is faster, and offers (AFAIK) more options for compiling in a variety of languages, including node.js, ruby, python, and more.

On top of this is that a majority of development blogs/articles/developers I'm aware of use Sass to compile their styles into CSS. All these benefits point to Sass being a better pre-compiled language to use for customizing Spectre.css.

picturepan2 commented 8 years ago

@All, I plan to switch to Sass and release a stable version of Less. Thank you.

dak0rn commented 8 years ago

I like the idea of @geoffdavis92 to add JavaScript and I even more like the idea of not using dependencies. However, I looked at the code I'd really recommend not to touch prototypes as it is considered to be (very) bad practice.

Adding some kind of simple bundler (e.g. Rollup) could be useful to provide some kind of internal structuring without the hassle of using a sophisticated build chain.

AdsonCicilioti commented 8 years ago

Sass!! Sounds good!!

geoffdavis92 commented 8 years ago

@dak0rn Yeah I only added that because I somehow forgot about Array.forEach, and was too lazy to look it up.

Sometime soon I'm going to generally clean up the scripts and I'll remove my prototype edit.

dak0rn commented 8 years ago

@geoffdavis92 just wanted to mention it.

I hope a possible JavaScript part is not going to target non-ES5.1 environments like the Internet Explorer 8, because that would introduce quite a nasty limitation.

ghost commented 8 years ago

I think it's best to leave Javascript out of the picture and for Spectre to remain a focused CSS / Design library while encouraging JS component libraries to be built on top of the framework. Salesforce's design system is a good example of how to go about this. https://www.lightningdesignsystem.com/

sultaniman commented 8 years ago

Spectre is really simple and I support the idea of keeping Sectre CSS only as well because it is easy to add any existing JS plugin on top of the layout. And supporting SASS would be "just what doctor ordered".

geoffdavis92 commented 8 years ago

@imanhodjaev That's what I'm feeling is the consensus.

I'll likely release my library as a "plugin", after cleaning it up and building it out a bit. Not sure how I could brand it, but that's a topic for another time šŸ˜„

AdsonCicilioti commented 8 years ago

I confess that I just did not begin to use the Spectre because it is not in Sass. It would be great to work with Spectre in Sass.

Fantasterei commented 8 years ago

Converting the less-code to sass cost me 5 minutes. You only need to replace the @-sign for variables with the $-sign and add mixins+include instead of the classes which are used for global usage of styleheets. It can't be easier...

larsbo commented 7 years ago

what about the js modules idea? I think it would be a nice benefit if you can add optional "official" spectre js modules to the page to extend the css functionality of individual elements/components.

IlBaffo commented 7 years ago

Please don't make JS an integral part of this framework: I choose it over bootstrap/foundation specifically because it was pure CSS only.

I thinks it is ok to make optional scripts for simple interactions (like a jquery plugin or some vanilla code) and like a reference for implementation but, since Js is so opinionated, writing any kind of code will probably lead to a dozen of variants (react, angular, angular2, kendo,....) with many build systems integrations and feature requests. I think that this is out of scope for a lightweight library like this and, if forced to reference a Js to use the components, I will just stop updating it and fork it locally.

Just my two cents.

geoffdavis92 commented 7 years ago

@IlBaffo I agree.

I'm currently writing a standalone Javascript library using vanilla js to interact with various spectre.css components.

I finished writing a preliminary version of handling .tab.tab-group last night, will push up in a few hours.

I like spectre for the same reasons you do, but if I can write a simple js library to interact with spectre, I think that'd be helpful to a lot of folks. Not everyone has the time/patience/skill to roll their own.

Again, this will be completely optional and unofficial.

(I've extended an offer to @picturepan2 to house everything under an org like #50 suggests, but it's entirely up to him. Even still this would just be a completely optional library)

EDIT: added some emphasis

aaron-bond commented 7 years ago

@geoffdavis92 I have to +1 the notion of keeping JS out of the equation. Keeping it CSS only means that it can be integrated with any framework you want without much issue. At the minute, I'm demoing dropping it into Angular 2 and it works a treat (tabs handled via bindings)

EDIT: I wanted to add... I have been tinkering with the library and adding things I think are cool. I've been using Google Material Icons to get a nicer checkbox and radio button in my UI, without having to modify the HTML markup. Here's a simple example: https://jsfiddle.net/e8dhLhyn/75/

Let me know if anyone would like to see these in a PR to the codebase, or if any other contributions would be welcome.

gofabian commented 7 years ago

For me one of the reasons to choose spectre was that it is CSS only. I use bootstrap in another project. The javascript part modifies the HTML elements so that customizing the boostrap elements is not fun. Please don't add JS support.

green3g commented 7 years ago

There's already several different javascript implementations that I know of. (vue, can, vanilla etc) Would it be helpful for anyone to have a page in the docs or somewhere called "JS implementations" with links to the projects?

aaron-bond commented 7 years ago

I'd contribute to that

faststare commented 7 years ago

spectre css logo for attribution link? and where I can find a collaboration partner(who used to be a spectre css hobbyist for a open source project)?

aaron-bond commented 7 years ago

@faststare what's the project?

faststare commented 7 years ago

@aaron-bond an accounting web app that have philippine government features(taxation handling and gocc handling).

subodhpareek18 commented 7 years ago

I think it'll be a great idea to create a react.spectre much like how a react.semantic-ui exists. @geoffdavis92 the library you're creating, does that provide any sort of react components, or is it to be used outside react.

picturepan2 commented 7 years ago

@faststare You need a Spectre.css logo in which sizes?

green3g commented 7 years ago

Is there a logo? I'd put one on my project site also.

AdsonCicilioti commented 7 years ago

@zusamann React is future.. Or better.. Is Present.. Maybe a good moving idea in this regard.

tunecino commented 7 years ago

@zusamann @AdsonCicilioti me, probably like @IlBaffo and many others have chosen this framework because of 2 main great features:

  1. It is Lightweight (~10KB gzipped)
  2. It has no integral JS

Those 2 facts make it unique, special and different from most of what you can find out there. It is not one more framework trying to do all the work or providing whatever feature you may need like if it was some kind of software a browser need to download on each visit. It is fast because it is simple. Please if you need a Javascript Library for it consider making a fork and adding that to a different repo.

tunecino commented 7 years ago

Again, this will be completely optional and unofficial.

Oh sorry I didn't see that. In that case I 100% agree :)

burn2delete commented 7 years ago

Could I also suggest a sticker board, or something like sketchapp.com for designers.

picturepan2 commented 7 years ago

@flyboarder What is a sticker board?

burn2delete commented 7 years ago

Usually a collection of the components for prototyping.

https://material.io/guidelines/resources/sticker-sheets-icons.html

picturepan2 commented 7 years ago

@geoffdavis92 v0.4.0 is in SASS/SCSS now.