diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 000000000..0981d3f77 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,74 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +nationality, personal appearance, race, religion, or sexual identity and +orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or +advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at [siimple@juanes.xyz](mailto:siimple@juanes.xyz). All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..08cc4e94f --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,23 @@ +# Contributing to siimple + +First, thanks a lot for taking the time to contribute to the **siimple** project! :blush::tada: + +Here you have the guidelines that you must read before start contributing to **siimple**. + +### Code of Conduct + +You must read and follow the [code of conduct](./CODE_OF_CONDUCT.md) of **siimple**. + +### Questions or problems + +We are happy to help you if you have any problem or question using **siimple**. Please, send your problem to the [Google Group](https://groups.google.com/d/forum/siimple) discussion list. + +### Issues or bugs + +If you want to report a bug or issue, please open a new [issue here](https://github.com/siimple/siimple/issues) and include as many details as possible with your report. Adding code or screenshots are very helpful. + +Also, you can help us and publish a new [pull request](https://github.com/siimple/siimple/pulls) with the fix of the bug or issue. + +### New features + +You can request a new feature by [submitting a new issue](https://github.com/siimple/siimple/issues), or implement your new feature and [submit a new pull request](https://github.com/siimple/siimple/pulls) to the main repository. Keep in mind that the new feature must follow the style of **siimple**. diff --git a/README.md b/README.md index ca3068a01..f77eeb94b 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,131 @@ -[![Siimple](http://siimple.juanes.xyz/img/siimple.png)](http://siimple.juanes.xyz/) - -# Siimple +# siimple [![npm](https://img.shields.io/npm/v/siimple.svg?style=flat-square)](https://www.npmjs.com/package/siimple) [![npm](https://img.shields.io/npm/dt/siimple.svg?style=flat-square)](https://www.npmjs.com/package/siimple) [![devDependency Status](https://david-dm.org/siimple/siimple/dev-status.svg?style=flat-square)](https://david-dm.org/siimple/siimple#info=devDependencies) +[![npm](https://img.shields.io/npm/l/siimple.svg?style=flat-square)](https://github.com/siimpl/siimple) ## About -**Siimple** is a minimal and light CSS framework for flat and clean designs created by [Josemi Juanes](http://jm.juanes.xyz), and built using SASS/SCSS. The result is a clean starting point for your front-end developments with a 5Kb minimized version. - -NOTE: **Siimple** wasn't created for competing with Bootstrap. +**siimple** is a minimal and light CSS framework for flat and clean designs built using SASS/SCSS. The result is a clean starting point for your front-end developments with a 5Kb minimized version. ## Getting started -There are three ways to download **Siimple**: +First, install **siimple** in your project using one of the following methods: -- Using [npm](http://npmjs.org/package/siimple): `npm install siimple`. -- Using [bower](http://bower.io): `bower install siimple`. -- Download the latest release: [https://github.com/siimple/siimple/releases](https://github.com/siimple/siimple/releases). -- Clone the repo: `git clone https://github.com/siimple/siimple.git`. +### Using npm -For more information about **Siimple**, please visit the [Siimple homepage](http://siimple.juanes.xyz) and read the [getting started](http://siimple.juanes.xyz/getting-started) guide or the [reference](http://siimple.juanes.xyz/reference). +Install the latest version from [npm](http://npmjs.org/package/siimple): + +``` +npm install --save siimple +``` -## Build +### Using bower -By default, you have a compiled version of **Siimple** in the `dist/` folder. Nevertheless, you can build your local copy of **Siimple** in two steps. First, install the dev-dependencies using **npm**: +Install the latest version from [bower](http://bower.io): -```sh -npm install +``` +bower install siimple +``` + +### Clone the git repository + +You can also clone the git repository hosted on [GitHub](https://github.com/siimple/siimple): + +``` +git clone https://github.com/siimple/siimple.git ``` -Then, build the **Siimple** source code (placed in `src/`) using **Gulp**: +## Usage -```sh -gulp default +The main `css` file is located in the `dist/` folder. Include it on every `HTML` file of your project by adding the following tag: + +``` + ``` -This will generate a compiled version in `dist/` folder. +Or you can use the hosted version on [jsDelivr](https://www.jsdelivr.com/projects/siimple): + +``` + +``` + +Guides and reference are published in [siimple.juanes.xyz/docs](http://siimple.juanes.xyz/docs). Take a look and start creating your web page! + +## Using the SCSS/SASS mixins + +You can use the SASS/SCSS mixins located in the `scss/` folder. You need also the **siimple-colors**. + +#### Install using npm + +This is the easy way. Simply run the following command: + +``` +npm install siimple +``` + +This will download **siimple** and **siimple-colors** in the `node_modules` folder. You can then include all the mixins adding the following line to your `.scss` file: + +``` +@import "./node_modules/siimple/scss/_mixins.scss"; +``` + +#### Install using bower + +Run the following command: + +``` +bower install siimple siimple-colors +``` + +And then include all the mixins adding the following line to your `.scss` file: + +``` +@import "./bower_components/siimple/scss/_mixins.scss"; +``` + +## Build siimple + +First, install [gulp](http://gulpjs.com) globally: + +``` +npm install -g gulp +``` + +Then, clone this repository: + +``` +git clone https://github.com/siimple/siimple.git +``` + +and also clone the **siimple-colors** repository at the same parent folder: + +``` +git clone https://github.com/siimple/siimple-colors.git +``` + +Now, `cd` to the **siimple** repository and install all the dependencies using `npm`: + +``` +cd ./siimple +npm install +``` + +Use `gulp` to compile the SCSS files and generate the `.css` files in the `dist/` folder running the following commands + +``` +gulp build:scss +gulp minimize +``` ## Contribute -You can contribute with **Siimple** installing it and submitting issues and pull requests :) +We appreciate all contributions to the **siimple** project and help make it better! Please, read the [contributing guidelines](./CONTRIBUTING.md) before starting your contribution. + ## License -**Siimple** is under the [MIT](LICENSE) license. +**siimple** is under the [MIT](LICENSE) license. © Josemi Juanes. diff --git a/dist/siimple.css b/dist/siimple.css index 08bbe9670..379489bb4 100644 --- a/dist/siimple.css +++ b/dist/siimple.css @@ -1,521 +1,439 @@ /** * siimple - Minimal CSS framework for flat and clean designs. - * @version v1.3.7 - * @link https://siimple.juanes.xyz/ + * @version v2.0.0 + * @link http://siimple.juanes.xyz/ * @license MIT - */ +**/ + + @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); +.siimple-color--navy { + color: #57607c; } -@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300"); -.heart:after { - content: "\2764"; - color: #f45660; } +.siimple-color--green { + color: #1add9f; } -body { - color: #526475; - margin: 0px; - padding: 0px; - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - background-color: #ffffff; } +.siimple-color--teal { + color: #18d2ba; } -blockquote { - border-left: 4px solid #6a7e95; - padding-left: 20px; - padding-right: 5px; - padding-bottom: 5px; - padding-top: 5px; } +.siimple-color--blue { + color: #4894f0; } -a { - color: #09a0f6; - font-weight: normal; - text-decoration: none; - transition: all 0.3s; } - a:hover { - text-decoration: underline; - cursor: pointer; } +.siimple-color--purple { + color: #b490f5; } -p { - line-height: 28px; - margin-bottom: 20px; - margin-top: 0px; - display: block; } +.siimple-color--pink { + color: #f45b93; } -ul, ol { - line-height: 28px; - margin-bottom: 16px; - margin-top: 0px; } - ul li, ol li { - line-height: 28px; } +.siimple-color--red { + color: #ff1a4f; } -small { - color: #6a7e95; - font-size: 14px; } +.siimple-color--orange { + color: #ff8463; } -h1, h2, h3, h4, h5, h6 { - font-weight: 300; - color: #526475; - display: block; - margin-bottom: 20px; - margin-top: 0px; } +.siimple-color--yellow { + color: #ffbf00; } -h1 { - font-size: 36px; - line-height: 50px; } +.siimple-color--grey { + color: #ebf2fa; } -h2 { - font-size: 32px; - line-height: 46px; } +.siimple-color--white { + color: #ffffff; } -h3 { - font-size: 28px; - line-height: 42px; } +.siimple-background--navy, .siimple-bg--navy { + background-color: #57607c; } -h4 { - font-size: 24px; - line-height: 38px; } +.siimple-background--green, .siimple-bg--green { + background-color: #1add9f; } -h5 { - font-size: 20px; - line-height: 34px; } +.siimple-background--teal, .siimple-bg--teal { + background-color: #18d2ba; } -h6 { - font-size: 16px; - line-height: 30px; } +.siimple-background--blue, .siimple-bg--blue { + background-color: #4894f0; } -.alert { - display: block; - width: calc(100% - 30px); - font-weight: 300; - font-size: 16px; - text-align: left; - padding-left: 14px; - padding-right: 14px; - padding-top: 16px; - padding-bottom: 16px; - margin-top: 0px; - margin-bottom: 20px; - border-radius: 5px; - border-width: 1px; - border-style: solid; - background-color: #E1F5FE; - color: #03A9F4; - border-color: #03A9F4; } - .alert a { - text-decoration: none; - font-weight: normal; } - .alert-error { - color: #D32F2F; - background-color: #FFEBEE; - border-color: #F44336; } - .alert-warning { - background-color: #FFF8E1; - color: #FF8F00; - border-color: #FFC107; } - .alert-done { - background-color: #E8F5E9; - color: #388E3C; - border-color: #4CAF50; } - -.btn { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - -webkit-touch-callout: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - text-align: center; - text-decoration: none !important; - line-height: 28px; - margin-left: 5px; - margin-right: 5px; - margin-top: 5px; - margin-bottom: 20px; - padding-left: 25px; - padding-right: 25px; - padding-top: 5px; - padding-bottom: 5px; - display: inline-block; - cursor: pointer; - border-radius: 5px; - transition: all 0.3s; - color: #ffffff; - background-color: #09a0f6; - border: 0px; } - .btn:hover { - text-decoration: none; } - .btn:hover { - opacity: 0.8; } - .btn-small { - font-size: 14px !important; - line-height: 20px !important; - padding-top: 4px !important; - padding-bottom: 4px !important; - padding-left: 15px !important; - padding-right: 15px !important; } - .btn-big { - font-size: 22px !important; - line-height: 34px !important; - padding-top: 8px !important; - padding-bottom: 8px !important; - padding-left: 30px !important; - padding-right: 30px !important; } - .btn-outline { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - -webkit-touch-callout: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - text-align: center; - text-decoration: none !important; - line-height: 28px; - margin-left: 5px; - margin-right: 5px; - margin-top: 5px; - margin-bottom: 20px; - padding-left: 25px; - padding-right: 25px; - padding-top: 5px; - padding-bottom: 5px; - display: inline-block; - cursor: pointer; - border-radius: 5px; - transition: all 0.3s; - color: #09a0f6; - background-color: transparent; - border: 1px solid #09a0f6; } - .btn-outline:hover { - text-decoration: none; } - .btn-outline:hover { - color: #ffffff; - background-color: #09a0f6; } - -code { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - border-radius: 5px; - background-color: #f1f5fa; - color: #09a0f6; } +.siimple-background--purple, .siimple-bg--purple { + background-color: #b490f5; } -code { - padding-left: 6px; - padding-right: 6px; } +.siimple-background--pink, .siimple-bg--pink { + background-color: #f45b93; } -pre { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - display: block; - width: calc(100% - 30px); - padding: 14px; - line-height: 28px; } +.siimple-background--red, .siimple-bg--red { + background-color: #ff1a4f; } -pre { - margin-bottom: 20px; - border-radius: 5px; - background-color: #f1f5fa; - color: #526475; } +.siimple-background--orange, .siimple-bg--orange { + background-color: #ff8463; } -pre { - overflow-x: auto; } +.siimple-background--yellow, .siimple-bg--yellow { + background-color: #ffbf00; } -.form-input[type="text"], .form-input[type="password"], .form-input[type="number"], .form-input[type="email"] { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - display: inline-block; - width: 100%; - transition: all 0.3s; - color: #526475; - padding: 10px; - margin-top: 0px; - margin-bottom: 20px; - margin-left: 5px; - margin-right: 5px; - border: 1px solid #d1e1e8; - border-radius: 5px; - outline: 0px; - box-sizing: border-box; - line-height: 40px; - height: 40px; } - .form-input[type="text"]:focus, .form-input[type="password"]:focus, .form-input[type="number"]:focus, .form-input[type="email"]:focus { - border: 1px solid #09a0f6; } - -.form-input[type="date"] { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - display: inline-block; - width: 100%; - transition: all 0.3s; - color: #526475; - padding: 10px; - margin-top: 0px; - margin-bottom: 20px; - margin-left: 5px; - margin-right: 5px; - border: 1px solid #d1e1e8; - border-radius: 5px; - outline: 0px; - box-sizing: border-box; - width: auto !important; - height: 40px; } - .form-input[type="date"]:focus { - border: 1px solid #09a0f6; } - -.form-input[disabled] { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - display: inline-block; - width: 100%; - transition: all 0.3s; - color: #526475; - padding: 10px; - margin-top: 0px; - margin-bottom: 20px; - margin-left: 5px; - margin-right: 5px; - border: 1px solid #d1e1e8; - border-radius: 5px; - outline: 0px; - box-sizing: border-box; - cursor: not-allowed; - background-color: #d1e1e8; - height: 40px; } - .form-input[disabled]:focus { - border: 1px solid #09a0f6; } - -.form-input[type="submit"], .form-input[type="button"] { - font-family: 'Open Sans'; - font-size: 16px; - font-weight: 300; - -webkit-touch-callout: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - text-align: center; - text-decoration: none !important; - line-height: 28px; - margin-left: 5px; - margin-right: 5px; - margin-top: 5px; - margin-bottom: 20px; - padding-left: 25px; - padding-right: 25px; - padding-top: 5px; - padding-bottom: 5px; - display: inline-block; - cursor: pointer; - border-radius: 5px; - transition: all 0.3s; - color: #ffffff; - background-color: #09a0f6; - border: 0px; } - .form-input[type="submit"]:hover, .form-input[type="button"]:hover { - text-decoration: none; } - .form-input[type="submit"]:hover, .form-input[type="button"]:hover { - opacity: 0.8; } +.siimple-background--grey, .siimple-bg--grey { + background-color: #ebf2fa; } + +.siimple-background--white, .siimple-bg--white { + background-color: #ffffff; } -.form-select { - font-family: 'Open Sans'; +.siimple-blockquote { + display: block; + font-family: 'Montserrat', sans-serif; + color: #c3d7ef; font-size: 16px; - font-weight: 300; - display: inline-block; - width: 100%; - transition: all 0.3s; - color: #526475; - padding: 10px; + border-left: 4px solid #c3d7ef; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 10px; margin-top: 0px; - margin-bottom: 20px; - margin-left: 5px; - margin-right: 5px; - border: 1px solid #d1e1e8; + margin-bottom: 10px; } + +.siimple-code { + color: #57607c; + text-decoration: none; + font-size: 15px; + background-color: #ebf2fa; border-radius: 5px; - outline: 0px; - box-sizing: border-box; - padding-top: 6px; - height: 40px; - background-color: #ffffff; } - .form-select:focus { - border: 1px solid #09a0f6; } + padding-top: 2px; + padding-bottom: 2px; + padding-left: 5px; + padding-right: 5px; } -.form-textarea { - font-family: 'Open Sans'; - font-size: 16px; +.siimple-pre { + display: block; + overflow-x: auto; + width: calc(100% - 20px); + color: #57607c; + line-height: 26px; font-weight: 300; - display: inline-block; - width: 100%; - transition: all 0.3s; - color: #526475; + font-size: 15px; + background-color: #ebf2fa; + border-radius: 5px; padding: 10px; margin-top: 0px; - margin-bottom: 20px; - margin-left: 5px; - margin-right: 5px; - border: 1px solid #d1e1e8; - border-radius: 5px; - outline: 0px; - box-sizing: border-box; - resize: vertical; } - .form-textarea:focus { - border: 1px solid #09a0f6; } + margin-bottom: 10px; + margin-left: 0px; + margin-right: 0px; } -.form-auto { - width: auto !important; } +.siimple-h1, .siimple-heading1 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 45px; + margin-bottom: 20px; } -.grid { +.siimple-h2, .siimple-heading2 { display: block; - width: 960px; - margin-left: auto; - margin-right: auto; - min-height: 40px; } - @media (max-width: 960px) { - .grid { - width: 94%; } } - .grid-fluid { - width: 100%; } + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 35px; + margin-bottom: 20px; } -.row { - display: inline-block; - width: 100%; +.siimple-h3, .siimple-heading3 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; margin-left: 0px; - margin-right: 0px; } - .row:after { - content: " "; - clear: both; - display: table; - line-height: 0; } - -.col-1 { - width: 6.33%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } + margin-right: 0px; + padding: 0px; + font-size: 25px; + margin-bottom: 18px; } -.col-2 { - width: 14.66%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } +.siimple-h4, .siimple-heading4 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 22px; + margin-bottom: 16px; } -.col-3 { - width: 22.99%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } +.siimple-h5, .siimple-heading5 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 20px; + margin-bottom: 14px; } -.col-4 { - width: 31.33%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } +.siimple-h6, .siimple-heading6 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 18px; + margin-bottom: 12px; } -.col-5 { - width: 39.66%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } +.siimple-small { + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; } -.col-6 { - width: 47.99%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } +.siimple-p, .siimple-paragraph { + display: block; + font-family: 'Montserrat', sans-serif; + line-height: 26px; + margin-bottom: 10px; + margin-top: 0px; } -.col-7 { - width: 56.33%; - display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } +.siimple-a, .siimple-link { + font-family: 'Montserrat', sans-serif; + color: #57607c; + font-weight: bold; + text-decoration: underline; + transition: all 0.3s; } + .siimple-a:hover, .siimple-link:hover { + text-decoration: underline; + cursor: pointer; } -.col-8 { - width: 64.66%; +.siimple-alert { + display: block; + width: calc(100% - 30px); + font-family: 'Montserrat', sans-serif; + color: #57607c; + line-height: 20px; + border-radius: 5px; + background-color: #ebf2fa; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 15px; + padding-right: 15px; + margin-top: 10px; + margin-bottom: 10px; } + .siimple-alert--warning { + background-color: #ffbf00 !important; + color: #ffffff !important; } + .siimple-alert--error { + background-color: #ff1a4f !important; + color: #ffffff !important; } + .siimple-alert--done { + background-color: #1add9f !important; + color: #ffffff !important; } + .siimple-alert--info { + background-color: #4894f0 !important; + color: #ffffff !important; } + +.siimple-btn { display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } - -.col-9 { - width: 72.99%; + height: 30px; + transition: opacity 0.3s; + line-height: 30px; + text-align: center; + text-decoration: none; + cursor: pointer; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: bold; + padding-left: 10px; + padding-right: 10px; + border-radius: 5px; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + .siimple-btn:hover { + opacity: 0.8; + text-decoration: none; } + .siimple-btn--disabled { + background-color: #c3d7ef !important; + color: #57607c !important; + cursor: not-allowed !important; } + .siimple-btn--navy { + background-color: #57607c; + color: #ffffff; } + .siimple-btn--green { + background-color: #1add9f; + color: #ffffff; } + .siimple-btn--teal { + background-color: #18d2ba; + color: #ffffff; } + .siimple-btn--blue { + background-color: #4894f0; + color: #ffffff; } + .siimple-btn--purple { + background-color: #b490f5; + color: #ffffff; } + .siimple-btn--pink { + background-color: #f45b93; + color: #ffffff; } + .siimple-btn--red { + background-color: #ff1a4f; + color: #ffffff; } + .siimple-btn--orange { + background-color: #ff8463; + color: #ffffff; } + .siimple-btn--yellow { + background-color: #ffbf00; + color: #ffffff; } + .siimple-btn--grey { + background-color: #ebf2fa; + color: #57607c; } + .siimple-btn--white { + background-color: #ffffff; + color: #57607c; } + +.siimple-checkbox { display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } - -.col-10 { - width: 81.33%; + position: relative; + width: 16px; + height: 16px; + margin-left: 10px; + margin-right: 10px; + margin-top: 7px; + margin-bottom: 7px; } + .siimple-checkbox label { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + transition: all 0.3s; + border-radius: 2px; + width: 16px; + height: 16px; + background: #ebf2fa; } + .siimple-checkbox label:after { + opacity: 0.2; + content: ''; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + transition: all 0.3s; + position: absolute; + top: 3px; + left: 3px; + width: 8px; + height: 4px; + background: transparent; + border: 2px solid #57607c; + border-top: none; + border-right: none; } + .siimple-checkbox label:hover::after { + opacity: 0.5; } + .siimple-checkbox input[type=checkbox] { + visibility: hidden; } + .siimple-checkbox input[type=checkbox]:checked + label:after { + opacity: 1; + border-color: #ffffff; } + .siimple-checkbox input[type=checkbox]:checked + label { + background-color: #1add9f; } + +.siimple-input, .siimple-select { display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } + height: 30px; + line-height: 30px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; + padding-left: 10px; + padding-right: 10px; + padding-top: 0px; + padding-bottom: 0px; + border: 0px; + border-radius: 5px; + outline: 0px; + background-color: #ebf2fa; } + .siimple-input--fluid, .siimple-select--fluid { + width: 100%; } -.col-11 { - width: 89.66%; +.siimple-textarea { display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } + line-height: 20px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; + padding-left: 10px; + padding-right: 10px; + padding-top: 10px; + padding-bottom: 10px; + margin-top: 0px; + margin-bottom: 10px; + border: 0px; + border-radius: 5px; + outline: 0px; + background-color: #ebf2fa; } + .siimple-textarea--fluid { + width: 100%; } -.col-12 { - width: 97.99%; +.siimple-label { display: inline-block; - vertical-align: top; - float: left; - padding: 1%; } - -@media (max-width: 400px) { - .col-1 { - width: 98%; } - .col-2 { - width: 98%; } - .col-3 { - width: 98%; } - .col-4 { - width: 98%; } - .col-5 { - width: 98%; } - .col-6 { - width: 98%; } - .col-7 { - width: 98%; } - .col-8 { - width: 98%; } - .col-9 { - width: 98%; } - .col-10 { - width: 98%; } - .col-11 { - width: 98%; } - .col-12 { - width: 98%; } } - -.table { - display: table; + height: 30px; + line-height: 30px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; + font-weight: bold; + padding-left: 0px; + padding-right: 10px; + padding-top: 0px; + padding-bottom: 0px; } + +.siimple-grid { + display: block; width: 100%; - border-width: 0px; - border-collapse: collapse; - font-weight: 300; - color: #526475; - margin-top: 0px; - margin-bottom: 20px; } - .table thead tr td { - font-weight: normal; - border-bottom: 2px solid #d1e1e8; - background-color: #f6f8fa; } - .table tr td { - border-bottom: 1px solid #d1e1e8; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; } + min-height: 40px; + margin-left: auto; + margin-right: auto; } + @media (max-width: 960px) { + .siimple-grid { + width: 94%; } } + .siimple-grid-row { + display: inline-block; + width: 100%; + margin-left: 0px; + margin-right: 0px; } + .siimple-grid-row:after { + content: " "; + clear: both; + display: table; + line-height: 0; } + .siimple-grid-col { + display: inline-block; + vertical-align: top; + float: left; + padding: 1%; } + .siimple-grid-col--1 { + width: 6.33%; } + .siimple-grid-col--2 { + width: 14.66%; } + .siimple-grid-col--3 { + width: 22.99%; } + .siimple-grid-col--4 { + width: 31.33%; } + .siimple-grid-col--5 { + width: 39.66%; } + .siimple-grid-col--6 { + width: 47.99%; } + .siimple-grid-col--7 { + width: 56.33%; } + .siimple-grid-col--8 { + width: 64.66%; } + .siimple-grid-col--9 { + width: 72.99%; } + .siimple-grid-col--10 { + width: 81.33%; } + .siimple-grid-col--11 { + width: 89.66%; } + .siimple-grid-col--12 { + width: 97.99%; } + @media (max-width: 400px) { + .siimple-grid-col { + width: 98% !important; } } diff --git a/dist/siimple.min.css b/dist/siimple.min.css index a52f02609..9dbfb4a07 100644 --- a/dist/siimple.min.css +++ b/dist/siimple.min.css @@ -1,8 +1,8 @@ /** * siimple - Minimal CSS framework for flat and clean designs. - * @version v1.3.7 - * @link https://siimple.juanes.xyz/ + * @version v2.0.0 + * @link http://siimple.juanes.xyz/ * @license MIT - */ - -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);ol,ol li,p,ul,ul li{line-height:28px}.alert,pre{width:calc(100% - 30px)}.alert,.btn{border-radius:5px}.heart:after{content:"\2764";color:#f45660}body,h1,h2,h3,h4,h5,h6{color:#526475}body{margin:0;padding:0;font-family:'Open Sans';font-size:16px;font-weight:300;background-color:#fff}.alert a,a{text-decoration:none;font-weight:400}blockquote{border-left:4px solid #6a7e95;padding:5px 5px 5px 20px}a{color:#09a0f6;transition:all .3s}a:hover{text-decoration:underline;cursor:pointer}p{margin-bottom:20px;margin-top:0;display:block}ol,ul{margin-bottom:16px;margin-top:0}.alert,h1,h2,h3,h4,h5,h6{font-weight:300;margin-top:0;margin-bottom:20px;display:block}small{color:#6a7e95;font-size:14px}h1{font-size:36px;line-height:50px}h2{font-size:32px;line-height:46px}h3{font-size:28px;line-height:42px}h4{font-size:24px;line-height:38px}h5{font-size:20px;line-height:34px}.alert,.btn,h6{font-size:16px}h6{line-height:30px}.alert{text-align:left;border-width:1px;border-style:solid;background-color:#E1F5FE;color:#03A9F4;border-color:#03A9F4;padding:16px 14px;padding:16px 14px;padding:16px 14px}.btn,.btn-outline{font-family:'Open Sans';font-weight:300;display:inline-block;transition:all .3s;-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;text-align:center;cursor:pointer;margin:5px 5px 20px}.alert-error{color:#D32F2F;background-color:#FFEBEE;border-color:#F44336}.alert-warning{background-color:#FFF8E1;color:#FF8F00;border-color:#FFC107}.alert-done{background-color:#E8F5E9;color:#388E3C;border-color:#4CAF50}.btn{text-decoration:none!important;line-height:28px;color:#fff;background-color:#09a0f6;border:0;padding:5px 25px}.btn:hover{text-decoration:none;opacity:.8}.btn-small{font-size:14px!important;line-height:20px!important;padding:4px 15px!important}.btn-big{font-size:22px!important;line-height:34px!important;padding:8px 30px!important}.btn-outline,pre{line-height:28px}.btn-outline{font-size:16px;text-decoration:none!important;border-radius:5px;color:#09a0f6;background-color:transparent;border:1px solid #09a0f6;padding:5px 25px}.btn-outline:hover{text-decoration:none;color:#fff;background-color:#09a0f6}code,pre{font-family:'Open Sans';font-size:16px;font-weight:300;border-radius:5px;background-color:#f1f5fa}code{color:#09a0f6;padding-left:6px;padding-right:6px}pre{display:block;padding:14px;margin-bottom:20px;color:#526475;overflow-x:auto}.form-input[disabled],.form-input[type=text],.form-input[type=password],.form-input[type=number],.form-input[type=email],.form-input[type=date]{color:#526475;padding:10px;outline:0;box-sizing:border-box;margin:0 5px 20px;font-family:'Open Sans';font-size:16px;font-weight:300;display:inline-block;transition:all .3s;height:40px}.form-input[type=text],.form-input[type=password],.form-input[type=number],.form-input[type=email]{width:100%;border:1px solid #d1e1e8;border-radius:5px;line-height:40px}.form-input[type=text]:focus,.form-input[type=password]:focus,.form-input[type=number]:focus,.form-input[type=email]:focus{border:1px solid #09a0f6}.form-input[type=date]{border:1px solid #d1e1e8;border-radius:5px;width:auto!important}.form-input[type=date]:focus{border:1px solid #09a0f6}.form-input[disabled]{width:100%;border:1px solid #d1e1e8;border-radius:5px;cursor:not-allowed;background-color:#d1e1e8}.form-input[disabled]:focus{border:1px solid #09a0f6}.form-input[type=submit],.form-input[type=button]{font-family:'Open Sans';font-size:16px;font-weight:300;-webkit-touch-callout:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;text-align:center;text-decoration:none!important;line-height:28px;display:inline-block;cursor:pointer;border-radius:5px;transition:all .3s;color:#fff;background-color:#09a0f6;border:0;margin:5px 5px 20px;padding:5px 25px}.form-select,.form-textarea{font-family:'Open Sans';font-size:16px;display:inline-block;width:100%;transition:all .3s;outline:0;box-sizing:border-box;margin:0 5px 20px;font-weight:300;color:#526475}.form-input[type=submit]:hover,.form-input[type=button]:hover{text-decoration:none;opacity:.8}.form-select{padding:6px 10px 10px;border:1px solid #d1e1e8;border-radius:5px;height:40px;background-color:#fff}.form-select:focus{border:1px solid #09a0f6}.form-textarea{padding:10px;border:1px solid #d1e1e8;border-radius:5px;resize:vertical}.form-textarea:focus{border:1px solid #09a0f6}.form-auto{width:auto!important}.grid{display:block;width:960px;margin-left:auto;margin-right:auto;min-height:40px}@media (max-width:960px){.grid{width:94%}}.grid-fluid,.row{width:100%}.row{display:inline-block;margin-left:0;margin-right:0}.row:after{content:" ";clear:both;display:table;line-height:0}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-7,.col-8,.col-9{display:inline-block;vertical-align:top;float:left;padding:1%}.col-1{width:6.33%}.col-2{width:14.66%}.col-3{width:22.99%}.col-4{width:31.33%}.col-5{width:39.66%}.col-6{width:47.99%;display:inline-block;vertical-align:top;float:left;padding:1%}.col-7{width:56.33%}.col-8{width:64.66%}.col-9{width:72.99%}.col-10{width:81.33%}.col-11{width:89.66%}.col-12{width:97.99%}@media (max-width:400px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:98%}}.table{display:table;width:100%;border-width:0;border-collapse:collapse;font-weight:300;color:#526475;margin-top:0;margin-bottom:20px}.table thead tr td{font-weight:400;border-bottom:2px solid #d1e1e8;background-color:#f6f8fa}.table tr td{border-bottom:1px solid #d1e1e8;padding-top:10px;padding-bottom:10px;padding-left:10px} \ No newline at end of file +**/ + + @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);.siimple-color--navy{color:#57607c}.siimple-color--green{color:#1add9f}.siimple-color--teal{color:#18d2ba}.siimple-color--blue{color:#4894f0}.siimple-color--purple{color:#b490f5}.siimple-color--pink{color:#f45b93}.siimple-color--red{color:#ff1a4f}.siimple-color--orange{color:#ff8463}.siimple-color--yellow{color:#ffbf00}.siimple-color--grey{color:#ebf2fa}.siimple-color--white{color:#fff}.siimple-background--navy,.siimple-bg--navy{background-color:#57607c}.siimple-background--green,.siimple-bg--green{background-color:#1add9f}.siimple-background--teal,.siimple-bg--teal{background-color:#18d2ba}.siimple-background--blue,.siimple-bg--blue{background-color:#4894f0}.siimple-background--purple,.siimple-bg--purple{background-color:#b490f5}.siimple-background--pink,.siimple-bg--pink{background-color:#f45b93}.siimple-background--red,.siimple-bg--red{background-color:#ff1a4f}.siimple-background--orange,.siimple-bg--orange{background-color:#ff8463}.siimple-background--yellow,.siimple-bg--yellow{background-color:#ffbf00}.siimple-background--grey,.siimple-bg--grey{background-color:#ebf2fa}.siimple-background--white,.siimple-bg--white{background-color:#fff}.siimple-blockquote{display:block;font-family:Montserrat,sans-serif;color:#c3d7ef;font-size:16px;border-left:4px solid #c3d7ef;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:10px;margin-top:0;margin-bottom:10px}.siimple-code{color:#57607c;text-decoration:none;font-size:15px;background-color:#ebf2fa;border-radius:5px;padding-top:2px;padding-bottom:2px;padding-left:5px;padding-right:5px}.siimple-pre{display:block;overflow-x:auto;width:calc(100% - 20px);color:#57607c;line-height:26px;font-weight:300;font-size:15px;background-color:#ebf2fa;border-radius:5px;padding:10px;margin-top:0;margin-bottom:10px;margin-left:0;margin-right:0}.siimple-h1,.siimple-heading1{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:45px;margin-bottom:20px}.siimple-h2,.siimple-heading2{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:35px;margin-bottom:20px}.siimple-h3,.siimple-heading3{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:25px;margin-bottom:18px}.siimple-h4,.siimple-heading4{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:22px;margin-bottom:16px}.siimple-h5,.siimple-heading5{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:20px;margin-bottom:14px}.siimple-h6,.siimple-heading6{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:18px;margin-bottom:12px}.siimple-small{font-family:Montserrat,sans-serif;font-size:14px;color:#57607c}.siimple-p,.siimple-paragraph{display:block;font-family:Montserrat,sans-serif;line-height:26px;margin-bottom:10px;margin-top:0}.siimple-a,.siimple-link{font-family:Montserrat,sans-serif;color:#57607c;font-weight:700;text-decoration:underline;transition:all .3s}.siimple-a:hover,.siimple-link:hover{text-decoration:underline;cursor:pointer}.siimple-alert{display:block;width:calc(100% - 30px);font-family:Montserrat,sans-serif;color:#57607c;line-height:20px;border-radius:5px;background-color:#ebf2fa;padding-top:15px;padding-bottom:15px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:10px}.siimple-alert--warning{background-color:#ffbf00!important;color:#fff!important}.siimple-alert--error{background-color:#ff1a4f!important;color:#fff!important}.siimple-alert--done{background-color:#1add9f!important;color:#fff!important}.siimple-alert--info{background-color:#4894f0!important;color:#fff!important}.siimple-btn{display:inline-block;height:30px;transition:opacity .3s;line-height:30px;text-align:center;text-decoration:none;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding-left:10px;padding-right:10px;border-radius:5px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.siimple-btn:hover{opacity:.8;text-decoration:none}.siimple-btn--disabled{background-color:#c3d7ef!important;color:#57607c!important;cursor:not-allowed!important}.siimple-btn--navy{background-color:#57607c;color:#fff}.siimple-btn--green{background-color:#1add9f;color:#fff}.siimple-btn--teal{background-color:#18d2ba;color:#fff}.siimple-btn--blue{background-color:#4894f0;color:#fff}.siimple-btn--purple{background-color:#b490f5;color:#fff}.siimple-btn--pink{background-color:#f45b93;color:#fff}.siimple-btn--red{background-color:#ff1a4f;color:#fff}.siimple-btn--orange{background-color:#ff8463;color:#fff}.siimple-btn--yellow{background-color:#ffbf00;color:#fff}.siimple-btn--grey{background-color:#ebf2fa;color:#57607c}.siimple-btn--white{background-color:#fff;color:#57607c}.siimple-checkbox{display:inline-block;position:relative;width:16px;height:16px;margin-left:10px;margin-right:10px;margin-top:7px;margin-bottom:7px}.siimple-checkbox label{cursor:pointer;position:absolute;top:0;left:0;transition:all .3s;border-radius:2px;width:16px;height:16px;background:#ebf2fa}.siimple-checkbox label:after{opacity:.2;content:'';-ms-transform:rotate(-45deg);transform:rotate(-45deg);transition:all .3s;position:absolute;top:3px;left:3px;width:8px;height:4px;background:0 0;border:2px solid #57607c;border-top:none;border-right:none}.siimple-checkbox label:hover::after{opacity:.5}.siimple-checkbox input[type=checkbox]{visibility:hidden}.siimple-checkbox input[type=checkbox]:checked+label:after{opacity:1;border-color:#fff}.siimple-checkbox input[type=checkbox]:checked+label{background-color:#1add9f}.siimple-input,.siimple-select{display:inline-block;height:30px;line-height:30px;font-family:Montserrat,sans-serif;font-size:14px;color:#57607c;padding-left:10px;padding-right:10px;padding-top:0;padding-bottom:0;border:0;border-radius:5px;outline:0;background-color:#ebf2fa}.siimple-input--fluid,.siimple-select--fluid{width:100%}.siimple-textarea{display:inline-block;line-height:20px;font-family:Montserrat,sans-serif;font-size:14px;color:#57607c;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:10px;border:0;border-radius:5px;outline:0;background-color:#ebf2fa}.siimple-textarea--fluid{width:100%}.siimple-label{display:inline-block;height:30px;line-height:30px;font-family:Montserrat,sans-serif;font-size:14px;color:#57607c;font-weight:700;padding-left:0;padding-right:10px;padding-top:0;padding-bottom:0}.siimple-grid{display:block;width:100%;min-height:40px;margin-left:auto;margin-right:auto}@media (max-width:960px){.siimple-grid{width:94%}}.siimple-grid-row{display:inline-block;width:100%;margin-left:0;margin-right:0}.siimple-grid-row:after{content:" ";clear:both;display:table;line-height:0}.siimple-grid-col{display:inline-block;vertical-align:top;float:left;padding:1%}.siimple-grid-col--1{width:6.33%}.siimple-grid-col--2{width:14.66%}.siimple-grid-col--3{width:22.99%}.siimple-grid-col--4{width:31.33%}.siimple-grid-col--5{width:39.66%}.siimple-grid-col--6{width:47.99%}.siimple-grid-col--7{width:56.33%}.siimple-grid-col--8{width:64.66%}.siimple-grid-col--9{width:72.99%}.siimple-grid-col--10{width:81.33%}.siimple-grid-col--11{width:89.66%}.siimple-grid-col--12{width:97.99%}@media (max-width:400px){.siimple-grid-col{width:98%!important}} \ No newline at end of file diff --git a/dist/siimple.nofont.css b/dist/siimple.nofont.css new file mode 100644 index 000000000..be5e6e099 --- /dev/null +++ b/dist/siimple.nofont.css @@ -0,0 +1,438 @@ +/** + * siimple - Minimal CSS framework for flat and clean designs. + * @version v2.0.0 + * @link http://siimple.juanes.xyz/ + * @license MIT +**/ + + .siimple-color--navy { + color: #57607c; } + +.siimple-color--green { + color: #1add9f; } + +.siimple-color--teal { + color: #18d2ba; } + +.siimple-color--blue { + color: #4894f0; } + +.siimple-color--purple { + color: #b490f5; } + +.siimple-color--pink { + color: #f45b93; } + +.siimple-color--red { + color: #ff1a4f; } + +.siimple-color--orange { + color: #ff8463; } + +.siimple-color--yellow { + color: #ffbf00; } + +.siimple-color--grey { + color: #ebf2fa; } + +.siimple-color--white { + color: #ffffff; } + +.siimple-background--navy, .siimple-bg--navy { + background-color: #57607c; } + +.siimple-background--green, .siimple-bg--green { + background-color: #1add9f; } + +.siimple-background--teal, .siimple-bg--teal { + background-color: #18d2ba; } + +.siimple-background--blue, .siimple-bg--blue { + background-color: #4894f0; } + +.siimple-background--purple, .siimple-bg--purple { + background-color: #b490f5; } + +.siimple-background--pink, .siimple-bg--pink { + background-color: #f45b93; } + +.siimple-background--red, .siimple-bg--red { + background-color: #ff1a4f; } + +.siimple-background--orange, .siimple-bg--orange { + background-color: #ff8463; } + +.siimple-background--yellow, .siimple-bg--yellow { + background-color: #ffbf00; } + +.siimple-background--grey, .siimple-bg--grey { + background-color: #ebf2fa; } + +.siimple-background--white, .siimple-bg--white { + background-color: #ffffff; } + +.siimple-blockquote { + display: block; + font-family: 'Montserrat', sans-serif; + color: #c3d7ef; + font-size: 16px; + border-left: 4px solid #c3d7ef; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 20px; + padding-right: 10px; + margin-top: 0px; + margin-bottom: 10px; } + +.siimple-code { + color: #57607c; + text-decoration: none; + font-size: 15px; + background-color: #ebf2fa; + border-radius: 5px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 5px; + padding-right: 5px; } + +.siimple-pre { + display: block; + overflow-x: auto; + width: calc(100% - 20px); + color: #57607c; + line-height: 26px; + font-weight: 300; + font-size: 15px; + background-color: #ebf2fa; + border-radius: 5px; + padding: 10px; + margin-top: 0px; + margin-bottom: 10px; + margin-left: 0px; + margin-right: 0px; } + +.siimple-h1, .siimple-heading1 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 45px; + margin-bottom: 20px; } + +.siimple-h2, .siimple-heading2 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 35px; + margin-bottom: 20px; } + +.siimple-h3, .siimple-heading3 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 25px; + margin-bottom: 18px; } + +.siimple-h4, .siimple-heading4 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 22px; + margin-bottom: 16px; } + +.siimple-h5, .siimple-heading5 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 20px; + margin-bottom: 14px; } + +.siimple-h6, .siimple-heading6 { + display: block; + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: #57607c; + margin-top: 20px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + font-size: 18px; + margin-bottom: 12px; } + +.siimple-small { + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; } + +.siimple-p, .siimple-paragraph { + display: block; + font-family: 'Montserrat', sans-serif; + line-height: 26px; + margin-bottom: 10px; + margin-top: 0px; } + +.siimple-a, .siimple-link { + font-family: 'Montserrat', sans-serif; + color: #57607c; + font-weight: bold; + text-decoration: underline; + transition: all 0.3s; } + .siimple-a:hover, .siimple-link:hover { + text-decoration: underline; + cursor: pointer; } + +.siimple-alert { + display: block; + width: calc(100% - 30px); + font-family: 'Montserrat', sans-serif; + color: #57607c; + line-height: 20px; + border-radius: 5px; + background-color: #ebf2fa; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 15px; + padding-right: 15px; + margin-top: 10px; + margin-bottom: 10px; } + .siimple-alert--warning { + background-color: #ffbf00 !important; + color: #ffffff !important; } + .siimple-alert--error { + background-color: #ff1a4f !important; + color: #ffffff !important; } + .siimple-alert--done { + background-color: #1add9f !important; + color: #ffffff !important; } + .siimple-alert--info { + background-color: #4894f0 !important; + color: #ffffff !important; } + +.siimple-btn { + display: inline-block; + height: 30px; + transition: opacity 0.3s; + line-height: 30px; + text-align: center; + text-decoration: none; + cursor: pointer; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: bold; + padding-left: 10px; + padding-right: 10px; + border-radius: 5px; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } + .siimple-btn:hover { + opacity: 0.8; + text-decoration: none; } + .siimple-btn--disabled { + background-color: #c3d7ef !important; + color: #57607c !important; + cursor: not-allowed !important; } + .siimple-btn--navy { + background-color: #57607c; + color: #ffffff; } + .siimple-btn--green { + background-color: #1add9f; + color: #ffffff; } + .siimple-btn--teal { + background-color: #18d2ba; + color: #ffffff; } + .siimple-btn--blue { + background-color: #4894f0; + color: #ffffff; } + .siimple-btn--purple { + background-color: #b490f5; + color: #ffffff; } + .siimple-btn--pink { + background-color: #f45b93; + color: #ffffff; } + .siimple-btn--red { + background-color: #ff1a4f; + color: #ffffff; } + .siimple-btn--orange { + background-color: #ff8463; + color: #ffffff; } + .siimple-btn--yellow { + background-color: #ffbf00; + color: #ffffff; } + .siimple-btn--grey { + background-color: #ebf2fa; + color: #57607c; } + .siimple-btn--white { + background-color: #ffffff; + color: #57607c; } + +.siimple-checkbox { + display: inline-block; + position: relative; + width: 16px; + height: 16px; + margin-left: 10px; + margin-right: 10px; + margin-top: 7px; + margin-bottom: 7px; } + .siimple-checkbox label { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + transition: all 0.3s; + border-radius: 2px; + width: 16px; + height: 16px; + background: #ebf2fa; } + .siimple-checkbox label:after { + opacity: 0.2; + content: ''; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + transition: all 0.3s; + position: absolute; + top: 3px; + left: 3px; + width: 8px; + height: 4px; + background: transparent; + border: 2px solid #57607c; + border-top: none; + border-right: none; } + .siimple-checkbox label:hover::after { + opacity: 0.5; } + .siimple-checkbox input[type=checkbox] { + visibility: hidden; } + .siimple-checkbox input[type=checkbox]:checked + label:after { + opacity: 1; + border-color: #ffffff; } + .siimple-checkbox input[type=checkbox]:checked + label { + background-color: #1add9f; } + +.siimple-input, .siimple-select { + display: inline-block; + height: 30px; + line-height: 30px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; + padding-left: 10px; + padding-right: 10px; + padding-top: 0px; + padding-bottom: 0px; + border: 0px; + border-radius: 5px; + outline: 0px; + background-color: #ebf2fa; } + .siimple-input--fluid, .siimple-select--fluid { + width: 100%; } + +.siimple-textarea { + display: inline-block; + line-height: 20px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; + padding-left: 10px; + padding-right: 10px; + padding-top: 10px; + padding-bottom: 10px; + margin-top: 0px; + margin-bottom: 10px; + border: 0px; + border-radius: 5px; + outline: 0px; + background-color: #ebf2fa; } + .siimple-textarea--fluid { + width: 100%; } + +.siimple-label { + display: inline-block; + height: 30px; + line-height: 30px; + font-family: 'Montserrat', sans-serif; + font-size: 14px; + color: #57607c; + font-weight: bold; + padding-left: 0px; + padding-right: 10px; + padding-top: 0px; + padding-bottom: 0px; } + +.siimple-grid { + display: block; + width: 100%; + min-height: 40px; + margin-left: auto; + margin-right: auto; } + @media (max-width: 960px) { + .siimple-grid { + width: 94%; } } + .siimple-grid-row { + display: inline-block; + width: 100%; + margin-left: 0px; + margin-right: 0px; } + .siimple-grid-row:after { + content: " "; + clear: both; + display: table; + line-height: 0; } + .siimple-grid-col { + display: inline-block; + vertical-align: top; + float: left; + padding: 1%; } + .siimple-grid-col--1 { + width: 6.33%; } + .siimple-grid-col--2 { + width: 14.66%; } + .siimple-grid-col--3 { + width: 22.99%; } + .siimple-grid-col--4 { + width: 31.33%; } + .siimple-grid-col--5 { + width: 39.66%; } + .siimple-grid-col--6 { + width: 47.99%; } + .siimple-grid-col--7 { + width: 56.33%; } + .siimple-grid-col--8 { + width: 64.66%; } + .siimple-grid-col--9 { + width: 72.99%; } + .siimple-grid-col--10 { + width: 81.33%; } + .siimple-grid-col--11 { + width: 89.66%; } + .siimple-grid-col--12 { + width: 97.99%; } + @media (max-width: 400px) { + .siimple-grid-col { + width: 98% !important; } } diff --git a/dist/siimple.nofont.min.css b/dist/siimple.nofont.min.css new file mode 100644 index 000000000..49c3e09af --- /dev/null +++ b/dist/siimple.nofont.min.css @@ -0,0 +1,8 @@ +/** + * siimple - Minimal CSS framework for flat and clean designs. + * @version v2.0.0 + * @link http://siimple.juanes.xyz/ + * @license MIT +**/ + + .siimple-color--navy{color:#57607c}.siimple-color--green{color:#1add9f}.siimple-color--teal{color:#18d2ba}.siimple-color--blue{color:#4894f0}.siimple-color--purple{color:#b490f5}.siimple-color--pink{color:#f45b93}.siimple-color--red{color:#ff1a4f}.siimple-color--orange{color:#ff8463}.siimple-color--yellow{color:#ffbf00}.siimple-color--grey{color:#ebf2fa}.siimple-color--white{color:#fff}.siimple-background--navy,.siimple-bg--navy{background-color:#57607c}.siimple-background--green,.siimple-bg--green{background-color:#1add9f}.siimple-background--teal,.siimple-bg--teal{background-color:#18d2ba}.siimple-background--blue,.siimple-bg--blue{background-color:#4894f0}.siimple-background--purple,.siimple-bg--purple{background-color:#b490f5}.siimple-background--pink,.siimple-bg--pink{background-color:#f45b93}.siimple-background--red,.siimple-bg--red{background-color:#ff1a4f}.siimple-background--orange,.siimple-bg--orange{background-color:#ff8463}.siimple-background--yellow,.siimple-bg--yellow{background-color:#ffbf00}.siimple-background--grey,.siimple-bg--grey{background-color:#ebf2fa}.siimple-background--white,.siimple-bg--white{background-color:#fff}.siimple-blockquote{display:block;font-family:Montserrat,sans-serif;color:#c3d7ef;font-size:16px;border-left:4px solid #c3d7ef;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:10px;margin-top:0;margin-bottom:10px}.siimple-code{color:#57607c;text-decoration:none;font-size:15px;background-color:#ebf2fa;border-radius:5px;padding-top:2px;padding-bottom:2px;padding-left:5px;padding-right:5px}.siimple-pre{display:block;overflow-x:auto;width:calc(100% - 20px);color:#57607c;line-height:26px;font-weight:300;font-size:15px;background-color:#ebf2fa;border-radius:5px;padding:10px;margin-top:0;margin-bottom:10px;margin-left:0;margin-right:0}.siimple-h1,.siimple-heading1{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:45px;margin-bottom:20px}.siimple-h2,.siimple-heading2{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:35px;margin-bottom:20px}.siimple-h3,.siimple-heading3{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:25px;margin-bottom:18px}.siimple-h4,.siimple-heading4{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:22px;margin-bottom:16px}.siimple-h5,.siimple-heading5{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:20px;margin-bottom:14px}.siimple-h6,.siimple-heading6{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:#57607c;margin-top:20px;margin-left:0;margin-right:0;padding:0;font-size:18px;margin-bottom:12px}.siimple-small{font-family:Montserrat,sans-serif;font-size:14px;color:#57607c}.siimple-p,.siimple-paragraph{display:block;font-family:Montserrat,sans-serif;line-height:26px;margin-bottom:10px;margin-top:0}.siimple-a,.siimple-link{font-family:Montserrat,sans-serif;color:#57607c;font-weight:700;text-decoration:underline;transition:all .3s}.siimple-a:hover,.siimple-link:hover{text-decoration:underline;cursor:pointer}.siimple-alert{display:block;width:calc(100% - 30px);font-family:Montserrat,sans-serif;color:#57607c;line-height:20px;border-radius:5px;background-color:#ebf2fa;padding-top:15px;padding-bottom:15px;padding-left:15px;padding-right:15px;margin-top:10px;margin-bottom:10px}.siimple-alert--warning{background-color:#ffbf00!important;color:#fff!important}.siimple-alert--error{background-color:#ff1a4f!important;color:#fff!important}.siimple-alert--done{background-color:#1add9f!important;color:#fff!important}.siimple-alert--info{background-color:#4894f0!important;color:#fff!important}.siimple-btn{display:inline-block;height:30px;transition:opacity .3s;line-height:30px;text-align:center;text-decoration:none;cursor:pointer;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding-left:10px;padding-right:10px;border-radius:5px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.siimple-btn:hover{opacity:.8;text-decoration:none}.siimple-btn--disabled{background-color:#c3d7ef!important;color:#57607c!important;cursor:not-allowed!important}.siimple-btn--navy{background-color:#57607c;color:#fff}.siimple-btn--green{background-color:#1add9f;color:#fff}.siimple-btn--teal{background-color:#18d2ba;color:#fff}.siimple-btn--blue{background-color:#4894f0;color:#fff}.siimple-btn--purple{background-color:#b490f5;color:#fff}.siimple-btn--pink{background-color:#f45b93;color:#fff}.siimple-btn--red{background-color:#ff1a4f;color:#fff}.siimple-btn--orange{background-color:#ff8463;color:#fff}.siimple-btn--yellow{background-color:#ffbf00;color:#fff}.siimple-btn--grey{background-color:#ebf2fa;color:#57607c}.siimple-btn--white{background-color:#fff;color:#57607c}.siimple-checkbox{display:inline-block;position:relative;width:16px;height:16px;margin-left:10px;margin-right:10px;margin-top:7px;margin-bottom:7px}.siimple-checkbox label{cursor:pointer;position:absolute;top:0;left:0;transition:all .3s;border-radius:2px;width:16px;height:16px;background:#ebf2fa}.siimple-checkbox label:after{opacity:.2;content:'';-ms-transform:rotate(-45deg);transform:rotate(-45deg);transition:all .3s;position:absolute;top:3px;left:3px;width:8px;height:4px;background:0 0;border:2px solid #57607c;border-top:none;border-right:none}.siimple-checkbox label:hover::after{opacity:.5}.siimple-checkbox input[type=checkbox]{visibility:hidden}.siimple-checkbox input[type=checkbox]:checked+label:after{opacity:1;border-color:#fff}.siimple-checkbox input[type=checkbox]:checked+label{background-color:#1add9f}.siimple-input,.siimple-select{display:inline-block;height:30px;line-height:30px;font-family:Montserrat,sans-serif;font-size:14px;color:#57607c;padding-left:10px;padding-right:10px;padding-top:0;padding-bottom:0;border:0;border-radius:5px;outline:0;background-color:#ebf2fa}.siimple-input--fluid,.siimple-select--fluid{width:100%}.siimple-textarea{display:inline-block;line-height:20px;font-family:Montserrat,sans-serif;font-size:14px;color:#57607c;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:10px;border:0;border-radius:5px;outline:0;background-color:#ebf2fa}.siimple-textarea--fluid{width:100%}.siimple-label{display:inline-block;height:30px;line-height:30px;font-family:Montserrat,sans-serif;font-size:14px;color:#57607c;font-weight:700;padding-left:0;padding-right:10px;padding-top:0;padding-bottom:0}.siimple-grid{display:block;width:100%;min-height:40px;margin-left:auto;margin-right:auto}@media (max-width:960px){.siimple-grid{width:94%}}.siimple-grid-row{display:inline-block;width:100%;margin-left:0;margin-right:0}.siimple-grid-row:after{content:" ";clear:both;display:table;line-height:0}.siimple-grid-col{display:inline-block;vertical-align:top;float:left;padding:1%}.siimple-grid-col--1{width:6.33%}.siimple-grid-col--2{width:14.66%}.siimple-grid-col--3{width:22.99%}.siimple-grid-col--4{width:31.33%}.siimple-grid-col--5{width:39.66%}.siimple-grid-col--6{width:47.99%}.siimple-grid-col--7{width:56.33%}.siimple-grid-col--8{width:64.66%}.siimple-grid-col--9{width:72.99%}.siimple-grid-col--10{width:81.33%}.siimple-grid-col--11{width:89.66%}.siimple-grid-col--12{width:97.99%}@media (max-width:400px){.siimple-grid-col{width:98%!important}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 544ec7340..15505dac2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,64 +7,72 @@ var cleanCSS = require('gulp-clean-css'); var rename = require('gulp-rename'); var header = require('gulp-header'); var sass = require('gulp-sass'); +var del = require('del'); //Import the package var pkg = require('./package.json'); -//Header -var banner = ['/**', - ' * <%= pkg.name %> - <%= pkg.description %>', - ' * @version v<%= pkg.version %>', - ' * @link <%= pkg.homepage %>', - ' * @license <%= pkg.license %>', - ' */', - '', ''].join('\n'); +//Banner structure +var banner = [] +banner.push('/**'); +banner.push(' * <%= pkg.name %> - <%= pkg.description %>'); +banner.push(' * @version v<%= pkg.version %>'); +banner.push(' * @link <%= pkg.homepage %>'); +banner.push(' * @license <%= pkg.license %>'); +banner.push('**/'); +banner.push(' '); +banner.push(' '); + +//Join the banner +banner = banner.join('\n'); + +//Clean the dist folder +gulp.task('clean', function() +{ + //Clean the dist folder + return del.sync([ './dist/**' ]); +}); //Build the SCSS files -gulp.task('build', function(){ - +gulp.task('build:scss', function() +{ //Select all the SCSS files - gulp.src('src/**/*.scss') + gulp.src('scss/**/*.scss') - //Build + //Build the scss files .pipe(sass().on('error', sass.logError)) //Autoprefix - .pipe(autoprefixer({ - browsers: ['last 3 versions', 'IE 9'], - cascade: false - })) + .pipe(autoprefixer({ browsers: ['last 3 versions', 'IE 9'], cascade: false })) //Add the header .pipe(header(banner, { pkg : pkg } )) - //Save in the dist folder + //Save on the dist folder .pipe(gulp.dest('./dist/')); - }); -//Minimize -gulp.task('minimize', function(){ - +//Minimize the css +gulp.task('minimize', function() +{ //Set the source file - gulp.src('dist/siimple.css') + gulp.src('dist/*.css') - //CleanCss - .pipe(cleanCSS({ - compatibility: '*', - processImportFrom: ['!fonts.googleapis.com'] - })) + //Clean the css + .pipe(cleanCSS({ compatibility: '*', processImportFrom: ['!fonts.googleapis.com'] })) - //Save as siimple.min.css - .pipe(rename('siimple.min.css')) + //Rename the file + .pipe(rename({ extname: '.min.css' })) //Add the header .pipe(header(banner, { pkg : pkg } )) - //Save in css/ folder + //Save on the dist folder .pipe(gulp.dest('dist/')); - }); +//Build task +gulp.task('build', [ 'build:scss' ]); + //Execute the tasks -gulp.task('default', ['build', 'minimize']); \ No newline at end of file +gulp.task('default', [ 'clean', 'build' ]); diff --git a/package.json b/package.json index 844fb5166..33b64ce59 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "siimple", - "version": "1.3.7", + "version": "2.0.0", "description": "Minimal CSS framework for flat and clean designs.", "style": "dist/siimple.css", "main": "dist/siimple.css", "author": "Josemi Juanes ", "license": "MIT", - "homepage": "https://siimple.juanes.xyz/", + "homepage": "http://siimple.juanes.xyz/", "repository": { "type": "git", "url": "https://github.com/siimple/siimple.git" @@ -24,13 +24,15 @@ "websites", "responsive" ], + "dependencies": { "siimple-colors": "0.0.2" }, "devDependencies": { - "gulp": "^3.9.1", - "gulp-autoprefixer": "^3.1.1", - "gulp-clean-css": "^2.0.12", - "gulp-concat": "^2.6.0", - "gulp-header": "^1.8.8", - "gulp-rename": "^1.2.2", - "gulp-sass": "^2.3.2" + "gulp": "3.9.1", + "gulp-autoprefixer": "3.1.1", + "gulp-clean-css": "3.0.2", + "gulp-concat": "2.6.1", + "gulp-header": "1.8.8", + "gulp-rename": "1.2.2", + "gulp-sass": "3.1.0", + "del": "2.2.2" } } diff --git a/scss/_font.scss b/scss/_font.scss new file mode 100644 index 000000000..273ab2214 --- /dev/null +++ b/scss/_font.scss @@ -0,0 +1,20 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Default font +@mixin siimple-font +{ + //Default font family + font-family: 'Montserrat', sans-serif; + + //Default font size + //font-size: 16px; + + //Default font weight + //font-weight: normal; +} diff --git a/scss/_index.scss b/scss/_index.scss new file mode 100644 index 000000000..e7eff309d --- /dev/null +++ b/scss/_index.scss @@ -0,0 +1,81 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Main mixin +@mixin siimple +{ + //Text color + &-color { @include siimple-color-attribute("color"); } + + //Background color + &-background, &-bg { @include siimple-color-attribute("background-color"); } + + //Blockquote + &-blockquote { @include siimple-blockquote; } + + //Code element + &-code { @include siimple-code; } + + //Pre element + &-pre { @include siimple-pre; } + + //Heading 1 + &-h1, &-heading1 { @include siimple-heading-1; } + + //Heading 2 + &-h2, &-heading2 { @include siimple-heading-2; } + + //Heading 3 + &-h3, &-heading3 { @include siimple-heading-3; } + + //Heading 4 + &-h4, &-heading4 { @include siimple-heading-4; } + + //Heading 5 + &-h5, &-heading5 { @include siimple-heading-5; } + + //Heading 6 + &-h6, &-heading6 { @include siimple-heading-6; } + + //Small text + &-small { @include siimple-small; } + + //Paragraph + &-p, &-paragraph { @include siimple-paragraph; } + + //Links + &-a, &-link { @include siimple-link; } + + //Alert elements + &-alert { @include siimple-alert; } + + //Buttons + &-btn + { + //Include default button style + @include siimple-btn; + + //Add the button colors + @include siimple-color-attribute-background(); + } + + //Checkbox + &-checkbox { @include siimple-checkbox; } + + //Input element + &-input, &-select { @include siimple-input; } + + //Textarea element + &-textarea { @include siimple-textarea; } + + //Label element + &-label { @include siimple-label; } + + //Grid element + &-grid { @include siimple-grid; } +} diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 000000000..93d959905 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,44 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Import colors +@import "../../siimple-colors/scss/_mixins.scss"; + +//Import variables +@import "_variables.scss"; + +//Import font +@import "_font.scss"; + +//Import utils +@import "_utils.scss"; + +//Import typography +@import "typography/_blockquote.scss"; +@import "typography/_code.scss"; +@import "typography/_heading.scss"; +@import "typography/_list.scss"; +@import "typography/_text.scss"; + +//Import alert +@import "alert/_alert.scss"; + +//Import form elements +@import "form/_checkbox.scss"; +@import "form/_input.scss"; +@import "form/_label.scss"; +@import "form/_textarea.scss"; + +//Import buttons +@import "btn/_btn.scss"; + +//Import grid +@import "grid/_grid.scss"; + +//Main mixin +@import "_index.scss"; diff --git a/scss/_utils.scss b/scss/_utils.scss new file mode 100644 index 000000000..aed9bf4b4 --- /dev/null +++ b/scss/_utils.scss @@ -0,0 +1,17 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Set text selection +//Mixin by @icetee (PR #5) and edited by @dyzajash (PR #11) +@mixin siimple-utils-select($select) +{ + -webkit-user-select: $select; + -khtml-user-select: $select; + -moz-user-select: $select; + -ms-user-select: $select; +} diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 000000000..7405c23f0 --- /dev/null +++ b/scss/_variables.scss @@ -0,0 +1,39 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Default border radius +$siimple-border-radius: 5px; + +//Deault normal font size +$siimple-font-normal: 16px; + +//Default small font size +$siimple-font-small: 14px; + +//Default button font size +$siimple-font-btn: 14px; + +//Default element margin top +$siimple-margin-top: 0px; + +//Default element margin bottom +$siimple-margin-bottom: 10px; + +//Default line height +$siimple-lh: 26px; + +//Columns list +$siimple-grid-columns: +( + (1,'6.33%'), (2,'14.66%'), + (3,'22.99%'), (4,'31.33%'), + (5,'39.66%'), (6,'47.99%'), + (7,'56.33%'), (8,'64.66%'), + (9,'72.99%'), (10,'81.33%'), + (11,'89.66%'), (12,'97.99%') +); diff --git a/scss/alert/_alert.scss b/scss/alert/_alert.scss new file mode 100644 index 000000000..e0bdbeef5 --- /dev/null +++ b/scss/alert/_alert.scss @@ -0,0 +1,44 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Alert element +@mixin siimple-alert +{ + //Display + display: block; + + //Size + width: calc(100% - 30px); + + //Text + @include siimple-font; color: $siimple-navy; line-height: 20px; + + //Border + border-radius: $siimple-border-radius; + + //Background color + background-color: $siimple-grey; + + //Padding + padding: { top: 15px; bottom: 15px; left: 15px; right: 15px; } + + //Margin + margin: { top: 10px; bottom: 10px; } + + //Warning alert + &--warning { background-color: $siimple-yellow !important; color: $siimple-white !important; } + + //Error alert + &--error { background-color: $siimple-red !important; color: $siimple-white !important; } + + //Done alert + &--done { background-color: $siimple-green !important; color: $siimple-white !important; } + + //Info alert + &--info { background-color: $siimple-blue !important; color: $siimple-white !important; } +} diff --git a/scss/btn/_btn.scss b/scss/btn/_btn.scss new file mode 100644 index 000000000..1334051d5 --- /dev/null +++ b/scss/btn/_btn.scss @@ -0,0 +1,48 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Button mixin +@mixin siimple-btn +{ + //Display + display: inline-block; height: 30px; transition: opacity 0.3s; + + //Text + line-height: 30px; text: { align: center; decoration: none; } + + //Cursor + cursor: pointer; + + //Text font + @include siimple-font; font-size: $siimple-font-btn; font-weight: bold; + + //Padding + padding: { left: 10px; right: 10px; } + + //Border + border-radius: $siimple-border-radius; + + //Disable user selection + @include siimple-utils-select(none); + + //Hover + &:hover { opacity: 0.8; text-decoration: none; } + + //Disabled button + &--disabled + { + //Backbround color + background-color: $siimple-grey-0 !important; + + //Text color + color: $siimple-navy !important; + + //Cursor + cursor: not-allowed !important; + } +} diff --git a/scss/form/_checkbox.scss b/scss/form/_checkbox.scss new file mode 100644 index 000000000..f239a876a --- /dev/null +++ b/scss/form/_checkbox.scss @@ -0,0 +1,66 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +@mixin siimple-checkbox +{ + //Display + display: inline-block; position: relative; + + //Size + width: 16px; height: 16px; + + //Margin + margin: { left: 10px; right: 10px; top: 7px; bottom: 7px; } + + //Label style + & label + { + //Display + cursor: pointer; position: absolute; top: 0; left: 0; transition: all 0.3s; border-radius: 2px; + + //Size + width: 16px; height: 16px; + + //Background color + background: $siimple-grey; + + //Tick + &:after + { + //Display + opacity: 0.2; content: ''; transform: rotate(-45deg); + + //Transitions + transition: all 0.3s; + + //Position + position: absolute; top: 3px; left: 3px; + + //Size + width: 8px; height: 4px; + + //Background + background: transparent; + + //Border + border: 2px solid $siimple-navy; border-top: none; border-right: none; + } + + //Label hover + &:hover::after { opacity: 0.5; } + } + + //Input style + & input[type=checkbox] { visibility: hidden; } + + //Checked -> change tick + & input[type=checkbox]:checked + label:after { opacity: 1; border-color: $siimple-white; } + + //Checked -> change background + & input[type=checkbox]:checked + label { background-color: $siimple-green; } +} diff --git a/scss/form/_input.scss b/scss/form/_input.scss new file mode 100644 index 000000000..203f856ea --- /dev/null +++ b/scss/form/_input.scss @@ -0,0 +1,32 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Input element +@mixin siimple-input +{ + //Display + display: inline-block; + + //Size + height: 30px; line-height: 30px; + + //Font + @include siimple-font; font-size: $siimple-font-small; color: $siimple-navy; + + //Padding + padding: { left: 10px; right: 10px; top: 0px; bottom: 0px; } + + //Input border + border: 0px; border-radius: $siimple-border-radius; outline: 0px; + + //Input background + background-color: $siimple-grey; + + //Fluid input + &--fluid { width: 100%; } +} diff --git a/scss/form/_label.scss b/scss/form/_label.scss new file mode 100644 index 000000000..a1ec070e0 --- /dev/null +++ b/scss/form/_label.scss @@ -0,0 +1,23 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Label elements +@mixin siimple-label +{ + //Display + display: inline-block; + + //Size + height: 30px; line-height: 30px; + + //Font + @include siimple-font; font-size: $siimple-font-small; color: $siimple-navy; font-weight: bold; + + //Padding + padding: { left: 0px; right: 10px; top: 0px; bottom: 0px; } +} diff --git a/scss/form/_textarea.scss b/scss/form/_textarea.scss new file mode 100644 index 000000000..f53dab011 --- /dev/null +++ b/scss/form/_textarea.scss @@ -0,0 +1,35 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Textarea element +@mixin siimple-textarea +{ + //Display + display: inline-block; + + //Size + line-height: 20px; + + //Font + @include siimple-font; font-size: $siimple-font-small; color: $siimple-navy; + + //Padding + padding: { left: 10px; right: 10px; top: 10px; bottom: 10px; } + + //Margin + margin: { top: $siimple-margin-top; bottom: $siimple-margin-bottom; } + + //Input border + border: 0px; border-radius: $siimple-border-radius; outline: 0px; + + //Input background + background-color: $siimple-grey; + + //Fluid textarea + &--fluid { width: 100%; } +} diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss new file mode 100644 index 000000000..f571c1a77 --- /dev/null +++ b/scss/grid/_grid.scss @@ -0,0 +1,63 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Grid +@mixin siimple-grid +{ + //Grid style + display: block; + + //Size + width: 100%; min-height: 40px; + + //Margin + margin: { left: auto; right: auto; } + + //Grid media + @media (max-width: 960px){ width: 94%; } + + //Grid row + &-row + { + //Display + display: inline-block; + + //Size + width: 100%; + + //Margin + margin: { left: 0px; right: 0px; } + + //Row after + &:after { content: " "; clear: both; display: table; line-height: 0; } + } + + //Column + &-col + { + //Display + display: inline-block; vertical-align: top; float: left; + + //Padding + padding: 1%; + } + + //Read all the list + @each $i,$w in $siimple-grid-columns + { + //Add the column style + &-col--#{$i} { width: unquote($w); } + } + + //Media column style + @media(max-width: 400px) + { + //Add the column style + &-col { width: 98% !important; } + } +} diff --git a/scss/siimple.nofont.scss b/scss/siimple.nofont.scss new file mode 100644 index 000000000..286719858 --- /dev/null +++ b/scss/siimple.nofont.scss @@ -0,0 +1,17 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Import mixins +@import "_mixins.scss"; + +//Siimple class +.siimple +{ + //Include the main mixin + @include siimple; +} diff --git a/scss/siimple.scss b/scss/siimple.scss new file mode 100644 index 000000000..578ed89c0 --- /dev/null +++ b/scss/siimple.scss @@ -0,0 +1,20 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Import Montserrat from Google Fonts +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700'); + +//Import mixins +@import "_mixins.scss"; + +//Siimple class +.siimple +{ + //Include the main mixin + @include siimple; +} diff --git a/scss/table/_table.scss b/scss/table/_table.scss new file mode 100644 index 000000000..e69de29bb diff --git a/scss/typography/_blockquote.scss b/scss/typography/_blockquote.scss new file mode 100644 index 000000000..e10039c3e --- /dev/null +++ b/scss/typography/_blockquote.scss @@ -0,0 +1,26 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Blockquote +@mixin siimple-blockquote +{ + //Display + display: block; + + //Text style + @include siimple-font; color: $siimple-grey-0; font-size: $siimple-font-normal; + + //Border + border: { left: 4px solid $siimple-grey-0; } + + //Padding + padding: { top: 10px; bottom: 10px; left: 20px; right: 10px; } + + //Margin + margin: { top: 0px; bottom: $siimple-margin-bottom; } +} diff --git a/scss/typography/_code.scss b/scss/typography/_code.scss new file mode 100644 index 000000000..ef9a02709 --- /dev/null +++ b/scss/typography/_code.scss @@ -0,0 +1,48 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Code mixin +@mixin siimple-code +{ + //Text + color: $siimple-navy; text-decoration: none; font-size: 15px; + + //Background color + background-color: $siimple-grey; + + //Border + border-radius: $siimple-border-radius; + + //Padding + padding: { top: 2px; bottom: 2px; left: 5px; right: 5px; } +} + +//Pre mixin +@mixin siimple-pre +{ + //Display + display: block; overflow-x: auto; + + //Size + width: calc(100% - 20px); + + //Text + color: $siimple-navy; line-height: $siimple-lh; font-weight: 300; font-size: 15px; + + //Background + background-color: $siimple-grey; + + //Border + border-radius: $siimple-border-radius; + + //Padding + padding: 10px; + + //Margin + margin: { top: $siimple-margin-top; bottom: $siimple-margin-bottom; left: 0px; right: 0px; } +} diff --git a/scss/typography/_heading.scss b/scss/typography/_heading.scss new file mode 100644 index 000000000..e06e8b54f --- /dev/null +++ b/scss/typography/_heading.scss @@ -0,0 +1,105 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Heading base +@mixin siimple-heading +{ + //Display + display: block; + + //Default font + @include siimple-font; font-weight: bold; color: $siimple-navy; + + //Margins + margin: { top: 20px; left: 0px; right: 0px; } + + //Padding + padding: 0px; +} + +//Heading 1 +@mixin siimple-heading-1 +{ + //Include the default heading style + @include siimple-heading; + + //Font size + font-size: 45px; + + //Margin bottom + margin-bottom: 20px; +} + +//Heading 2 +@mixin siimple-heading-2 +{ + //Include the default heading style + @include siimple-heading; + + //Font size + font-size: 35px; + + //Margin bottom + margin-bottom: 20px; +} + + +//Heading 3 +@mixin siimple-heading-3 +{ + //Include the default heading style + @include siimple-heading; + + //Font size + font-size: 25px; + + //Margin bottom + margin-bottom: 18px; +} + + +//Heading 4 +@mixin siimple-heading-4 +{ + //Include the default heading style + @include siimple-heading; + + //Font size + font-size: 22px; + + //Margin bottom + margin-bottom: 16px; +} + + +//Heading 5 +@mixin siimple-heading-5 +{ + //Include the default heading style + @include siimple-heading; + + //Font size + font-size: 20px; + + //Margin bottom + margin-bottom: 14px; +} + + +//Heading 6 +@mixin siimple-heading-6 +{ + //Include the default heading style + @include siimple-heading; + + //Font size + font-size: 18px; + + //Margin bottom + margin-bottom: 12px; +} diff --git a/scss/typography/_list.scss b/scss/typography/_list.scss new file mode 100644 index 000000000..d397c70d8 --- /dev/null +++ b/scss/typography/_list.scss @@ -0,0 +1,27 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//List style +@mixin siimple-list +{ + //Line height + line-height: $siimple-lh; + + //Text + @include siimple-font; + + //Margin + margin: { bottom: 16px; top: 0px; } + + //Li element + li + { + //Line height + line-height: $siimple-lh; + } +} diff --git a/scss/typography/_text.scss b/scss/typography/_text.scss new file mode 100644 index 000000000..1ba61711b --- /dev/null +++ b/scss/typography/_text.scss @@ -0,0 +1,40 @@ +// +// Siimple - minimal css framework for flat and clean websites +// Under the MIT LICENSE. +// License: https://github.com/siimple/siimple/blob/master/LICENSE.md +// Repository: https://github.com/siimple +// Website: http://siimple.juanes.xyz +// + +//Small text +@mixin siimple-small +{ + //Font + @include siimple-font; font-size: $siimple-font-small; color: $siimple-navy; +} + +//Paragraph +@mixin siimple-paragraph +{ + //Display + display: block; + + //Text + @include siimple-font; line-height: $siimple-lh; + + //Margin + margin: { bottom: $siimple-margin-bottom; top: $siimple-margin-top; } +} + +//Link +@mixin siimple-link +{ + //Text + @include siimple-font; color: $siimple-navy; font-weight: bold; text-decoration: underline; + + //Transition + transition: all 0.3s; + + //Link hover style + &:hover { text-decoration: underline; cursor: pointer; } +} diff --git a/src/_alert.scss b/src/_alert.scss deleted file mode 100644 index a949186eb..000000000 --- a/src/_alert.scss +++ /dev/null @@ -1,36 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Default alert style -.alert -{ - //Alert style - display: block; width: calc(100% - 30px); font-weight: 300; font-size: 16px; text-align: left; - - //Alert padding - padding: { left: 14px; right: 14px; top: 16px; bottom: 16px; } - - //Alert margin - margin: { top: 0px; bottom: 20px; } - - //Alert border - border: { radius: 5px; width: 1px; style: solid; } - - //Alert links - a { text-decoration: none; font-weight: normal; } - - //Default alert color - background-color: $alert-default-bg; color: $alert-default; border-color: $alert-default-border; - - //Error alert - &-error { color: $alert-error; background-color: $alert-error-bg; border-color: $alert-error-border; } - - //Warning alert - &-warning { background-color: $alert-warning-bg; color: $alert-warning; border-color: $alert-warning-border; } - - //Done alert - &-done { background-color: $alert-done-bg; color: $alert-done; border-color: $alert-done-border; } -} diff --git a/src/_base.scss b/src/_base.scss deleted file mode 100644 index baff3e333..000000000 --- a/src/_base.scss +++ /dev/null @@ -1,20 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Default font block -@mixin defaultFont { font: { family: 'Open Sans'; size: 16px; weight: 300; } } - -//Import OpenSans from Google Fonts -@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300'); - -//Heart -.heart{ &:after { content: "\2764"; color: #f45660; } } - -//Body -body { color: $grey1; margin: 0px; padding: 0px; @include defaultFont; background-color: $white; } - -//Blockquote -blockquote { border: { left: 4px solid $grey2; } padding: { left: 20px; right: 5px; bottom: 5px; top: 5px; } } diff --git a/src/_btn.scss b/src/_btn.scss deleted file mode 100644 index 1093d60c8..000000000 --- a/src/_btn.scss +++ /dev/null @@ -1,79 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Default button style -@mixin defaultBtn -{ - //Include the default text style - @include defaultFont; - - //Disable text selection in button - @include no-select(none); - - //Text style - text: { align: center; decoration: none !important; } line-height: 28px; - - //Margin - margin: { left: 5px; right: 5px; top: 5px; bottom: 20px; } - - //Padding - padding: { left: 25px; right: 25px; top: 5px; bottom: 5px; } - - //Button block definition - display: inline-block; cursor: pointer; border-radius: 5px; - - //Transitions - transition: all 0.3s; - - //Button hover - &:hover { text-decoration: none; } -} - -//Button style -.btn -{ - //Include the default button style - @include defaultBtn; - - //Normal button style - color: $white; background-color: $blue1; border: 0px; - - //Normal button hover - &:hover { opacity: 0.8; } - - //Button small - &-small - { - //Text - font-size: 14px !important; line-height: 20px !important; - - //Padding - padding: { top: 4px !important; bottom: 4px !important; left: 15px !important; right: 15px !important; } - } - - //Button big - &-big - { - //Text - font-size: 22px !important; line-height: 34px !important; - - //Padding - padding: { top: 8px !important; bottom: 8px !important; left: 30px !important; right: 30px !important; } - } - - //Outline button - &-outline - { - //Include the default button style - @include defaultBtn; - - //Outline button style - color: $blue1; background-color: rgba(0,0,0,0); border: 1px solid $blue1; - - //Outline button hover - &:hover { color: $white; background-color: $blue1; } - } -} diff --git a/src/_code.scss b/src/_code.scss deleted file mode 100644 index 6124502ad..000000000 --- a/src/_code.scss +++ /dev/null @@ -1,14 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Code -code { @include defaultFont; border-radius: 5px; background-color: $grey3; color: $blue1; } -code { padding: { left: 6px; right: 6px; } } - -//Code multiple lines -pre { @include defaultFont; display:block; width: calc(100% - 30px); padding: 14px; line-height: 28px; } -pre { margin: { bottom: 20px; } border-radius: 5px; background-color: $grey3; color: $grey1; } -pre { overflow-x: auto; } diff --git a/src/_colors.scss b/src/_colors.scss deleted file mode 100644 index 3b03a7ff7..000000000 --- a/src/_colors.scss +++ /dev/null @@ -1,46 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Grey colors -$grey1: #526475; //Used as default text color -$grey2: #6a7e95; //Used as small text color -$grey3: #f1f5fa; //Used for blocks background - -//Blue colors -$blue1: #09a0f6; -$blue2: #d1e1e8; - -//Button Colors -$green1: #7CB342; -$green2: darken($green1 ,10%); -$red1: #F44336; -$red2: darken($red1 ,10%); -$orange1: #F57C00; -$orange2: darken($orange1 ,10%); - -//Default colors -$white: #ffffff; -$black: #000000; - -//Default alert color -$alert-default: #03A9F4; -$alert-default-bg: #E1F5FE; -$alert-default-border: #03A9F4; - -//Error alert color -$alert-error: #D32F2F; -$alert-error-bg: #FFEBEE; -$alert-error-border: #F44336; - -//Warning alert color -$alert-warning: #FF8F00; -$alert-warning-bg: #FFF8E1; -$alert-warning-border: #FFC107; - -//Done alert color -$alert-done: #388E3C; -$alert-done-bg: #E8F5E9; -$alert-done-border: #4CAF50; diff --git a/src/_form.scss b/src/_form.scss deleted file mode 100644 index c789c62e6..000000000 --- a/src/_form.scss +++ /dev/null @@ -1,69 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Form default style -@mixin defaultForm -{ - //Default font style - @include defaultFont; - - //Form display - display: inline-block; width: 100%; transition: all 0.3s; - - //Form text style - color: $grey1; - - //Form margin and padding - padding: 10px; margin: { top: 0px; bottom: 20px; left: 5px; right: 5px; } - - //Form border - border: 1px solid $blue2; border-radius: 5px; outline: 0px; - - //Size bug fix - box-sizing: border-box; - - //Focus - &:focus { border: 1px solid $blue1; } -} - -//Form -.form -{ - //Form input - &-input - { - //Form input - &[type="text"], &[type="password"], &[type="number"], &[type="email"] { @include defaultForm; line-height: 40px; height: 40px; } - - //Form input date - &[type="date"] { @include defaultForm; width: auto !important; height: 40px; } - - //Form input disabled - &[disabled] { @include defaultForm; cursor: not-allowed; background-color: $blue2; height: 40px; } - - //Form input submit - &[type="submit"], &[type="button"] - { - //Load the default button style - @include defaultBtn; - - //Button style - color: $white; background-color: $blue1; border: 0px; - - //Hover - &:hover { opacity: 0.8; } - } - } - - //Form select - &-select { @include defaultForm; padding-top: 6px; height: 40px; background-color: $white; } - - //Form textarea - &-textarea { @include defaultForm;resize: vertical; } - - //Form width auto - &-auto { width: auto !important; } -} diff --git a/src/_grid.scss b/src/_grid.scss deleted file mode 100644 index 9cca946bd..000000000 --- a/src/_grid.scss +++ /dev/null @@ -1,53 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Default grid -.grid -{ - //Grid style - display: block; width: 960px; margin: { left: auto; right: auto; } min-height: 40px; - - //Grid media - @media (max-width: 960px){ width: 94%; } - - //Grid fluid - &-fluid { width: 100%; } -} - -//Grid row -.row -{ - //Row style - display: inline-block; width: 100%; margin: { left: 0px; right: 0px; } - - //Row after - &:after { content: " "; clear: both; display: table; line-height: 0; } -} - -//Grid columns list -$cols: (1,'6.33%'),(2,'14.66%'),(3,'22.99%'),(4,'31.33%'),(5,'39.66%'),(6,'47.99%'),(7,'56.33%'), - (8,'64.66%'),(9,'72.99%'),(10,'81.33%'),(11,'89.66%'),(12,'97.99%'); - -//Read all the list -@each $i,$w in $cols -{ - //Add the column style - .col-#{$i} - { - //Default column style - width: unquote($w); display: inline-block; vertical-align: top; float: left; padding: 1%; - } -} - -//Media column style -@media(max-width: 400px) -{ - @each $i,$w in $cols - { - //Add the column style - .col-#{$i} { width: 98%; } - } -} diff --git a/src/_mixins.scss b/src/_mixins.scss deleted file mode 100644 index d48c7014b..000000000 --- a/src/_mixins.scss +++ /dev/null @@ -1,14 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Disable selection -@mixin no-select($select) -{ - -webkit-touch-callout: $select; - -khtml-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; -} diff --git a/src/_table.scss b/src/_table.scss deleted file mode 100644 index 8507e3922..000000000 --- a/src/_table.scss +++ /dev/null @@ -1,22 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Table style -.table -{ - //General table style - display: table; width: 100%; border: { width: 0px; collapse: collapse; } font-weight: 300; - color: $grey1; - - //Table margin - margin: { top: 0px; bottom: 20px; } - - //Table head - thead tr td { font-weight: normal; border-bottom: 2px solid $blue2; background-color: #f6f8fa; } - - //Table row - tr td { border-bottom: 1px solid $blue2; padding: { top: 10px; bottom: 10px; left: 10px; } } -} diff --git a/src/_typography.scss b/src/_typography.scss deleted file mode 100644 index a2a4c510d..000000000 --- a/src/_typography.scss +++ /dev/null @@ -1,50 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Links -a -{ - //Default link style - color: $blue1; font-weight: normal; text-decoration: none; transition: all 0.3s; - - //Link hover style - &:hover { text-decoration: underline; cursor: pointer; } -} - -//Paragraph -p { line-height: 28px; margin: { bottom: 20px; top: 0px; } display: block; } - -//Lists -ul, ol { line-height: 28px; margin: { bottom: 16px; top: 0px; } li { line-height: 28px; } } - -//Small text -small { color: $grey2; font-size: 14px; } - -//Headings list -$headings: (1,36,50),(2,32,46),(3,28,42),(4,24,38),(5,20,34),(6,16,30); - -//Common headings -h1, h2, h3, h4, h5, h6 -{ - //Font - font-weight: 300; - - //Color - color: $grey1; - - //Display - display: block; - - //Margins - margin: { bottom: 20px; top: 0px; } -} - -//Build all the headings -@each $i,$fs,$lh in $headings -{ - //Add the heading style - h#{$i} { font-size: #{$fs}px; line-height: #{$lh}px; } -} diff --git a/src/siimple.scss b/src/siimple.scss deleted file mode 100644 index 2a7548408..000000000 --- a/src/siimple.scss +++ /dev/null @@ -1,35 +0,0 @@ -////////////////////////////////////////////////////////////////////////////////// -// Siimple - Minimal CSS framework for flat and clean designs. -// http://siimple.github.io -// Under the MIT License -////////////////////////////////////////////////////////////////////////////////// - -//Import mixins -@import "mixins"; - -//Import colors -@import "colors"; - -//Import the base -@import "base"; - -//Import typography: p, headings, links... -@import "typography"; - -//Import the alerts module -@import "alert"; - -//Import buttons -@import "btn"; - -//Import code boxes -@import "code"; - -//Import form module -@import "form"; - -//Import the grid system for siimple -@import "grid"; - -//Import the table module -@import "table";