maincss - v0.3.0

MicroCSS framework based on flexbox: small, modern, and flexible!

Responsive, Modern, Minimal, MicroCSS, Flexible, Less Code, Borderless...

Philosophy of Structure: [ Less code ]

Philosophy of Design: [ Borderless ]

Test Template features: https://morfyum.github.io/maincss/

Example for CSS deploy:

find ./ -name "*.css" -exec cat {} \; > productcss.css

Use from GitHub:

<link rel="stylesheet" href="https://morfyum.github.io/maincss/maincss.css">
<link rel="stylesheet" href="https://morfyum.github.io/maincss/models/extras.css">
<link rel="stylesheet" href="https://morfyum.github.io/maincss/models/768p.css">
<link rel="stylesheet" href="https://morfyum.github.io/maincss/models/1280p.css">
<link rel="stylesheet" href="https://morfyum.github.io/maincss/models/2160p.css">
<link rel="stylesheet" type="text/css" href="self.css"> <!-- Your own .css --!>

Framework elements

✅ stable | 🚧 Not recommended to use | ✨ new | 🧪 changed/testing

## TEST TOOLS
    .testbox                : ✅ Orange highlighting

## FUNCTIONALITY
    .basebox                : ✅ The main building elemnt
    .row                    : ✅ Modifi basebox to an independent row
    .col                    : 🚧 Equal with row, but outdated and not maintained
    .fixbox                 : 🚧 Not maintained class with fix 1100px width on FHD display
    .vertical-scroll        : ✅ Put div with this class into `basebox` container
    .horizontal-scroll      : ✨ Put div with this class into `basebox` container
    .hide-on-mobile         : 🧪 Hide elements under 768px width devices

    .button                 : ✅ Borderless Button element

    .col-1                  : 🧪 Independet row. Same as a basebox + row
    .col-2                  : 🧪 Two column
    .col-3                  : 🧪 Three column
    .col-4                  : 🧪 Four column
    .col-5                  : 🧪 Five column
    .col-6                  : 🧪 Six column

## COLORS
    .bg1                    : ✨ Primary Background color
    .fg1                    : ✨ Primary Foreground color
    .bg2                    : ✨ Secondary Background color
    .fg2                    : ✨ Secondary Foreground color

## DESIGN
    .gap                    : ✨ Flexbox gap: `row-gap: 30px`, `column-gap: 30px`    

    .center                 : ✅ Horizontal center
    .full-center            : ✅ Horizontal and vertical center for any children items

    .padding                : ✅ --padding: 0.5rem
    .padding-soft           : ✅ --padding-soft: 3px
    .padding-hard           : ✅ --padding-hard: 13px

    .margin                 : ✅ --margin: 0.5rem
    .margin-soft            : ✅ --margin-soft: 3px
    .margin-hard            : ✅ --margin-hard: 1rem

    .border-radius          : ✨ --border-radius: 13px
    .border-radius-soft     : ✨ --border-radius-soft: 3px
    .border-radius-hard     : ✨ --border-radius-hard: 1rem
    .br                     : ✨ Equal with .border-radius
    .br-soft                : ✨ Equal with .border-radius-soft
    .br-hard                : ✨ Equal with .border-radius-hard

    .text-left              : ✅ With align-item property
    .text-center            : ✅ With align-item property, justify-content
    .text-justify           : ✅ With align-item property
    .text-right             : ✅ With align-item property

    .item-top               : ✅ With align-item property
    .item-center            : ✅ With align-item property
    .item-bottom            : ✅ With align-item property

## MODIFIED HTML ELEMENTS  
    h1, h2, h3,             : ✨ width: 100%, padding: var(--padding-hard)
    h4, h5, h6		
    p                       : ✅ text-align: justify
    fieldset                : 🧬 border: 1px solid
    input                   : 🧪 Default <input> tag changed for better integration for design
    img                     : 🧪 Add: width: 100%, max-height: 100%, object-fit: cover, object-position: top center
	                         Background -repeat: no-repeat, -position: top center, -size: cover  
    hr                      : ✅ display: block, width: 90%, boder: 1px, solid, var(--default-orange), height: 0px  
    footer                  : ✅ HTML footer element modifiees
    a:link                  : ✅ text-decoration: none, color: var(default-font)
    a:visited               : ✅ color: var(--default-font)
    a:hover                 : ✅ color: var(--default-orange)
    a:active                : ✅ color: var(--default-font)
    
## LEGACY 🚧:
    .checkbox-labe                              : 🧪+🧬
    .checbox-label input                        : 🧪+🧬
    .checkmark                                  : 🧪+🧬
    .radiomark                                  : 🧪+🧬
    .checkbox-label:hover input ~ .checkmark    : 🧪+🧬
    .checkbox-label:hover input ~ .radiomark    : 🧪+🧬

<head> - </head>

Set character Encoding:

<meta charset="UTF-8">

Improve mobile view

<meta name="viewport" content="width=device-width, initial-scale=1.0">

BASIC CLASSES (maincss.css)

It is the basis of everything. 'maincss' contain two basic, important container class. You can build everything with basebox. Basebox contain the most important css parameters. Add basebox tag to all other class.

.basebox

There is only one other base label: fixbox. Fixbox width is fix: 1100px on all display, except one: on mobile view, width is 100%

.fixbox

display: flex bug -> flexbox bug, not css issue.

Currently webkit based browsers show wrong my dropdown menu, because I fix a flexbox bug on Chrome/Firefox.

Dropdown menu (.header-flex-element) with display: block property works as excepted...

.header-flex-dropdown -> This element has extra margin: 26px, 0, 0, 0 because flexbox ignore text content inside the flex elements. <- BUG in blink/spidermonkey?
This element is a display: none element, and get a .show poroperty (add display: flex) for show content.

.header-flex-element {
  display: flex; 
}

.show {
  display: flex;
}

.header-flex-dropdown {
  display: none;
  margin: 26px 0 0 0; 
}

.header-flex-element -> This is an flex element (display: flex), because my css based on flexbox and all element flexbox element.
By default, flexbox ignore font-size and/or text in div on Chrome and Firefox.

This is the problem for which required 26px margin-top in .header-flex-dropdown

On webkit browsers, show this extra 26 pixel. <- BUG in webkit?

When you modify display: flex to display: block 26 pixel margin no longer needed.
On a webkit browser flex work without issues, and this 26 pixel is extra space between element and showed menu.

morfyum / maincss Goto Github PK

maincss's Introduction

maincss - v0.3.0

MicroCSS framework based on flexbox: small, modern, and flexible!

Example for CSS deploy:

Use from GitHub:

Framework elements

<head> - </head>

BASIC CLASSES (maincss.css)

maincss's People

Contributors

Stargazers

Watchers

maincss's Issues

Feature Request: Automatic system color them

Feature Request: full-screen message

display: flex bug -> flexbox bug, not css issue.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent