ummahusla / potatocss Goto Github PK

I think it will be worth to clean the repository and delete all unused files. Might be worth to remove gulp, less and leave a repository with examples and CSS, minified CSS and SASS.

Create a 12 column responsive grid system.

Breakpoints:

• Mobile
• Tablet
• Desktop

Classes:

• Container
• Row
• Column

• Create contribute.md.
• Add a basic explanation how to contribute to this repository using hotfix or feature branches.
• Add links to issues.

• Global
• Grid
• Utilities
• Typography
• Forms
• Buttons

Panels with several backgrounds, borders, border-radius, etc.

Noticed several things, I might be worth to improve.

• Change pre background colour to #ebebeb because on some of the monitors you will hardly notice any difference between the #fff background and #f7f7f7.
• Add styling for <kbd> HTML element.
• Add more examples to http://potatocss.com/ docs
  • Inline-code
  • Block-code (already have the case for it)
  • Example with kbd

Ghost buttons atm have a white background, I guess it should be transparent

At the moment we have the folder with examples. Based on that it might be a good idea to create a landing page to see the framework in action.

• Buttons sizing
• Buttons colors

Content looks very squeezed.

• General font styles
• Headers

Buttons looks too small on mobile devices. Increase font-size and padding.

• Text-align left, center, right, justify
• Float left, right
• Un-bullets lists
• Font weight light, normal, bold
• Add more classes here

At the moment, PotatoCSS has next utility classes:

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-justify { text-align: justify; }
.float-left { float: left; }
.float-right { float: right; }
.font-light { font-weight: lighter; }
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

• Headers
• Content

I've noticed that the default ghost button class is button, while button-full is for buttons with a solid background-color. I think button-full will not work with small and large sub-classes, so this is a potential issue if someone is going to use them.

jsFiddle with this issue

Following up PR #54, a Gulp pipeline would make SCSS/SASS and LESS compilation easier.

Should the use of the following, for example, be implemented?

.row:before,
.row:after {
    display: table;
    clear: both;
    content: "";
}

Completed in #58.

🪲 Make a framework testing in order to find out all the cross-browser bugs.

• form
• label
• all main input types (text, checkboxes, select, etc)
• textarea
• pre/post fixes

• Table headers
• Table rows
• Table columns
• Add an example to potatocss.com

I've noticed a weird bit when we add <hr> between sections at http://potatocss.com. There is a big gap on the right because .row has width: 96% but the content is not centred. I assume adding margin: 0 auto and decreasing hr with to 92% should fix it.

• Description
• Installation
• Usage
• Contributing
• Credits
• License

Use PotatoCSS framework to create a several examples pages as an example.

Increase font-size