Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Meleeman01 authored Aug 18, 2020
1 parent 7a2a856 commit 0e97cd3
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
# mflx version 1.1.3

##A Basic, highly customizeable, no-frills micro flexbox framework for building layouts!
<h1>A Basic, highly customizeable, no-frills micro flexbox framework for building layouts!</h1>
<h2>npm install mflex --save</h2>
<img src="https://github.com/Meleeman01/mflx/blob/master/test.html%23.png" alt="framework test" title="a test of the framework :D" />

##npm install mflex --save

##Usage

<h2>Usage</h2>

basically this is a barebones wrapper for flexbox and makes it more conveniant to style items and create grid layouts
```
Expand Down Expand Up @@ -36,7 +37,7 @@ also you can do columns! syntax uses "is" like in bulma, and you can say anywher
```
offsets are not included yet and they work with the class flx() and without. you can create invisible divs to create the desired offset for the time being.

##Buttons there are buttons similar to bulma syntax
<h2>Buttons</h2> there are buttons similar to bulma syntax
```
<div class="flx(wrap) middle space-around is-6">
<button class="btn(small) is-info">A button</button>
Expand All @@ -47,7 +48,7 @@ offsets are not included yet and they work with the class flx() and without. you
```
availible classes are is-primary, is-white, is-black, is-secondary, is-warning, is-info, is-error, is-success, is-round. primary, secondary, black and white are availible as accessible classes for your conveniance. so far the behavior is consistent accross button, submit and anchor tags.

##Typography basic styles are being used, but the scss stylesheet layouts some recommendations for designing a framework, the styles used here are just default fonts every browser has, there are a maximum of 3 fonts which you can add many as you like ofcourse but 3 is generally recommended when designing. It is recommended you include a seperate fonts.scss when building or you can use the @font-face() rule in the top of this style sheet if you prefer.
<h2>Typography</h2> basic styles are being used, but the scss stylesheet layouts some recommendations for designing a framework, the styles used here are just default fonts every browser has, there are a maximum of 3 fonts which you can add many as you like ofcourse but 3 is generally recommended when designing. It is recommended you include a seperate fonts.scss when building or you can use the @font-face() rule in the top of this style sheet if you prefer.

##Utilities
<h2>Utilities</h2>
there isn't much but i put in a new class called padme which has it's own css variable setting, it will create a default padding for your flx() containers and you can customize each dimension with 4 numbers. inputs also use the primary color on focus. but thats about it.

0 comments on commit 0e97cd3

Please sign in to comment.