jmjuanes/siimple

The minimal and themeable CSS toolkit for flat and clean designs

siimple's Issues

Some important points

Hi the Siimple Community,

When I look your repository, website has few important points missing. For example, example templates for different usage situation (like blog, e-commerce, form etc.).

I'm trying to write a example blog page using only Siimple.

I don't know, but what are you think for display: flex; because I need to use it during center all of posts. Maybe, you have some very useful class that I didn't see your documentation.

Also, I found a typo for documentation. It was Jumbotron example. You just wrote </div<.

Thank you

Please validate CSS

https://jigsaw.w3.org/css-validator/

siimple.css - Errors

36  a:hover     Value Error : cursor hand is not a cursor value : hand
129     .btn    Property user-select doesn't exist : none
132     .btn    Property text-cursor doesn't exist : pointer
176     .btn-outline    Property user-select doesn't exist : none
179     .btn-outline    Property text-cursor doesn't exist : pointer
308     .form-input[type="submit"], .form-input[type="button"]  Property user-select doesn't exist : none
311     .form-input[type="submit"], .form-input[type="button"]  Property text-cursor doesn't exist : pointer

siimple.css - Warnings
Line No. 8 can be ignored.

8       Imported style sheets are not checked in direct input and file upload modes
124         Property -webkit-touch-callout is an unknown vendor extension
125         Property -webkit-user-select is an unknown vendor extension
126         Property -khtml-user-select is an unknown vendor extension
127         Property -moz-user-select is an unknown vendor extension
128         Property -ms-user-select is an unknown vendor extension
171         Property -webkit-touch-callout is an unknown vendor extension
172         Property -webkit-user-select is an unknown vendor extension
173         Property -khtml-user-select is an unknown vendor extension
174         Property -moz-user-select is an unknown vendor extension
175         Property -ms-user-select is an unknown vendor extension
294     .form-input[disabled]   Same color for background-color and border-top-color
294     .form-input[disabled]   Same color for background-color and border-right-color
294     .form-input[disabled]   Same color for background-color and border-bottom-color
294     .form-input[disabled]   Same color for background-color and border-left-color
303         Property -webkit-touch-callout is an unknown vendor extension
304         Property -webkit-user-select is an unknown vendor extension
305         Property -khtml-user-select is an unknown vendor extension
306         Property -moz-user-select is an unknown vendor extension
307         Property -ms-user-select is an unknown vendor extension

siimple-grid-col-hide

I was thinking there should be a class just to hide the col irrespective of the size of the viewing device.

Do you think I should write a hide class for siimple-grid-col-hide (that would be my first official contribution to the codebase)

Minor changes for v3.1.0

Minor changes to do:

Typography

• Change font-size to 13px in siimple-pre.
• Change font-size to 13px in siimple-code.
• Change padding value of siimple-pre to 15px.

Elements

• Add siimple-alert-title class to create a title in the alert element.

Layout

• Change the siimple-menu-item color to navy-3 or navy-4.
• Change the siimple-menu-item height to 30px. Under consideration.
• Change the siimple-breadcrumb height to 30px. Under consideration.

Form

• siimple-form-field: change margin-bottom from 16px to 15px.
• siimple-form-title: change margin-bottom from 10px to 20px.

Error in _grid.scss with Jekyll

I'm trying to use Siimple's SCSS files in my Jekyll site. I'm importing siimple.scss but I get the following error when I try to run Jekyll:

  Conversion error: Jekyll::Converters::Scss encountered an error while converting '/css/style.scss':
                    Invalid CSS after " width: #{$w}%": expected expression (e.g. 1px, bold), was "; display: inli..." on line 41
jekyll 3.1.2 | Error:  Invalid CSS after "    width: #{$w}%": expected expression (e.g. 1px, bold), was "; display: inli..." on line 41

It seems to be having a problem with line 41 of _grid.scss:

    width: #{$w}%; display: inline-block; vertical-align: top; float: left; padding: 1%;

Browser support ?

Hello, hope your are having a great day, i am thinking to use this framework for my next project. I am just wondering about browser support. Which browsers this framework supports ?

Thank you

Reference site

Do you use in reference site “btn-outline” the new button type and not using like a style.

How can we use?

btn btn-outline btn-small OR btn-outline btn-small (no-select doesn't work)

Change containers sizes for mobile?

I know that you can set responsive grid like

<div class="siimple-grid-col siimple-grid-col--5">my content</div>

but what if in case i want only on mobiles it to be 12

<div class="siimple-grid-col siimple-grid-col--12">My content</div>

is there way to do it?

Import OpenSans

Would it be possible to @import OpenSans so that the stylesheet does not fail when this font is not installed on a user's machine? Adding this line at the top of siimple.css solved this issue for me:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300');

This means I can drop siimple.css into any simple page and not need to change anything else for it to take effect. Of course, it is also possible to do this separately in the header of the page itself, but it seems much cleaner for the stylesheet to be self-contained.

Big buttons

Add siimple-btn--big modifier to create a bigger button.

• Add siimple-btn--big modifier to scss/elements/_btn.scss.
• Add to documentation.

Social Media

I am loving this framework. At the same time I really need this plartform to be active on social networks. Especially for the fact that SiimpleCSS is on twitter

We need quick response to questions asked about the framework. I would be willing to learn more on how to use this awesome tool and answer questions on social networks on how to use specific features. Siimple needs a quick response time on its social media page just as it is lite on the browser

I would be willing to be one of the individuals who end up helping with the social media thingy.

I am also new to Git, so I would be learning a lot from you. This would be the first project I would be willing to contribute to...

Move siimple docs

Move siimple documentation to the siimple repository.

Icon

I was thinking there should be a minimal icon set!

Change margin-bottom attribute in headings

I think that the margin-bottom attribute must have a fixed value in all headings ( h1, ..., h6) relative to the heading font size, for example 0.5em.

Add radio button

Add a radio-button form element called siimple-radio.

A simple way to replace siimple colors

Is your feature request related to a problem? Please describe.
My problem is that I would like to be able to use my own colors

Describe the solution you'd like
A simple way to replace siimple's default values

Describe alternatives you've considered
The first obvious solution was to overwrite all colours and background for each class, but it can feel like you are rewriting the all siimple CSS.
Secondly, we could rename all the legacy colours and palette colours from the variables file but it will mean we will have the redo the operation at each package update.

Additional context
Thanks for your help. Really great library, like the fact that this is CSS only! ;)

Collaborate with the siimple project!

Hi all!

First, thanks all that are using siimple. I started the siimple project two years ago to be used in my Ph.D. thesis, but now it is used by a lot of people and is published in a lot of reviews about CSS frameworks. I really appreciate it, thanks! 😄

I published the 2.0.0 version two months ago, with a big redesign. But there is a lot of changes/new features to implement, and also there are new modules in development:

• simple-layout: a set of layout elements (like navbar, sidebar, footer, and more!) that follows the siimple style. Currently in development!

• siimple-design: the siimple design specification.

• siimple-icons: a minimal set of SVG icons.

And also there are things to improve:

• website: the current website is only temporal until the siimple-layout framework is released. Then, I think that this framework must be used in the website.

• logo: we need a new logo for this new version! I am looking for ideas.

What do you think? Anyone is interested in collaborate with the @siimple project? New ideas are also welcome!

We can use this issue for discussion!

Thanks!

font-size unit

Any plan for Rubygems?

This issue will be a feature request

I am using Ruby all the time. When I add Siimple, it makes hard to follow versions. I though maybe Rubygems will be good for that situation?

Thank you

Missing "px" in navbar-item navbar-link padding-left CDN

Describe the bug
Hosted CSS is missing "px" after 15, in the padding-left of the selector .siimple-navbar-item,.siimple-navbar-link

To Reproduce
Use published host link: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/siimple.min.css">
Apply siimple-navbar-item class to a element inside a siimple-navbar div element.

Expected behavior
padding-left: 15px;

Screenshots or Project link

Desktop (please complete the following information):

• I guess everywhere

Additional context
I don't have much idea, just started messing around with siimple. But I don't have any other css and F12 tells me where is the problem.

Add dropdown component

Add new .siimple-dropdown experimental component to display toggleable dropdown links with the appearance of a list.

Here is an example code of a dropdown element:

<div class="siimple-dropdown siimple-dropdown--visible">
    <div class="siimple-btn siimple-btn--primary siimple-dropdown-toggle">
        Dropdown button
    </div>
    <div class="siimple-dropdown-content">
        <div class="siimple-dropdown-item">Item 1</div>
        <div class="siimple-dropdown-item">Item 2</div>
        <div class="siimple-dropdown-item">Item 3</div>
    </div>
</div>

The siimple-dropdown component should wrap two components:

• A button, link, or another element that will display the dropdown (using JavaScript) for example when the user clicks on it. Additionally, this element might contain the class .siimple-dropdown-toggle to display an arrorw on the right side of the element.
• A container for all dropdown items, with the class .siimple-dropdown-content. By default the container won't be visible.

The .siimple-dropdown-content element can contain the following elements:

• .siimple-dropdown-item to display a link inside the container.
• .siimple-dropdown-separator to display a separator between two items.

The .siimple-dropdown-content will be displayed if a .siimple-dropdown--visible class is added to the parent .siimple-dropdown element.

A lot of todos for siimplicity

Let's discuss these topics

• Use sass-lint for static code analyze
  • We need to know which style guide we are using. I found AirBnB CSS/Sass style guide
• Do we need wiki for the main project? I asked because open for edit to everyone.
• I think, we can use default project panel and we can easily collaborate between issues or PRs. Also, it is easy to see who is available for next issue or PRs for review.
• Documentation site needs search box and version options.
• Use dist folder instead under the main repository. My idea is upload dist folder with release. Or we can use both.

/cc @jmjuanes

Add paragraph lead modifier

Add siimple-paragraph--lead class to highlight a paragraph.

.siimple-paragraph--lead {
    line-height: 30px;
    font-size: 20px;
}

Tasks:

• Add siimple-paragraph--lead class modifier.
• Add siimple-lead documentation.

Fix table border size

Cells of the siimple-table component have different border widths when using siimple-table--border modifier.

Without siimple-table--border:

With siimple-table--border:

Solved:

Related issues:

• Fixed cells border-width when the siimple-table--border modifier is not used: 1dd362d
• Fixed cells border-width when the siimple-table--border modifier is used: 41fb887

Add .navbar component

Hello, thank you for this small CSS framework!

I want to know: is there a way to add a simple navbar (like that but more simpler, of course: http://bootsnipp.com/snippets/featured/navbar-search-add-on-bs-3 ) in Siimple CSS?

Or is there a way to have a invisible navbar menu which can collaspe for mobile?

Thank you.

Checkbox colors

I missed different color styles for the checkbox ui element so i added them in my css file.

.siimple-checkbox--navy input[type=checkbox]:checked + label {
background-color: #57607c;;
}

.siimple-checkbox--green input[type=checkbox]:checked + label {
background-color: #1add9f;;
}

.siimple-checkbox--teal input[type=checkbox]:checked + label {
background-color: #18d2ba;;
}

.siimple-checkbox--blue input[type=checkbox]:checked + label {
background-color: #4894f0;
}

.siimple-checkbox--purple input[type=checkbox]:checked + label {
background-color: #b490f5;
}

.siimple-checkbox--pink input[type=checkbox]:checked + label {
background-color: #f45b93;
}

.siimple-checkbox--red input[type=checkbox]:checked + label {
background-color: #ff1a4f;
}

.siimple-checkbox--orange input[type=checkbox]:checked + label {
background-color: #ff8463;
}

.siimple-checkbox--yellow input[type=checkbox]:checked + label {
background-color: #ffbf00;
}

.siimple-checkbox--grey input[type=checkbox]:checked + label {
background-color: #ebf2fa;
}

.siimple-checkbox--white input[type=checkbox]:checked + label {
background-color: #fff;
}

same "issue" for the switch element

Add fluid button

Add a new buttons attribute to set the button width to 100% and remove the padding-left and padding-right values. The class will be siimple-btn--fluid.

Add siimple-table--fixed modifier to table component

Add siimple-table--fixed modifier to table component to automatically divide equally the width of the columns across the table, regardless of content inside the cells.

.siimple-table--fixed {
    table-layout: fixed;
}

Reference: https://www.w3schools.com/csSref/pr_tab_table-layout.asp

Tasks:

• Add siimple-table--fixed class to scss/components/_table.scss.
• Add to documentation.

Bug with the switch on Chrome using Windows 10

The switch inner element does not totally center vertically. This issue is happening using Google Chrome in Windows 10. Have a quick look at it:

Change default font-size and line-height

• Change the default font-size value to 16px
• Change the default line-height value to 24px.

scss/_all.scss importing not exiting files

Hi!

I'm using siimple as a dependency of my npm project. I use parcel as bundler and after adding @import 'siimple/scss/all'; to my main sass file, the bundler fails with:

🚨  /Users/julian/project/src/index.scss:22:1: File to import not found or unreadable: ./typography/_list.scss.
Parent style sheet: /Users/julian/project/node_modules/siimple/scss/_all.scss
    at options.error (/Users/julian/project/node_modules/node-sass/lib/index.js:291:26)

It looks like files that doesn't exist are being imported and files that do exist, aren't 🤷‍♂️

node v9.5.0
npm v5.7.1
siimple v^3.1.0-beta

Add siimple-close deprecation notice in docs

siimple-close element is deprecated and will be removed in a future major relase. Add a warning message in documentation.

Add card element

A card is a content container that can be customized with a header or a footer. The main siimple-card class should be a wrapper that can contain the following elements:

• siimple-card-header: the card header.
• siimple-card-body: the card body.
• siimple-card-footer: the card footer.

Fix check/uncheck on switch element

Switch only changes to checked/unchecked state if user clicks on the circle button, not in the background of the switch. It is because the <label> only applies to the circle button.

Solution: remove the <div> tag inside the switch and add the background as a pseudo class of the <label> tag.

• Update scss/form/_switch.scss.
• Update documentation.

Change default font to Roboto

Chante the siimple default font to Roboto:

//_variables.scss

$siimple-default-font-url: "https://fonts.googleapis.com/css?family=Roboto:400,700";
$siimple-default-font-size: 15px !default;
$siimple-default-font-weight: 400 !default;
$siimple-default-font-family: "Roboto", sans-serif !default;

Tasks:

• Change default font in scss/_variables.scss.
• Change the documentation.

Some changes for repository folder structure

The repository folder structure needs some improvement. Those are just suggestion, so maybe you aren't agree with me.

• Remove CODE_OF_CONDUCT and CONTRIBUTING.md into .github folder because it makes noisy.
• Change the name of license file to LICENSE because it is just text file not markdown.
• Issue and Feature templates are missing.

If you want, I can work a PR for 2, 3 and 4.

Thank you.

Fix bug in grid

Inserting a grid adds 10px at the left side and the right side of the grid.

• Fix siimple-grid-row.
• Update documentation.

Add sorting indicator to table header

Add a table header modifier to display a sorting indicator.

• Add siimple-table-cell--sortable, siimple-table-cell--asc and siimple-table-cell--desc class-names.
• Add to documentation.

A small typo I noticed

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to the 'Develop' section, to the 'Setup Environment' subsection of your README file.
2. Look at the last line of the section: We use Make to automazie the building of siimple.
3. The word 'automazie' should be 'automatize' or 'automize' (a derivative term for the previous). Just caught that little typo. 😄

Expected behavior
Proper spelling. Nothing crucial.

Screenshots or Project link

Download and install Node.js on your computer.
Clone this repository: git clone https://github.com/siimple/siimple.git.
Navigate to the cloned repository folder, and run npm install to download all the dependencies listed in package.json.
We use Make to automazie the building of siimple.

Desktop (please complete the following information):
n/a

Additional context
n/a

Responsive Website

The Website for the doc's etc. isn't responsive at all, you should change that.

Change the margin of the list titles

The margin-bottom of the list titles should be removed. They are currently 5px. Just a style thing.

Add sass/scss support

Add this or other css framework support.

Button group

Add siimple-btn-group class to wrap a collection of siimple-btn elements.

• Add siimple-btn-group class to scss/elements/_btn.scss.
• Add to documentation.

Having Trouble with Safari

Describe the bug
Website I'm building on my localhost does not render correctly using Safari on my imac (MacOs High Sierra 10.13.6 ). Works fine on chrome.

To Reproduce
Building a website using the templates downloaded from the website; i.e. siimple.html and siimple.css.

Expected behavior
Fonts and other effects from the css do not appear in the safari browser (fine in chrome).

Screenshots or Project link

Desktop (please complete the following information):

• MacOs High Sierra 10.13.6
• Browser Safari
• Version 11.1.2

Sizing tale cells

I want to sizing table cells finely.
For example, add classes siimple-table-cell--1~siimple-table-cell--12 to sizing table cells.

Padding on fluid input makes element too wide

Describe the bug
I created a small page using a form with a fluid input. An example can be seen here:

https://codepen.io/anon/pen/LBOBGP

I expected the fluid input to be as wide as the outer container. But it is wider.

When I remove the 10px padding on each side of the input it fits.

Am I doing something wrong? Or is this a bug?

To Reproduce
See codepen: https://codepen.io/anon/pen/LBOBGP

Expected behavior
Input as wide as outer container.

Screenshots or Project link
https://codepen.io/anon/pen/LBOBGP

Desktop (please complete the following information):

• iOs, Chrome and Firefox
• [email protected]

Small Buttons

First off I just want to say thank you for your beautiful CSS Framework. Well Done!

I have a suggestion regarding buttons. In my opinion the default buttons are the perfect size for a everyday button. It would however be nice to be able to have a option for a smaller button as well.

<div class="siimple-btn siimple-btn-small siimple-btn--purple">My Button</div>

.siimple-btn.siimple-btn-small {
padding: 0px 10px;
font-size: 12px;
line-height: 20px;
}

Missing class for hr tag

Hi,

When I use <hr> tag, it shows with what browser default is. In my case, just solid black line.
May you add hr class like siimple-line?

Thank you.

hosted on jsdelivr

I like this library so much I submitted it to jsdelivr.com (pull request). I'm not sure how long their system needs from merge to production, but hopefully not too long.

https://www.jsdelivr.com/projects/siimple should be the URL when it's live.

Change background color of input, select and textarea elements

Change the default background-color property of the siimple-input, siimple-select and the siimple-textarea elements.