search

Chalarangelo / mini.css

A minimal, responsive, style-agnostic CSS framework!
https://chalarangelo.github.io/mini.css
MIT License
2.96k stars 207 forks source link

v3.0.0 Roadmap #97

Closed Chalarangelo closed 6 years ago

Chalarangelo commented 6 years ago

Logo

Overview

v3.0.0 (Gluon) is going to be a step in a different direction from Fermion, as it will be built from the ground up, with certain differences in focus and scope. Many breaking changes will be present, however some core concepts and ideas will be staying the same.

Some of the key features that will be present in the new Gluon branch are support for CSS3 variables, which will impact most aspects of the current codebase, possible support for CSS3 grid, additional components and replacement components, as well as many UI/UX improvements, which will be the focus of the next major release. To meet these goals, the framework will be rebuilt with a focus on better aesthetics, easier customization and better user experience, even if this impacts adoption rates, due to the discontinuation of support for legacy and proxy browsers, as Gluon will be built with a focus on the future. There is also the slight possibility that Gluon will be a bit larger than 7KB in certain of its flavors, however there will always be some light flavor meeting the core goal of 7KB.

That being said, the current Fermion branch will be supported actively, with fixes and possibly updates rolling out regularly, while Gluon is in development. After Gluon is released (estimated release date is Q1 2018 for now - this is subject to change), Fermion will be considered a legacy branch, but it will still be supported and its documentation will be available for a long time. On a side note, if you are reading this and use a Fermion build in production, make sure to point to a link with v2.x.x in its name and not the default one which loads from the last commit of the master branch.

Finally, the Neutrino branch will not be supported any further, as it is hereafter considered a legacy version.

Gluon - List of changes, updates, features

Note that all of this is subject to change and that it is very importan to get as much feedback as possible to provide the best possible experience for everyone. The lists below will be populated as progress is being made in each module.

Compatibility

As stated in the Overview section, the Gluon update will be a brand new framework, meaning a lot of the existing conventions and semantics will be changed. If you are using a previous version of Fermion, remember to point to a version-specific link.

Migrating to Gluon might take a little bit of effort, but I will try to make it as smooth as possible, by providing guidelines and help every step of the way.

Release date

It's too soon to tell, but the aim is to release sometime in the first quarter of 2018.

thornjad commented 6 years ago

I definitely like the idea of a small icon pack. I'm currently using a handful of inline SVGs. It would be nice to have a little pack of them from a project I know and trust. I like all the other bullet points also, but the icons popped out to me.

Chalarangelo commented 6 years ago

@Raindeer44, thanks for your support. At this time I am looking into SVG icon packs whose licenses are compatible, so that I can figure out what can be added to the framework. I was thinking about contacting @colebemis, creator of Feather, whose icon pack I have used a lot in the past and seems (at least to me) to fit the aesthetic of the framework. However, I am not yet set on any icon pack, so if you have any other suggestions, please comment below, so I can check them out.

mariastervic commented 6 years ago

Feather is a great icon pack and I would love to see icons from it integrated into mini.css. Are icons going to be their own module or part of something like the utility module?

Chalarangelo commented 6 years ago

@mariastervic I have not thought about it yet, but the plan is to add accessibility and improve UX using icons in forms' input fields etc. The icons themselves will be class-based with inlined svg's in their code, so that they can be added using a <span> element or something similar. The most sensible thing would be to make them part of the contextual or utility module. That, however, is up to the community to decide, as I am not yet set on anything.

On a side note, I will be starting work on the framework's core module possibly even today, after having debated a lot of the upcoming changes with myself. Expect screenshots and updates to this issue as work on the framework progresses. Feedback is essential to the final product, so please pitch in whenever you can. Thanks!

thornjad commented 6 years ago

I like Feather! It does fit the minimal aesthetic and is conveniently covered by an MIT license. My first thought would be to put them into their own module, icons or something. What is the argument for contextual or utility instead?

Chalarangelo commented 6 years ago

I have already contacted the developer of Feather and I am very excited to announce that some of its icons will make it into the next major release of the framework.

As far as module structure goes:

Chalarangelo commented 6 years ago

Update

The core module is already halfway through the baking process. If everything goes according to plan (you know it won't), I will have it up and running soon, meaning I can actually focus my efforts on building the first demos and a draft landing page for Gluon so that you guys can preview it.

On a side note

For anyone who has delved into the codebase in the past, you should know that a lot of the code is being rebuilt, especially parts that were conditionalized such as the styling for small, sub, sup, as the conditionals only cleaned up the unminified codebase (.css, not .min.css), meaning that the final size would be the same regardless. This change is going to be useful in the long run both for maintaining the codebase, as well as allowing new contributors to jump in.

mariastervic commented 6 years ago

I really like what I see in the Sass code. CSS variables seem to be complementing the style-agnostic aspect of the framework, plus I haven't seen any other framework utilize them yet. Really looking forward to the alpha release. Keep up the good work!

Chalarangelo commented 6 years ago

@mariastervic Indeed they do and they make it so much easier to create tooling that will allow for easy customization before downloading. I expect flavor-making to be really easy in the future, using the CSS variable aspect of the codebase, especially if I manage to create the proper systems for developers.

As far as I know, no other UI kit uses CSS variables at the moment, so mini.css will be the pioneer really, if I manage to release Gluon before any other framework implements this functionality. Hope it's the right choice, as it made me abandon a lot of legacy code and browser support is slightly on the low side as of now.

Chalarangelo commented 6 years ago

Update

The new website is (almost) upon us. I just redesigned the splash screen and logo of the framework for Gluon and I am pretty excited to share it with you guys:

Logo Image credit: Christopher Gower

Let me know what you think!

thornjad commented 6 years ago

I definitely like the logo and the splash screen! My only thought with the splash screen is that the second half of "framework" has a dark background. How would it look if that line were moved down a tish so it fits in the lighter area just below where it is now?

Chalarangelo commented 6 years ago

I noticed that, too. The deisgn is not yet finalized, so some changes will be made, I'm just trying to get a rough sketch down for now. Accessibility and ease-of-use (ie legibility) are always top-priority, so I will do something about this for sure. 😉

thornjad commented 6 years ago

Sounds good! Other than that (admittedly minor) thought, I love it!

Chalarangelo commented 6 years ago

Update

Oddly enough, everything is still on schedule, so the first alpha of Gluon might arrive around the end of this month or the first few days of November. I'm pretty happy with the resulting CSS so far and the code is a lot easier to maintain, tweak and customize as far as I can tell.

Apart from that I have to share the great news that, even though the code is 90% ready as of now and some things are missing, the new compiled CSS file is actually about 10 bytes leaner than the original equivalent from the Fermion branch, which I definitely did not expect. If this trend continues, the only thing bloating Gluon up a little bit will be the icon set, which is totally fine and justified.

The website is coming along nicely, I will try to get started on the documentation so that the two modules that are complete are mostly documented on release of the alpha, allowing me to get some feedback about it all.

Finally, it's reasonably probable that a couple of elements from other modules might make it into the release, such as a <header> element and a couple of <button>s and <mark>s, just because I will need them for the website, so I might as well build prototypes for them and see how they fare in the wild from day one of the alpha.

Stay tuned for updates and thanks a lot for all the feedback and ideas! 👍

Zorba1987 commented 6 years ago

Browsing through the code of the Grid module, I can tell that it's looking far more appealing to deal with than before. Bonus points for allowing extra breakpoints using the mixin, this will come in handy.

Chalarangelo commented 6 years ago

Update

The new website and docs are coming along nicely, altough it seems like the deadline for v3.0.0-alpha.1 will be pushed back by a week or two for two main reasons:

  1. I want to take some extra time to polish a few of the existing components and make sure everything in core and grid works as expected. Some styles are missing and a few of the currently styled elements are unfinished. I will also be working on a few parts from other modules, such as buttons and some navigational elements, because I need them for the website to function properly, so I might as well build them already and improve them later on. Thus, expect button, .button and probably header, nav and footer to ship with this release.
  2. I am going to build the new Docs using React. and react-static, which will ensure the website is as well-optimized as possible and packs a lot of functionality. However, there is currently a slight hiccup with their code (see #97 in react-static), which is sort of making me have to wait for a fix for the problem to fully utilize the static rendering. I am currently working on the underlying data structures and a service worker to be able to conver the whole of the new Docs into a PWA, ensuring a better experience for users. This will most likely require some time, but it will speed up development in the long run.

I'm really sorry about the delay, but I want the Gluon alpha to launch as smoothly as possible, so it's probably for the best. Stay tuned for updates!

tomap commented 6 years ago

Why not build the site with a static site generator? https://www.staticgen.com/ (I'm using Hexo, which is nice and simple) Having seen the current doc, not sure you need a framework (client or server) on top of this. But that's only a suggestion :)

Chalarangelo commented 6 years ago

@tomap The current doc is usable, but maintenance is a huge pain. I was planning on using React (and Redux quite possibly) to allow all of the documentation to be stored in JSON files, so that it can be easily altered and maintained. Most of the documentation follows a specific pattern, so creating a reusable React component seems like a very practical way of separating the data and presentation, so that the documentation can be eventually duplicated in the wiki and from the wiki (there are plans for that). Also, I am planning to implement a search bar into the new docs to allow everyone to find what they need without navigating through menus.

To be honest, I am not a big React fan, as it's pretty heavy, but I think it would be a decent enough fit for the new doc pages and will allow more people to help with the documentation in the long run.

Chalarangelo commented 6 years ago

Update

I have just completed scraping the current Fermion documentation and got myself some data to start working with towards the new docs for Gluon. If everything goes according to plan, I should have most of the work done by the end of this week.

Update 2

I actually needed a lot of parts from input_control and navigation for the documentation and site to work, so, instead of playing around with temporary solutions, I have built about 60% of input_control and 30% of the navigation module. Expect the first alpha to launch with both modules nearly complete, as well as the card module, which is needed for the documentation layout. I am really sorry for the delay, however this alpha will be shipping with more than twice as much stuff as it was supposed to be, which is something I hadn't anticipated originally. This will ensure that moving forward I can focus on the more complicated elements, components and systems, such as tables, tabs and the icon module which will be added to the framework.

mariastervic commented 6 years ago

Shipping 5 modules sounds more reasonable than just 2. The alpha will have everything one needs to set up a website already.

Chalarangelo commented 6 years ago

Announcement: External Modules

It's been a long time coming, so it might as well be coming in Gluon. External Modules will now be a thing. Certain components that are not regularly used or that fit a very specific site type will be moved to external packages, allowing their maintenance to be easier and people who do not need them to skip them by default. See #115 for more details. The .switch, .tabs and customized select will not be making it into Gluon, at least for now. The target of the main framework is to provide the elements and components that 95% of the users need 100% of the time.

Apart from that, the framework is coming along nicely, navigation, core and grid are complete, input_control is missing checkbox and radio elements and card is going to be implemented tomorrow (I don't expect any problems). The documentation will be the top priority immediately after these are implemented, so expect me to need 7-10 days until the alpha is released with about half of the components. Also, expect card and grid to be merged into a layout module. card is dependent on grid anyways, so I might as well merge it into grid to make sure that the one is not included without the other. Also, a lot of layouts use .card elements, so it would be nice to have them as part of the grid in that sense. Thank yoou for all your patience and the feedback!

Zorba1987 commented 6 years ago

I think the new version is coming along nicely. Combining cards and the grid system seems like a great idea, provided that the cards are dependent on the grid already. As far as the switches and tabs go, I haven't used them almost at all, so I don't really mind them going to make space for other things. Can't wait to test everything out!

Chalarangelo commented 6 years ago

Icon selection

icons

After some careful consideration, I came up with a 20-icon set draft from feather that is pretty much all-purpose and should be useful to the majority of the framework's users. I'm open to expanding the icon set further, adding another 10 icons or so to accommodate as many people's needs as possible. Please tell me what you guys think of the selection and which other icons you would like to see added in the icon set.

Glaring omission: I forgot to add a phone in there for telephone fields, consider it part of the set already.

thornjad commented 6 years ago

I like the selection! It has all the icons I can think of most users needing in most situations. I like the design (I like feather), and I can see this fitting into the framework. What do you think about adding a couple of the common social icons like for Twitter, Facebook, and a select few others?

I think mention of Feather should also be in the documentation with these so people know where to get more icons like them (for example, if I want a GitHub logo or something).

Chalarangelo commented 6 years ago

@Raindeer44 I will definitely mention Feather. I love that icon set and I want to expose as many people as possible to it, so I will link to it and maybe even add a custom banner in the documentation to make it abundantly clear that it's not my work, but another open source project I am using to improve the framework.

Social icons are a little bit of a mixed bag, as they will take up some extra space and I will probably need to choose a few, which will lead to arguments like why did you add Facebook but not [insert social media x]. I might do this, but I think a simple share icon works for many situations.

Another plan, which I will definetly get on board with eventually is to make a little tool that will not be part of the framework, just part of the docs, that people can use to customize their icon set. Provided that people have different needs and that using svgs in background limits color customization, this could be a lifesaver for the icon module, as people will have a chance to pick their own set and get the colors they want for individual icons. It's not even very difficult to implement, so I will try to get it started before the second alpha release.

On a side note, I am currently using two icons from Feather for the navigation drawer component, but I will scrap them to use Unicode characters. The main reason for this is that I want everything except for the icon set itself to be fully customizable in terms of colors, using CSS variables and this is simply impossible in background svgs (as far as I know at least).

thornjad commented 6 years ago

That all sounds great! I think that tool for customizing icons would absolutely solve the need for social icons, especially if it gave access to the entire arsenal of Feather. Maybe leave the set you mentioned earlier as default (it's a strong set for default), then make them customizable like choosing flavors. Awesome idea!

Chalarangelo commented 6 years ago

Update

The alpha release is coming really soon. The docs seem to be taking too long, so if anyone wants to test the upcoming Gluon release, you should be able to grab the mini-default.css compiled flavor file and play around with it. I made sure that most :bug:s were squashed before posting this announcement, so expect pretty much half of the things to break within the first day (everybody knows that as soon as I tell people to use it, it breaks). Post your feedback in this issue, let me know what you think.

Yet another update

After careful consideration, the new documentation will not be built using React & Redux. However, the search functionality will be added as promised. Instead of using React & Redux and then static-rendering certain parts of the page, I will be creating my own custom scripts for compiling the documentation from Javascript Objects into static HTML. This will ensure that the site remains lightweight, as well as easy to maintain and update in the future, thus improving the current documentation situation immensely.

While the documentation is nowhere near ready yet, the new cards are starting to take shape and they look (in my opinion) pretty great:

Sample card

All of the pieces shown on the card are represented by a Javascript object, meaning it's extremely easy to update and correct mistakes, so even though the difference is not extreme visually, the actual architecture behind this is something I'm quite proud of.

One more for the road

After almost a week's work, the documentation is almost complete (the .drawer is the only thing that hasn't been documented yet). After I'm done documenting, I will still need to add in the search functionality and update the pages, polish them up and get them all ready for release. I was hoping to get the alpha up and running around Monday, 20th, but it may still take longer. Thank you all for you patience this far!

P.S: Codepen generation, copying to clipboard, migration documentation and the flavor tool are all coming in later alphas. I had to decide what to cut out to get a minimum viable product out there for people to test.

Chalarangelo commented 6 years ago

v3.0.0-alpha.1

After a significant delay, here it is! Check out the live documentation and website and let me know what you think!

There is more work being done behind the scenes and a lot of stuff being added and evaluated, but it might be a little while until the next alpha is out. The current plan is to release one more alpha with one or two important modules in it (probably contextual and table) and then move to a beta phase, which will release with pretty much everything afterwards. After a couple of beta releases, I will rebase the master branch and use Gluon as the stable branch. This is still a long way down the road and I'm pretty sure a ton of bugs will pop up everywhere, but this is what alphas are for!

Zorba1987 commented 6 years ago

I like the new site a lot. It looks a lot more like most documentation websites I have seen before and the search is a great addition.

So far I have encountered a few problems when combining headers and grids after testing the alpha for about an hour. I'll try and understand what might be wrong there, but I think that columns in the header need to be styled separately from normal buttons. Fluid columns work well so far, but it seems that columns with preset width sometimes exceed the container. This might be a padding issue as far as I understand it or a flexines problem.

On the subject of the icon set, get rid of the X, add the telephone like you said and you're good to go. Most of these icons would work for a lot of designs and websites, so I guess you don't need more than that. You could also drop the menu icon for something more useful, as you already use an icon in your drawer component, so this one is pretty much redundant.

Chalarangelo commented 6 years ago

Thanks @Zorba1987, the whole point of the new website was to provide better UX for devs, while keeping it simple and all in one place.

Headers and grids have given me some trouble, too. I could use a helping hand with those, as they are really a mindbender to me at times and I have a bunch of things I am working on in the meantime. These bugs will be ironed out before the beta release one way or another.

Good point on the icons, both the X and menu have no particular use-case except for the ones I have already covered with Unicode symbols. I'll probably find a replacement for menu and I think it should all be good to go afterwards. Icons are still a little bit away, but the icon set is pretty much decided already, so there's one less concern for me.

Update

I just started working on the contextual, progress, table trifecta (contextual is first) today. If all goes well, contextual and progress should be done by the end of next week, then I'll take a break for the holidays etc. and get table and documentation done until mid-January. No promises, as things tend to slow down seemingly at random, because other responsibilities get in the way, but the sure thing is that the next alpha will contain all three of these modules.

Chalarangelo commented 6 years ago

Update (this is a weekly thing nowadays)

The contextual module is coming along nicely, all the previous components are already written and I will document them over the course of the next few days. I will also take some time to move the old vertical version of tabs into the contextual module as a spoiler component (name not set yet), so that I can eliminate the extra module and combine the vertical tab component into it. The old-school tab system will be an external module and examples will be provided to allow people to build a tab-based layout, utilizing some Javascript for better results.

After contextual is done, I will jump into coding the progress module, as it is probably the tiniest one and the one that requires the fewest changes and little work in general. Bear in mind that there will probably be some stylistic changes to the module's components.

Last thing before the next alpha is the table module, which could take a little while to work on, as there are far too many hacks in that module and a few things need to be clarified. Apart from that, it is pretty important that the table styling is modernized. Expect this module to be complete by mid-January, just in time for the launch of the next alpha version.

Tools, such as the promised flavor tool, will be pushed back to the beta release most likely, but I will try to get working Codepen links for code snippets from the documentation. You can also expect some examples that might involve Javascript (i.e. responsive tooltips etc.) under the Best practices sections of components (just a few basic ones should do the trick, I think).

Finally, I will try to troubleshoot any bugs I find and clean up the code before this alpha, so that most of the framework is up and running by mid-January, missing only icons, UX changes and tooling.

Codepen links are already up and running in the WIP branch, out in the next alpha!
Chalarangelo commented 6 years ago

Update

These past two weeks have been pretty crazy, due to me working on 30 seconds of code and taking a short vacation. However, I'm starting to have more spare time to work on the framework, so I should resume working on the contextual module and then the progress module, as promised. If everything goes well, both modules should be done by the end of next week and I might have managed to put some time into the table module.

What this means for the next alpha release is that there might be a short delay (a week or two), so expect the next alpha to ship around mid-January to late-January, at which point it will have what was promised previously. I understand that this delay is sub-optimal, but the alternative (rushing through these updates and releasing on time) is even worse as I do not want to ship a broken product. That being said, I'm doing my best to tackle as many issues as possible and keep the quality of code and documentation high.

I'm really sorry that I got carried away and had so much work on my other project, but I promise to deliver exactly what I promised. The contextual module should be fully documented today and I will start working on the rest of the modules for this alpha release as soon as I can and as much as I can. Stay tuned for more information and updates!

Chalarangelo commented 6 years ago

Update (the great table update)

So, even with so many delays, it seems like the next alpha will be out next week. The table module is complete, fully documented and has a couple of new features in it, only thing left to do is ~document it properly and check if there are any lurking bugs anywhere in the code (pretty sure there are) and make some minor changes to the website.

What's next

As soon as the next alpha is out, I will focus on adding in the utility module and the icon pack. At that point, it will be time to start working on the flavor and icon tools, which should not take very long. I would estimate that everything except the tools should be done by the end of February and the tools should take about 20 days each at most. This means the beta version should release by the end of March or early April (that's the worst-case scenario, possibly earlier).

Bear in mind that mini.css is also the focus of my MSc dissertation, so expect improvements in terms of UI/UX for both developers and end-users before the launch of the stable Gluon version.

To blog or not to blog

Due to a lot of things happening and a lot of projects I need to tend to, I might not launch a blog for the framework after all, as there is a lot of stuff to take care as it is already. However, planned articles and complementary examples will be published eventually on Medium (probably on one of the publications I am part of already, such as Hackernoon or FreeCodeCamp).

Chalarangelo commented 6 years ago

Update (the -alpha.2 release)

Yesterday, much to everyone's surprise, -alpha.2 was released with all the features promised, so everything should be on schedule so far. Today, I coded all of the utility module (as of yet undocumented) and it seems like a lot of progress has been already made in terms of getting to the beta stage. I will start working on the iconset in the next couple of weeks and see what kind of functionality I can add based on it.

Chalarangelo commented 6 years ago

Update (let's get some icons, shall we?)

I'm going to be working on the utility module documentation today, just to get that out of the way. After that, I will start working on the icon set right away to get a rough prototype up and running and see how icons will affect the size of the framework. Expect some pictures or codepens later this week, as icons are added and tested!

As promised, here are the icons (mostly complete)

icons

Chalarangelo commented 6 years ago

Update (adding some glue to Gluon)

Documentation of all elements and components is finally complete. The utility and icon modules are tested and ready for use. There will be an -alpha.3 release sometime this week, marking the final alpha release. I'm not yet calling this a beta, as I would rather have some more things in the docs and possibly a prototype of the flavor and icon tools before we move to -beta.1 (which is probably not gonna be long).

After this release, I will start working on anything left over in the roadmap and especially the new tools for developers. Expect this to take a little while, but everything should be pretty much complete next time the Gluon branch gets a new release. I'm also going to be working on my dissertation, which is sort of a case study of UX/UI practices in mini.css, so expect to see minor changes across the board, improving the asesthetics and usability of the framework.

Chalarangelo commented 6 years ago

Update (the toolset of a web developer)

It's been a little while and I have been working on a ton of other projects, while I also finally got a day job. The last piece left over before the next version is released is to add the flavor and icon tools. I am going to set a schedule for myself and work on them over the course of this month, so that we can hope for a release around early April (Easter holiday, should be a good time to debug any left over problems and iron out any issues there might be). Hopefully, everything will go smoothly and you will hear from me again very soon (probably next week). Thank you all for you patience, more goodies are coming and they are gonna be pretty cool if everything goes according to plan!

Chalarangelo commented 6 years ago

Been a little while (again)

After a prolonged absence from the project, I am happy to announce that work on the flavor tool has already begun. There's a rough draft ready for the whole of the flavor tool, but so far only the first module's inputs have been added to the form. I hope that the tool (and subsequently the whole of Gluon) will be ready for release sometime this month. Sorry for the delay, but other things got in the way and I didn't want to deliver a half-baked product in the end.

As an added bonus, here's what a flavor's variables will include and a rough draft of what I'm planning to do with them:

var flavorData = {
  core: {
    baseRootFontSize: 16,         // in px
    baseLineHeight: 1.5,          // unitless
    foreColor: '#111',            
    backColor: '#f8f8f8',
    secondaryForeColor: '#444',
    secondaryBackColor: '#f0f0f0',
    borderColor: '#aaa',
    secondaryBorderColor: '#ddd',
    universalMargin: 0.5,         // in rem
    universalPadding: 0.5,        // in rem
    universalBorderRadius: 0.125, // in rem
    universalBoxShadow: 0,        // uses presets
    headingLineHeight: 1.2,       // unitless
    headingRatio: 1.19,           // unitless
    headingFontWeight: 500,       // unitless (weight)
    subheadingFontSize: 0.75,     // in em
    subheadingTopMargin: -0.25,   // in rem
    smallFontSize: 0.75,          // in em
    boldFontWeight: 700,          // unitless (weight)
    horizontalRuleLineHeight: 1.25, // in em
    blockquoteSidebarColor: '#f57c00',
    blockquoteQuoationSize: 3,    // in rem
    blockquoteCiteSize: 0.75,     // in rem
    codeFontSize: 0.85,           // in em
    preSidebarColor: '#1565c0',
    supTop: -0.5,                 // in em
    subBottom: -0.25,             // in em
    aLinkColor: '#0277bd',
    aVisitedColor: '#01579b',
    mobileBreakpoint: 768,        // in px, generally needed in other modules
    largeScreenBreakpoint: 1280,  // in px, generally needed in other modules
  },
  // Also needs to build on top of mixins
  layout: {
    enabled: true,
    gridColumnCount: 12,          // unitless (count)
    gridMediumBreakpoint: 768,    // in px, auto-ties to mobileBreakpoint
    gridLargeBreakpoint: 1280,    // in px, auto-ties to largeScreenBreakpoint
    cardNormalWidth: 320,         // in px
    cardSectionMediaHeight: 200,  // in px
    cardForeColor: '#111',        // Tied to foreColor, auto-updates if defaulted
    cardBackColor: '#f8f8f8',     // Tied to backColor, auto-updates if defaulted
    cardBorderColor: '#ddd',      // Tied to secondaryBorderColor, auto-updates
  },
  // Also needs to build on top of mixins
  inputControl: {
    enabled: true,
    formBackColor: '#f0f0f0',     // Tied to secondaryBackColor, auto-updates
    formForeColor: '#111',        // Tied to foreColor, auto-updates
    formBorderCoor: '#ddd',       // Tied to secondaryBorderColor, auto-updates
    inputBackColor: '#f8f8f8',    // Tied to backColor, auto-updates
    inputForeColor: '#111',       // Tied to foreColor, auto-updates
    inputBorderColor: '#ddd',     // Tied to secondaryBorderColor, auto-updates
    inputFocusColor: '#0288d1',
    inputInvalidColor: '#d32f2f',
    buttonBackColor: '#e2e2e2',
    buttonForeColor: '#212121',
    buttonHoverBackColor: '#dcdcdc',
    buttonBorderColor: 'transparent',
    buttonHoverBorderColor: 'transparent',
    buttonGroupBorderColor: 'rgba(124,124,124,0.54)', // Probably needs a decent control
  },
  navigation: {
    enabled: true,
    headerHeight: 3.1875,         // in rem, probably auto-calculate from line heights
    headerBackColor: '#f8f8f8',   // Tied to backColor, auto-updates
    headerForeColor: '#444',      // Tied to secondaryForeColor, auto-updates
    headerHoverBackColor: '#f0f0f0',  // Tied to secondaryBackColor, auto-updates
    headerBorderColor: '#ddd',    // Tied to secondaryBorderColor, auto-updates
    headerLogoFontSize: 1.75,     // in rem
    navBackColor: '#f8f8f8',      // Tied to backColor, auto-updates
    navForeColor: '#444',         // Tied to secondaryForeColor, auto-updates
    navHoverBackColor: '#f0f0f0', // Tied to secondaryBackColor, auto-updates
    navBorderColor: '#ddd',       // Tied to secondaryBorderColor, auto-updates
    navLinkColor: '#0277bd',      // Tied to aLinkColor, auto-updates 
    navSublinkDepth: 2,           // unitless (count)
    footerBackColor: '#f8f8f8',   // Tied to backColor, auto-updates
    footerForeColor: '#444',      // Tied to secondaryForeColor, auto-updates
    footerBorderColor: '#ddd',    // Tied to secondaryBorderColor, auto-updates
    footerLinkColor: '#0277bd',   // Tied to aLinkColor, auto-updates 
    footerFontSize: 0.875,        // in rem
    drawerBackColor: '#f8f8f8',   // Tied to backColor, auto-updates
    drawerHoverBackColor: '#f0f0f0',  // Tied to secondaryBackColor, auto-updates
    drawerBorderColor: '#ddd',    // Tied to secondaryBorderColor, auto-updates
    drawerCloseColor: '#444',     // Tied to secondaryForeColor, auto-updates
    drawerToggleFontSize: 1.5,    // in em
    drawerWidth: 320,             // in px
    drawerCloseSize: 2,           // in rem
  },
  table: {
    enabled: true,
    maxHeight: 400,               // in px
    captionFontSize: 1.5,         // in rem
    mobileCardLabel: 'data-label',
    mobileLabelFontWeight: 600,   // unitless (weight),
    borderColor: '#aaa',          // Tied to borderColor, auto-updates
    borderSeparatorColor: '#666',
    thBackColor: '#e6e6e6',
    thForeColor: '#111',          // Tied to foreColor, auto-updates
    tdBackColor: '#f8f8f8',       // Tied to backColor, auto-updates
    tdForeColor: '#111',          // Tied to foreColor, auto-updates
    tdAltBackColor: '#eee',
    tdHoverBackColor: '#90caf9',
  },
  // Also needs to build on top of mixins
  contextual: {
    enabled: true,
    markBackColor: '#0277bd',
    markForeColor: '#fafafa',
    markFontSize: 0.95,           // in em
    markLineHeight: 1,            // in em
    toastBackColor: '#424242',
    toastForeColor: '#fafafa',
    tooltipBackColor: '#212121',
    tooltipForeColor: '#fafafa',
    modalOverlayColor: 'rgba(0, 0, 0, 0.45)', // Probably needs a decent control
    modalCloseColor: '#444',      // Tied to secondaryForeColor, auto-updates
    modalCloseHoverBackColor: '#f0f0f0', // Tied to secondaryBackColor, auto-updates
    modalCloseSize: 1.75,         // in rem
    collapseLabelHeight: 1.5,     // in rem
    collapseContentMaxHeight: 400, // in px
    collapseContentBackColor: '#fafafa',
    collapseLabelBackColor: '#e8e8e8',
    collapseLabelForeColor: '#212121',
    collapseLabelHoverBackColor: '#f0f0f0', // Tied to secondaryBackColor, auto-updates
    collapseSelectedLabelBackColor: '#ececec',
    collapseBorderColor: '#ddd',  // Tied to secondaryBorderColor, auto-updates
    collapseSelectedLabelBorderColor: '#0277bd', // Tied to aLinkColor, auto-updates 
  },
  // Also needs to build on top of mixins
  progress: {
    enabled: true,
    backColor: '#ddd',            // Tied to secondaryBorderColor, auto-updates
    foreColor: '#555',
    height: 0.75,                 // in rem
    maxValue: 1000,               // unitless (count),
    inlineWidth: 60,              // percentage
    spinnerDonutSize: 1.25,       // in rem
    spinnerDonutBorderThickness: 0.25, // in rem
    spinnerDonutBackColor: '#ddd', // Tied to progress.backColor, auto-updates
    spinnerDonutForeColor: '#555', // Tied to progress.foreColor, auto-updates
  },
  icon: {
    enabled: true,
  },
  utility: {
    enabled: true,
    genericBorderColor: 'rgba(0, 0, 0, 0.3)', // Probably needs a decent control
    genericBoxShadowColor: 'rgba(0, 0, 0, 0.125)', // Probably needs a decent control
  }
}
thornjad commented 6 years ago

I'm excited for the flavor tool! I'm using mini on a project at work, and the only customization I really have to make is colors (to match our 'brand'), which right now means I'm sort of making my own flavor, and this tool looks like it will make that task much nicer!

Chalarangelo commented 6 years ago

Flavor tool progress

Hey, everyone! I'm still working on the flavor tool. So far, the structure of most of the form controls for it are complete, except dynamic elements for mixins. I have started hooking up the forms to variables and generating the Sass code, later I will have to compile that code into a flavor file and then produce the final CSS file. So far core, icon and module are fully hooked up and I am hoping to get at least another 1-2 modules done until Monday. Hopefully, I won't be slowed down by work, so I expect to have most modules (except dynamic fields/mixins) hooked up to variables and Sass generation by the end of next week.

Chalarangelo commented 6 years ago

Almost there

Flavor tool is ready to rock. It generates the .zip file with all of the framework, flavor file and compiled CSS files. If everything goes according to plan, I will polish everything up, add some missing flavors and release during this week. After the longest time, Gluon will be released! 😄

Chalarangelo commented 6 years ago

After almsot 8 months in the making, Gluon has been finally released. Hope you'll enjoy using it in your projects! 😃

andrewharris-workstate commented 6 years ago

Fermion will be considered a legacy branch, but it will still be supported and its documentation will be available for a long time.

Maybe this is something obvious I'm missing, but how do we get to the Fermion documentation now? I am unable to find it.

Chalarangelo commented 6 years ago

@andrewharris-workstate The docs are still available at https://minicss.org/v2/.

andrewharris-workstate commented 6 years ago

ahhh thank you @Chalarangelo! i was trying different permutations of "minicss.org/docs/v2" to no avail...much appreciated!