chalarangelo / mini.css Goto Github PK

View Code? Open in Web Editor NEW

3.0K 82.0 207.0 11.86 MB

A minimal, responsive, style-agnostic CSS framework!

Home Page: https://chalarangelo.github.io/mini.css

License: MIT License

CSS 100.00%

css framework front-end frontend responsive web-development sass mini sass-framework css-framework

mini.css's Introduction

mini.css

A minimal, responsive, style-agnostic CSS framework

mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.

Setup & usage

You have 4 options when it comes to setting up mini.css:

Use a package manager (recommended)
Use GitCDN
Use Rawgit
Use cdnjs (preferred for older releases)

For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.

Method 1: Use a package manager (recommended)

Install mini.css using npm, yarn or bower.

npm install mini.css
yarn add mini.css
bower install mini.css

Pick one of the available flavors and use its CSS file.
Start working on your project. Detailed documentation is available on the framework's website, so be sure to check it out.

Method 2: Use GitCDN

mini.css is also hosted on GitCDN, an open-source service, so you can easily grab the latest release's distributables. Simply link to your preferred flavor inside your HTML page's <head> tag:

<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/{mini-flavor}.css" />

Remember to replace {mini-flavor} with the flavor's name (e.g. mini-default or mini-default.min for the default flavor).

Method 3: Use RawGit

mini.css is also hosted on RawGit, another open-source service, so you can easily grab a specific release's distributables. Simply link to a release and your preferred flavor inside your HTML page's <head> tag:

<link rel="stylesheet" href="cdn.rawgit.com/Chalarangelo/mini.css/{release-tag}/dist/{mini-flavor}.css" />

Remember to replace {release-tag} with a release from the Releases page and {mini-flavor} with the flavor's name (e.g. mini-default or mini-default.min for the default flavor).

Method 4: Use cdnjs (preferred for older releases)

If you would rather use an older version of the framework, you should head over to cdnjs for a list of releases and flavor files supplied with them.

Flavors & customizaton

Flavors are one of the key features of mini.css, allowing you to customize your website's design and make your project stand out. We provide you with a few pre-defined flavors that might suit your needs and will help you figure out how to use the framework and create websites and apps with it.

But you can easily build you own flavors by using our flavor generator tool, which allows you to customize almost everything. Take your time and create the perfect flavo to suit your needs.

Contributing

Have you found a bug in the framework? Do you want to request a new feature or suggest a new flavor? Maybe found some documentation that is unclear or incomplete? Open an issue and we will be with you shortly.
Have you developed a new flavor and want to share it with the world? Open an issue about it, so that we can link to your repository from the framework's documentation and let the world know. We will try to keep you posted on any new releases coming, so that you can update your flavor as necessary.
Have you developed a module for the framework? Well, we don't really accept new modules right now, but if it works, we will certainly tell people that it's available. Open an issue about it and we will figure it out together.

Maintainers & contributors

The team behind mini.css is as follows:

Angelos Chalaris (@chalarangelo) - Sass archmage, project manager

Special thanks to these fine folks for helping in the development of mini.css:

@tphecca - Author of the Nord flavor
Per Harald Borgen - Introductory video creator
Rory Primrose (@roryprimrose) - Code restructure
Sandro Magi (@naasking) - Multiple suggestions, ideas, bug reports
Wade Garrett (@wad3g) - Multiple fixes for issues and bugs

License

mini.css is an open-source framework and is licensed under the MIT License.

mini.css's People

Contributors

Stargazers

Watchers

Forkers

kvivek4you pandroid jameslinus athiwatp chriscauley umarmughal adi1985s mariastervic adatapost gsdu8g9 cinco marwenhlaoui winkelor cuulee rlugojr teoharianto zachmullen mfalconi rhencke sudowork hhy5277 baskaran-r zhzhwwqq2 arthurchipdean fengweijp saintlast bigsnake1989 1qwert1 yibit dvp-css-framework sankam-nikolya marellab lly0122 semtle elfico neuroradiology meh johnfraser1 ux-ftw simplonanniversary nullnotfound kevojuice vishalp36 ducban bradder555 oliver-daniel nishigaba josvanderzalm vlashchanka mpandar darjanmilojkovic adioslabs jerry-goodboy wass88 reynaldops inquisitive-stha quantuumsnot cubic3d zorba1987 ojullien krishna2nd phirebase gitter-badger mlnsvbd onecruz pavg1 phuctk93 slouffka torerikaskildsen fermanrohmad lris vijeyyuvaraj ceyusa davidbrockmeier rad73 sgssandhu nunodotferreira micheg gnjo kapa93 gregvissing sivakumars csscheck hank-yan opensource-it mitchp bioalien creatigent taylorreece wahoonie vpribish mutebironald jannschu dizko skols themetaphysicalcrook fanyouf tutty427 rkdgusrnrlrl minsikmoon

mini.css's Issues

Utilize sticky positioning

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

Icon set for mini.css

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.

Grid reordering classes

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.

Add support for CSS custom properties

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).

Input element styling (dates and times)

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.

Close utility support for focus and active events

The close utility has only support for hover events instead of hover, focus and active. Support for :active and :focus needs to be added.

v2.0.1 (Fermion) Roadmap

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.

Changes

Move @import declarations out of _core.scss and into the flavor files.
Move mixin calls inside the flavor files, so that mixins are right below their @import.
Update documentation pages to reflect that the _core.scss file does not inclue the @import declarations and that they have been moved to the flavor files instead (customization.html & index.html).

Move imports out of _core.scss

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';

Question about class names

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.

Modal dialog causing problems

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.

TODO List

Some things that need to be done at any possible time:

A material-design module and/or flavor
Alternate grid system utilising flexbox or grid (or both as separate replacement modules)
Flavor pages as style guides
Package for NPM and Bower (if possible)
Bootstrap flavor and migration guide

Labels & Badges not displaying properly on mobile devices

Labels are somehow broken on mobile devices. At least on iOS they have not enough vertical space after line break. So they are overlapping.

Checkbox and Radio inputs inside labels

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>

Cards on module page vertically misaligned during resize

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.

File input styling

<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.

Spinner size mixin

A mixin needs to be added for the spinner module to allow for different sizes of spinner-donuts. This update will be coming later in Fermion.

Card mixins for alternate styles

Mixins need to be added in the card module for the following:

Alternate card style (changes the whole card (colors, borders etc).
Alternate card sizes (replaces large and small, adds as many sizes as the user desires).
Alternate 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.

Stick footer to the bottom of its context

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.

Fermion module restructure

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

Core will contain modules for core functionality. This functionality will be expanded from v1 to include the following:

Shell

Shell will contain auxiliary presentational elements along. Functionality and elements will be expanded from v1 to include:

Cards (functionality for generic container styles included)
Tabs (functionality for tabs and more-generic carousel component, also stacked tabs will take place of accordions and collapses)
Spinners
~~Alerts (functionality of modals using a more modern design paradigm, alerts and messages)~~ - Will be added as a partial module to contextual probably.

Question about android support? [v2]

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!

Add generic box-shadow utility

A new generic utility mixin should be added to allow box-shadows to be added to any element.

These changes will be implemented before Fermion's initial release.

Input element styling (range and color)

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.

Animated alert text is blurry in Chrome

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.

Thumbnails have no :hover styling

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.

Add customizable shadows

Due to the fact that the Fermion release is somewhat reminiscent of a material-like design style, box-shadows 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.

Use ARIA roles to designate semantic markup with behaviour

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.

Table module updates

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.

Update placeholder definitions

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.

Button groups

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.

v2.0.0 (Fermion) Roadmap

Major framework update. This update will probably launch sometime in 2017 (probably sometime Q1).

Changes

Module Restructure

Merge Base and Grid into Base.
Merge Button and Checkbox (name pending) into InputControl.
Move form and table styling to base, make default, add remaining styles in there and remove the two modules entirely. (No need to use defaults if there is already a style defined and you can always turn those off).
Merge Nav, Dropdown and Tab into one module Navigation.
Merge Progress and Spinner into Progress.
~~Restructure both Utility modules to push some styles into other modules and merge the rest into one~~.
Merge Modal and most of the Utility containers, as well as Label into Container.
Merge Carousel and Collapse into Presentation.
Complete the module restructure as specified in issue #14.

Responsiveness

Responsive pre elements.
Responsive tables.
~~Responsive media.~~ Will be added later.

Component and style changes

Add fancy styling for hr.
uncertain Add fancy sidebar (30px wide with code icon (</>) using :before) for pre code blocks.
Make contextual text work based on mark element.
Change styling to a material-like design.
~~Rebuild dropdowns from scratch.~~ - Removed dropdowns entirely.
Rebase grid on flex.

New Modules

Create component styles for checkboxes, radio buttons and switches

Other Changes

Bump to Normalize v5.0.0.
~~Rebase modal dialog's styling using panel styling.~~ - Removed modal dialogs entirely.
Drop older browser support (specifically IE8 and older).
Change navigation to be based on the nav element.
Accessibility support in demos.
~~Javascript support library.~~ - Might be added later down the line, not required for release.
~~Documentation pages by version.~~ Issue #33
Browser support graph in the style of caniuse.
Update README, update demo pages to use the v2 stylesheet instead of the commit one.

Fermion base rebuild

Tasks:

CSS tooltip

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.

v1.2.0 Roadmap

Minor update for mini.css.

Changes

New components: Checkboxes, Radio Buttons, Toggle Switches
Documentation for said components
Javascript support library project launch
Aria support in demo pages
Make tables responsive

Panel padding overwrite in demo

Panel padding (> * { padding: 10px }) overwrites most other element paddings due to specificity. This must be fixed.

v1.1.0 Roadmap

Minor update to mini.css.

New features

Spinner support (font independent, 2 variants)
Bootstrap flavor
Support for :disabled class in disabled styles (issue #8)
~~Bootstrap migration guide~~
~~Lite version of current flavors (removing some modules and styles probably)~~
Support for :hover styling in thumbnails (issue #10)

Bug fixes

Disabled buttons not behaving properly (issue #7)
Support for close utility :active and :focus (issue #9 )

Other changes

Code cleanup and optimization (might remove some excessive styling in some modules)
Spinner documentation in both modules pages, menu links, front page links
~~Changes to the way menus and dropdowns show in flavor pages and module demos~~

Checkbox alt-style

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.

Button disabled styles not working

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.

v1.0.0 Roadmap

[irrelevant]

Progress element transition

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.

Generalize input groups

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".

Breaking changes and legacy browser support in Fermion

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:

Use of <mark> for contextual background text and labels, dropped some mixins and classes from older versions. No contextual foreground text exists as of Fermion.
Use of <progress> instead of custom <div>-based progress system.
Use of <header>, <nav> and <footer> instead of <div>-based navigation system.
The new styling and responsiveness of <table> and <form> will most likely break support for older versions of the framework and drop support for some browsers.
Transition to flexbox grid. Breaks support for legacy browsers.
Support for many older container classes is broken, due to the transition to cards.
Collapse, accordion, carousel and tabs are not supported as seen in v1.0. All of these components have been rebased on top of a larger, more versatile flexbox-based component, the new tab component which provides most of the previous functionality in one module.
Use of CSS3 selectors (e.g. [foo^="bar"]) and :not([foo="bar"]) etc). Breaks support for legacy browsers.
Use of the 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.
Use of 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:

IE 8- will not be supported at all.
IE 9 will be partially supported (grid and card systems are not compatible, manual changes are needed).
IE 10 will be partially supported (grid and card systems are not compatible, adding the -ms- prefix whenever needed manually is required and changing the syntax to 2012 spec).
IE 11 will be mostly supported (bugs with grid system have been reported, card system has minor incompatibilities).
Edge (all versions) is almost fully supported (some manual changes might be required, some minor problems with card system).
Firefox 21- will partially supported (grid and card systems are not compatible, prefixing with -moz- has to be done manually for the old spec).
Firefox 22+ will be supported (versions before 28 might require some manual changes).
Chrome 20- is mostly supported (some manual changes might be required).
Chrome 21+ is almost fully supported (older versions might require some manual changes).
Safari 6- is mostly supported (some fixes and resets have been discarded but should work reasonably well, manual changes may be required).
Safari 7+ will be supported.
Opera (all versions) is almost fully supported (older versions might require some manual changes).
Android 3- is partially supported (manual changes may be required).
Android 4+ is supported.
Mobile browsers are well supported (based on the consistency with desktop browsers, few manual changes may be required but no problems have been reported).
Opera Mini is not actively supported (some features will not work, use at your own risk, no fixes and workarounds will be supplied).

Note: This list will be updated as more features are developed.

Update wiki to v2

The wiki's documentation currently reflects v1. It should be updated eventually to reflect v2 (Fermion).

Fluid card columns do not respect grid boundaries

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.

Support for :disabled

Support for the :disabled pseudo-class is needed wherever there are disabled styles.

Modal (popup) dialog style need

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.

Progress element customization

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.

chalarangelo / mini.css Goto Github PK

mini.css's Introduction

mini.css

Setup & usage

Method 1: Use a package manager (recommended)

Method 2: Use GitCDN

Method 3: Use RawGit

Method 4: Use cdnjs (preferred for older releases)

Flavors & customizaton

Contributing

Maintainers & contributors

License

mini.css's People

Contributors

Stargazers

Watchers

Forkers

mini.css's Issues

Changes

Core

Shell

Changes

Module Restructure

Responsiveness

Component and style changes

New Modules

Other Changes

Tasks:

Changes

New features

Bug fixes

Other changes

Recommend Projects

Recommend Topics

Recommend Org

Jobs