chalarangelo / mini.css Goto Github PK
View Code? Open in Web Editor NEWA minimal, responsive, style-agnostic CSS framework!
Home Page: https://chalarangelo.github.io/mini.css
License: MIT License
A minimal, responsive, style-agnostic CSS framework!
Home Page: https://chalarangelo.github.io/mini.css
License: MIT License
The cards for the module page on wide screens start out vertically aligned along the top, but if you shrink the window horizontally the "Core" card looks like it becomes misaligned at some sizes, but it's really vertically centered, which was just surprising.
I expected them to maintain vertical alignment along the top, but if the intent was vertical centering, then please close this ticket.
Some <input>
element types are not fully supported by browsers. In fact, the following input types have a lack of support in many browsers:
date
datetime
datetime-local
month
time
Apart from those, the color
type is not well supported, but the support is good enough right now.
Due to lack of support for many of those elements by some browsers, these input types will not be fully styled in Fermion. Instead, their full release will be postponed indefinitely, until support is better across the board. Some elements might be styled properly in supported browsers.
The thumbnail class needs to get a &:hover, &:focus, &:active
styling that will change the outline to a user-defined color. For existing flavors, this will be the hyperlink color.
The blockquote
element is used quite frequently in many websites, styling should be added before initial release of Fermion.
Picnic CSS allows "stacks" which can group a set of inputs similar to your button-group, but which isn't limited to buttons. Stacks are only vertical there, but it would be nice to have a set of generalized classes, say hgroup and vgroup, for horizontal and vertical input groups.
Or a separate class for grouping works too, ie. class="input-group vertical" and class="input-group horizontal".
Instead of using classes, mini.css could make any site that uses it more accessible CSS by default if you use ARIA roles to identify tabs, buttons, alerts, menus and navbars, etc.
The CSS selectors then change from class selectors, to attribute selectors like [role~="tab"] { ... }. This is CSS 2.1 IIRC, so it already has broader browser support than mini.css's latest version.
Due to a bug in the code of the button mixin, button disabled styles do not work properly. This is due to line 58 (declaration of the disabled styling) reading:
&.disabled, &[disabled], &fieldset[disabled]
instead of:
&.disabled, &[disabled], & fieldset[disabled]
Notice that the issue might appear in other modules and needs to be checked thoroughly throughout the code. Further fixes might be required for other modules affected.
Some web frameworks generate ids automatically, so it's sometimes difficult to designate checkboxes and radio inputs using the label's "for" attribute. Nesting the input inside the label as allowed in HTML5 would solve this problem, and the checkbox hack should work if you add selector for label>[type="input"]
or an explicit class the way Picnic CSS does it.
If the input-group class would also apply to the label, then that would be ideal since it eliminates redundant markup:
<label class="input-group">
<input type="checkbox" id="check1" tabindex="0">
<span for="check1">Checkbox</span>
</label>
Many of the variables used in the framework can be changed from SCSS variables to CSS variables.
However this feature is not well-supported yet, thus it will be some time until the framework changes to CSS variables. This is a planned change and it will take place sometime later, when support for the feature is over 85% (currently at 66% as of October 2016).
I am pulling this into my solution via npm. If I want to take in core, but not all the imports of all the modules, I have to duplicate _core.scss under my source control. I can't edit the _core.scss in your package because it isn't under source control.
My suggestion is that you take the styles out of _core.scss and put them in a _typography.scss file. Then update the _core.scss to be a wrapper of all the imports. For example:
_typography.scss
/*
Browsers resets and base typography.
*/
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
@if $apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $body-margin;
color: $fore-color;
background: $back-color;
}
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
article, aside, section, figcaption, figure, main, details, menu {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers.
}
// Correct display for older versions of IE.
audio, video {
display: inline-block;
}
// Hide overflow in IE.
svg:not(:root) {
overflow: hidden;
}
// Show overflow in IE.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
// Fix display in older versions of Android.
$include-dfn-fix: true !default;
@if $include-dfn-fix {
dfn {
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: $heading-margin;
font-weight: $heading-font-weight;
small {
color: $heading-smalltext-fore-color;
$make-heading-smalltext-block: false !default;
@if $make-heading-smalltext-block {
display: block;
@if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin;
}
@if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size;
}
}
}
}
h1 {
font-size: $h1-font-size;
}
h2 {
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
p {
margin: $paragraph-margin;
}
ol, ul {
margin: $list-margin;
padding-left: $list-left-padding;
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
overflow: visible;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
$horizontal-rule-fancy-style: false !default;
@if $horizontal-rule-fancy-style {
height: 1px;
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
border-top: $horizontal-rule-border-style;
}
}
blockquote {
display: block;
position: relative;
font-style: italic;
@if $blockquote-back-color != $back-color {
background: $blockquote-back-color;
}
@if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color;
}
// Overwrite defaults
margin: $blockquote-margin;
padding: $blockquote-padding;
@if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style;
}
@if $blockquote-border-style != 0 {
border: $blockquote-border-style;
}
@if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius;
}
@if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow;
}
&:after {
position: absolute;
font-style: normal;
font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color;
}
left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite);
}
}
$use-default-code-fonts: true !default;
@if $use-default-code-fonts {
code, kbd, pre, samp{
font-family: monospace, monospace; // Applies display fix for all code elements
}
}
@else {
code, kbd, pre, samp{
font-family: $code-font-family; // Display fix should be applied manually!
}
}
code {
@if $code-element-border-style != 0{
border: $code-element-border-style;
}
@if $code-element-border-radius != 0 {
border-radius: $code-element-border-radius;
}
@if $code-element-back-color != $back-color {
background: $code-element-back-color;
}
@if $code-element-fore-color != $fore-color {
color: $code-element-fore-color;
}
@if $code-element-padding != 0 {
padding: $code-element-padding;
}
@if $code-element-box-shadow != none {
box-shadow: $code-element-box-shadow;
}
}
pre {
overflow: auto; // Responsiveness
@if $pre-element-border-style != 0 {
border: $pre-element-border-style;
}
@if $pre-element-border-radius != 0 {
border-radius: $pre-element-border-radius;
}
@if $pre-element-back-color != $back-color {
background: $pre-element-back-color;
}
@if $pre-element-fore-color != $fore-color {
color: $pre-element-fore-color;
}
@if $pre-element-padding != 0 {
padding: $pre-element-padding;
}
@if pre-element-margin != 0 {
margin: $pre-element-margin;
}
$add-pre-element-sidebar: false !default;
@if $add-pre-element-sidebar {
border-left: $pre-element-sidebar-style;
}
@if $pre-element-box-shadow != none {
box-shadow: $pre-element-box-shadow;
}
}
kbd {
@if $kbd-element-border-style != 0 {
border: $kbd-element-border-style;
}
@if $kbd-element-border-radius != 0 {
border-radius: $kbd-element-border-radius;
}
@if $kbd-element-back-color != $back-color {
background: $kbd-element-back-color;
}
@if $kbd-element-fore-color != $fore-color {
color: $kbd-element-fore-color;
}
@if $kbd-element-padding != 0 {
padding: $kbd-element-padding;
}
@if $kbd-element-box-shadow != none {
box-shadow: $kbd-element-box-shadow;
}
}
$style-samp-element: false !default;
@if $style-samp-element {
samp{
@if $samp-element-border-style != 0 {
border: $samp-element-border-style;
}
@if $samp-element-border-radius != 0 {
border-radius: $samp-element-border-radius;
}
@if $samp-element-back-color != $back-color {
background: $samp-element-back-color;
}
@if $samp-element-fore-color != $fore-color {
color: $samp-element-fore-color;
}
@if $samp-element-padding != 0 {
padding: $samp-element-padding;
}
}
}
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
small, sup, sub {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sub-font-size {
small, sub {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sup-font-size {
small, sup {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub {
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $sup-font-size == $sub-font-size {
small {
font-size: $small-font-size;
}
sup, sub {
font-size: $sup-font-size;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
}
@else {
small {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub{
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
$apply-link-underline: true !default;
$apply-link-hover-fade: true !default;
a{
color: $link-fore-color;
@if $apply-link-underline {
text-decoration: underline;
}
@else {
text-decoration: none;
}
@if $link-font-weight != 500 {
font-weight: $link-font-weight;
}
@if $apply-link-hover-fade {
opacity: 1;
-webkit-transition: all 0.3 ease 0s;
transition: all 0.3s ease 0s;
}
&:visited {
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
@else {
&:hover, &:focus, &:active {
color: $link-hover-fore-color;
}
}
}
_core.scss
@import 'typography';
@import 'grid';
@import 'navigation';
@import 'input_control';
@import 'table';
@import 'card';
@import 'tab';
@import 'contextual';
@import 'progress';
@import 'utility';
The following pages need to be added to the documentation:
Fermion will be introducing some major changes to the framework, namely the transition from the traditional grid system to the flexbox grid system, use of native HTML5 elements wherever possible etc.
Some of these changes are incompatible with the previous version of the framework, thus the legacy version will probably be moved to its own branch at the end of the development cycle of Fermion to be more easily supported if needed.
The list of breaking changes is the following:
<mark>
for contextual background text and labels, dropped some mixins and classes from older versions. No contextual foreground text exists as of Fermion.<progress>
instead of custom <div>
-based progress system.<header>
, <nav>
and <footer>
instead of <div>
-based navigation system.<table>
and <form>
will most likely break support for older versions of the framework and drop support for some browsers.tab
component which provides most of the previous functionality in one module.[foo^="bar"]
) and :not([foo="bar"])
etc). Breaks support for legacy browsers.object-fit
property, which is widely enough supported, but not supported in some browsers. This is only used in the cards system from the shell and there are ways to work around this. Worst-case scenario is that the images will be stretched. Not too horrible.transition
and transform
. Older browsers and Opera Mini do not support these, so some problems with presentation might occur. -webkit-
prefix support has been added for some browsers, though.Also, note that certain legacy browsers will not be supported in Fermion:
-ms-
prefix whenever needed manually is required and changing the syntax to 2012 spec).-moz-
has to be done manually for the old spec).Note: This list will be updated as more features are developed.
Minor update to mini.css.
:disabled
class in disabled styles (issue #8):hover
styling in thumbnails (issue #10):active
and :focus
(issue #9 )Mixins need to be added in the card module for the following:
large
and small
, adds as many sizes as the user desires).section
styles (padding
etc.).These changes will be implemented later down the line of Fermion's development cycle (probably as soon as v2.1.0.
CSS-only collapsible hamburger menus exists, so this would be a nice addition to mini.css.
A transition should be added to the progress
element, so that whenever there is a change to its value
attribute, it will transition smoothly from the one value to the other.
Note: This feature cannot be implemented yet due to lack of support and/or difficulty in coding.
nav
), header
, footer
.Button groups should be implemented only visually, not functionally for use in websites with multiple pages or options etc. This utility mixin should be added in an minor patch of Fermion.
Due to the fact that the Fermion release is somewhat reminiscent of a material-like design style, box-shadow
s should be added in a way that can be customized for as many components as possible.
This will be implemented in Fermion, either in the base release or a minor/major update.
Minor update for mini.css.
A new generic utility mixin should be added to allow box-shadow
s to be added to any element.
These changes will be implemented before Fermion's initial release.
Some things that need to be done at any possible time:
flexbox
or grid
(or both as separate replacement modules)Labels are somehow broken on mobile devices. At least on iOS they have not enough vertical space after line break. So they are overlapping.
When a .col
element inside a .row
is also a .card.fluid
, sometimes the card's fluidity does not respect the boundaries of the grid. This is more common when there is more than one fluid card in the layout and less common for single cards. The problem is most prominent with the right boundary instead of the left. Sometime the left boundary will even push itself even more to the right, meaning that the whole line moves a little bit. Further testing is required. A temporary solution has been implemented in the demo page of the main version.
Note: the way cards do responsiveness might also not be optimal, as a change from width
to max-width
might solve more issues than breaking changes introduced. Also, the fluid card could use a width: auto
to catch some unexpected problems.
For example in Bootstrap or similar frameworks, classes are named like success
, danger
, info
. But you chose to implement class names like this:
danger -> secondary
success -> tertiary
Why? It looks meaningless and confusing.
Panel padding (> * { padding: 10px }
) overwrites most other element paddings due to specificity. This must be fixed.
Right now I'm using w3css for a project, but I saw mini.css and decided to migrate it. The project will be used mostly in Android 4+ devices.
So, I wonder which features are supported by mini.css in Android devices? I really want to use mini.css.
Thank you!
Alternative style for checkbox using a tick mark in :after
should be added using a flag (use-checkbox-tick-mark
) and certain extra variables. This change should be coming in an update of Fermion.
Optimization will include breaking the way radio
, checkbox
works together in the :after
pseudo-class and instead add a check to either deploy them both using the original styling or use separate styles based on the alt-style flag.
In order to allow for more customization for the <progress>
element, the max
of it should be stored in a variable and the way it is handled should be changed to work with this variable-based max
instead of 100
. This change will be implemented before the release of Fermion.
Placeholder text color definitions should be updated later down the line when support for ::placeholder
and :placeholder-shown
is better. As of now, we are using older, prefixed, browser-specific rules.
Due to the way the modal dialog is structured (opacity: 0
when not visible), it will sometimes cause problems with other things not being clickable as it will be displayed over them even if invisible. This can be easily remedied by changing the default state of the modal dialog (when not visible) to either use a z-index
of -1
or similar (might have some problems with tabs using that specific z-index
) or set it to display: none
and display: block
for its two different states.
The <input type="range">
control is supported in most browsers, however the CSS to style it is not the same between browsers. Styling for the element needs further work.
The <input type="color">
control is mostly supported currently.
As of Fermion, these elements will not be styled, as they are not integral to the user experience and can be omitted. They might be added later down the line.
Using the following code produces a crisp result in Firefox, but a very blurry one in Chrome:
<div class="alert animated">
<h3>Animated alert</h3>
</div>
The problem seems to be webkit-related, however there could be ways to find a workaround for it.
Any help provided in order to solve the issue is much appreciated.
Fermion module restructure must follow these guidelines (not finalized):
There will be two supermodules: Core and Shell. All modules will be submodules to these two.
Core will contain modules for core functionality. This functionality will be expanded from v1 to include the following:
header
, nav
, footer
).Shell will contain auxiliary presentational elements along. Functionality and elements will be expanded from v1 to include:
contextual
probably.This is a relatively simple enhancement. A simple .tooltip class or make use of the role="tooltip".
You can also possibly customize the conditions for tooltip popup via classes, ie. classes for activating the tooltip on :hover (probably the default) and :active for click events. Something like:
.tooltip { cursor: pointer; }
.tooltip>[role="tooltip"] { visibility: hidden; }
.tooltip.onhover:hover>[role~="tooltip"] { visibility: visible; }
.tooltip.onclick:active>[role~="tooltip"] { visibility: visible; }
So some markup could use it as follows:
<div class="tooltip onhover">?<div role="tooltip">This is the tooltip text</div></div>
See working codepen.
Major framework update. This update will probably launch sometime in 2017 (probably sometime Q1).
pre
elements.hr
.uncertain
Add fancy sidebar (30px wide with code icon (</>
) using :before
) for pre
code blocks.mark
element.flex
.nav
element.position: sticky;
seems like a very useful feature for the header
element and maybe some other elements in the hierarchy. Support is kinda low right now, but there might be a good workaround using something like @supports
or similar to allow us utilize this new feature in as many browsers as possible.
This will be probably added later down the line in a Fermion minor release.
Reference: position: sticky; | CSS Tricks
Classes for reordering grid columns on different size displays should be added. Two classes for each display size should suffice (examples given for small (sm
) screens):
.sm-first
: Makes the column first on that display..sm-last
: Makes this column last on that display.Another class for .sm-hidden
might be useful to help hide certain types of content on different displays.
Responsiveness for media needs to be added. Probably a feature to be added later to Fermion.
[irrelevant]
Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm.
Alerts are good and I'm using it, but a modal dialog is one of the elements that should be in a CSS framework. Because alerts are not enough in terms of UI experience. Think about a facebook post like list.
That would be good to see modal. Right now I'm using w3-css modal.
Support for the :disabled
pseudo-class is needed wherever there are disabled styles.
The wiki's documentation currently reflects v1. It should be updated eventually to reflect v2 (Fermion).
As mentioned in #47, #48, there is a need to move @import
declarations out of the _core.scss
file. This is an important patch that needs to be applied as soon as possible.
@import
declarations out of _core.scss
and into the flavor files.@import
._core.scss
file does not inclue the @import
declarations and that they have been moved to the flavor files instead (customization.html
& index.html
).It is possible that later down the line an icon
module might be added to mini-shell
to add CSS-based icons to the framework. This might be a long ways down the road, however.
<input>
elements with type="file"
cannot be styled the same way across all browsers (webkit-based browsers support ::-webkit-file-upload-button
which can help with styling). Most browsers, especially legacy, have no support for styling this element. However, there might be better support for this in the future.
Current solution: Styling these elements can be problematic, thus it will be done using a workaround for now, using <label>
. A Javascript method will also be provided in a link from some tutorial to help users with upload buttons.
How to stick a footer to the bottom of a page or some enclosing box is a pretty common problem. It'd be nice if you could just stick a class to your <footer>
element and have it just work.
For instance, I just forked the footer codepen and added this class as an example of the desired behaviour. It's probably not ideal though.
A mixin needs to be added for the spinner module to allow for different sizes of spinner-donut
s. This update will be coming later in Fermion.
The close utility has only support for hover events instead of hover, focus and active. Support for :active
and :focus
needs to be added.
Horizontal tables and mixed tables are not yet supported. This might be possible to fix in a later patch or it could be left as-is, warning users of the specific vertical-only nature of tables in Fermion.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.