Skip to content

Add ux-foundation, sass, postcss and image optimization to webpack#23

Open
arzafran wants to merge 2 commits intomasterfrom
ux-foundation
Open

Add ux-foundation, sass, postcss and image optimization to webpack#23
arzafran wants to merge 2 commits intomasterfrom
ux-foundation

Conversation

@arzafran
Copy link
Copy Markdown
Contributor

@arzafran arzafran commented Mar 27, 2017

Background

UX folder structure was being imported from MSUXF but was copied in a weird way from node modules folder and it wasn't compliant with react's way of doing things, based in web components

Changes done

  • Add sass-loader
  • Add postcss-loader
  • Add img-loder for image optimization
  • Add ux folder structure for global styles
  • Add webfonts-loader to generate iconfonts from svg
  • Clean Sass file structure to be component compliant ish
  • Remove Bootstrap
  • Remove Formsy
  • Add Input component by @matiasbeckerle and floating label styles by Valentin Zamorano. for testing purposes
  • Cleaned up markup needed by bootstrap that polluted the DOM.

Pending to be done

Remove any other plugin that can be removed

Notes

I think we should all gather and talk about the approach to deal with components since HTML is UXdev domain and JSX components is FE domain responsibilities collide and we all want the best final results.

Copy link
Copy Markdown

@nmartello-makingsense nmartello-makingsense left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!

Copy link
Copy Markdown
Collaborator

@matiasbeckerle matiasbeckerle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I told you in the other PR, really nice work.

Comment thread app/ux/styles.scss Outdated
/// - Yeah, we should be ashamed of this. MUST fix these in the near future.
////

@import "libs/**/*";
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this import added on the other project (PR) you did this morning?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah. it was.

@AlphaGit
Copy link
Copy Markdown
Collaborator

Looks good -- I don't have much insight to provide into the framework itself.

However, should it be a bower / npm / NuGet package? Instead of copy-pasting the code we could import it and just update the references whenever updates were released. Is this something you guys are thinking about?

@arzafran
Copy link
Copy Markdown
Contributor Author

@AlphaGit yeah, we have that working already but that's not the best solution, since we're adding only the folder structure, and not specific code (just core libs like jeet or normalize). The dependency way would be great if we're only importing an already compiled css, like what happens with bootstrap.

TL;DR: I don't feel comfortable enough with adding folder structures via npm, neither with copying and pasting it from node_modules folder (even though I've already created an npm task to automate the process)

I think, and this is more a pilosophical issue, the best approach is to have two frameworks, one for webapps and the other for websites. since having only one would fall short, or be an overkill, depending on which case it tries to solve.

Last, mantainance shouldn't be an issue since it's just folder structure, and webpack loaders.

@arzafran arzafran requested review from AlphaGit and joseguti84 March 27, 2017 17:51
@AlphaGit
Copy link
Copy Markdown
Collaborator

AlphaGit commented Mar 27, 2017

The dependency way would be great if we're only importing an already compiled css, like what happens with bootstrap.

Why not with SASS code? (I don't disagree, I just didn't understand the reason.) I imagine it could be possible if the framework relied on some "hook" points (which is what every framework does), and if they could be optional, then even better, because it would be easy to integrate in every system that wants to use it.

Last, mantainance shouldn't be an issue since it's just folder structure, and webpack loaders.

I think I'm starting to see a point here. You expect this structure to change a lot on each individual project, right? So this framework is just some boilerplate starter code, rather than a framework. Is that correct?

@arzafran
Copy link
Copy Markdown
Contributor Author

Why not with SASS code? (I don't disagree, I just didn't understand the reason.) I imagine it could be possible if the framework relied on some "hook" points (which is what every framework does), and if they could be optional, then even better, because it would be easy to integrate in every system that wants to use it.

I'm not talking about the file extension, but with the code that bootstrap generates, which relies in you adding their markup and start coding right away, since we have a team of specialized UX devs, every style is going to be unique, and that's why we only provide a structure, and the basic wiring, with image optimization, postcss processing etc. instead of providing silver bullet styles.

I think I'm starting to see a point here. You expect this structure to change a lot on each individual project, right? So this framework is just some boilerplate starter code, rather than a framework. Is that correct?

Right. we don't intend to replace tools like bootstrap, instead we try to provide most of the tools needed to fasten up development as much as possible but still have the possibility to set creativity free and code any mindblowing design that UX designers provide to us.

:)

@AlphaGit
Copy link
Copy Markdown
Collaborator

@arzafran Gotcha. Thanks for the explanation. :)

Copy link
Copy Markdown

@nazarenooviedo nazarenooviedo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I saw some magic numbers on CSS file , but I understand that you made a custom input design. Outside of that, great work man!

Copy link
Copy Markdown

@damianmuti damianmuti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job with the cleanup

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants