cupboard 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +10 -0
- data/.rspec +2 -0
- data/.ruby-version +1 -0
- data/.travis.yml +4 -0
- data/CODE_OF_CONDUCT.md +13 -0
- data/Dockerfile +19 -0
- data/Gemfile +6 -0
- data/LICENSE.txt +21 -0
- data/README.md +44 -0
- data/Rakefile +6 -0
- data/app/assets/images/category-cover.png +0 -0
- data/app/assets/images/category-default.jpg +0 -0
- data/app/assets/images/default-avatar.png +0 -0
- data/app/assets/images/favicon.ico +0 -0
- data/app/assets/images/icook-logo.png +0 -0
- data/app/assets/images/icook-logo.svg +26 -0
- data/app/assets/images/logo-2x.png +0 -0
- data/app/assets/images/no-result.png +0 -0
- data/app/assets/images/recipe-default.png +0 -0
- data/app/assets/images/section_bg.jpg +0 -0
- data/app/assets/images/setting-pr.jpg +0 -0
- data/app/assets/images/step-placeholder.jpg +0 -0
- data/app/assets/images/vip-icon.svg +1 -0
- data/app/assets/pages/atomic.md +56 -0
- data/app/assets/pages/index.md +101 -0
- data/app/assets/stylesheets/_base.scss +4 -0
- data/app/assets/stylesheets/_basic.scss +22 -0
- data/app/assets/stylesheets/_components.scss +95 -0
- data/app/assets/stylesheets/_forms.scss +159 -0
- data/app/assets/stylesheets/_global.scss +40 -0
- data/app/assets/stylesheets/_images.scss +125 -0
- data/app/assets/stylesheets/_layouts.scss +4 -0
- data/app/assets/stylesheets/_lists.scss +203 -0
- data/app/assets/stylesheets/_mixins.scss +6 -0
- data/app/assets/stylesheets/_tables.scss +244 -0
- data/app/assets/stylesheets/_typography.scss +292 -0
- data/app/assets/stylesheets/_variables.scss +1 -0
- data/app/assets/stylesheets/_widgets.scss +50 -0
- data/app/assets/stylesheets/base/_badge.scss +89 -0
- data/app/assets/stylesheets/base/_buttons.scss +217 -0
- data/app/assets/stylesheets/components/_accordion.scss +69 -0
- data/app/assets/stylesheets/components/_breadcrumbs.scss +46 -0
- data/app/assets/stylesheets/components/_cards.scss +12 -0
- data/app/assets/stylesheets/components/_grid.scss +45 -0
- data/app/assets/stylesheets/components/_navigations.scss +12 -0
- data/app/assets/stylesheets/components/_pagination.scss +166 -0
- data/app/assets/stylesheets/components/_search-form.scss +56 -0
- data/app/assets/stylesheets/components/_sorting-cards.scss +76 -0
- data/app/assets/stylesheets/components/_text.scss +166 -0
- data/app/assets/stylesheets/components/alerts/_alert-global.scss +137 -0
- data/app/assets/stylesheets/components/alerts/_alert-market.scss +129 -0
- data/app/assets/stylesheets/components/cards/_dish-card.scss +244 -0
- data/app/assets/stylesheets/components/cards/_list-card.scss +168 -0
- data/app/assets/stylesheets/components/cards/_photo-card.scss +244 -0
- data/app/assets/stylesheets/components/cards/_product-card.scss +104 -0
- data/app/assets/stylesheets/components/cards/_recipe-card.scss +96 -0
- data/app/assets/stylesheets/components/cards/_video-card.scss +206 -0
- data/app/assets/stylesheets/components/comments/_comment-form.scss +222 -0
- data/app/assets/stylesheets/components/medias/_blog-feeds.scss +28 -0
- data/app/assets/stylesheets/components/medias/_brand-cover.scss +127 -0
- data/app/assets/stylesheets/components/medias/_brand-product.scss +35 -0
- data/app/assets/stylesheets/components/medias/_business-kitchen.scss +66 -0
- data/app/assets/stylesheets/components/medias/_categories-cover.scss +79 -0
- data/app/assets/stylesheets/components/medias/_hot-categories.scss +36 -0
- data/app/assets/stylesheets/components/medias/_popular-categories.scss +89 -0
- data/app/assets/stylesheets/components/medias/_popular-recipes.scss +38 -0
- data/app/assets/stylesheets/components/medias/_pr-lists.scss +53 -0
- data/app/assets/stylesheets/components/medias/_recipe-reference.scss +45 -0
- data/app/assets/stylesheets/components/medias/_user-recipes.scss +46 -0
- data/app/assets/stylesheets/components/navigations/_blog-nav.scss +120 -0
- data/app/assets/stylesheets/components/navigations/_brand-tabs-nav.scss +187 -0
- data/app/assets/stylesheets/components/navigations/_categories-nav-responsive.scss +131 -0
- data/app/assets/stylesheets/components/navigations/_categories-nav.scss +307 -0
- data/app/assets/stylesheets/components/navigations/_recipe-nav.scss +112 -0
- data/app/assets/stylesheets/components/navigations/_tv-nav.scss +283 -0
- data/app/assets/stylesheets/components/recipes/_ingredients.scss +223 -0
- data/app/assets/stylesheets/components/recipes/_notes.scss +60 -0
- data/app/assets/stylesheets/components/recipes/_steps.scss +153 -0
- data/app/assets/stylesheets/components/single_comment/_single-comment.scss +251 -0
- data/app/assets/stylesheets/layouts/_footer-nav.scss +151 -0
- data/app/assets/stylesheets/layouts/_footer.scss +48 -0
- data/app/assets/stylesheets/layouts/_footers.scss +12 -0
- data/app/assets/stylesheets/layouts/_global-navbar.scss +261 -0
- data/app/assets/stylesheets/layouts/_headers.scss +11 -0
- data/app/assets/stylesheets/layouts/_sub-header-market.scss +138 -0
- data/app/assets/stylesheets/mixins/_mixin-alert.scss +27 -0
- data/app/assets/stylesheets/mixins/_mixin-animation.scss +10 -0
- data/app/assets/stylesheets/mixins/_mixin-badge.scss +21 -0
- data/app/assets/stylesheets/mixins/_mixin-buttons.scss +21 -0
- data/app/assets/stylesheets/mixins/_mixin-icons.scss +32 -0
- data/app/assets/stylesheets/mixins/_mixin-type.scss +7 -0
- data/app/assets/stylesheets/variables/_color-palette.scss +222 -0
- data/app/assets/stylesheets/widgets/_brand-sidebar-widgets.scss +11 -0
- data/app/assets/stylesheets/widgets/_recipe-mark.scss +55 -0
- data/app/assets/stylesheets/widgets/_sidebar-widgets.scss +11 -0
- data/app/assets/stylesheets/widgets/_tv-sidebar-widgets.scss +11 -0
- data/app/assets/stylesheets/widgets/_user-sidebar-widgets.scss +11 -0
- data/app/assets/stylesheets/widgets/_widgets.scss +11 -0
- data/app/assets/stylesheets/widgets/brands/_pr-ingredients.scss +154 -0
- data/app/assets/stylesheets/widgets/brands/_pr-latest.scss +62 -0
- data/app/assets/stylesheets/widgets/brands/_pr-popular-recipe-lists.scss +51 -0
- data/app/assets/stylesheets/widgets/brands/_pr-recent.scss +59 -0
- data/app/assets/stylesheets/widgets/brands/_pr-video.scss +34 -0
- data/app/assets/stylesheets/widgets/features/_feature-events.scss +119 -0
- data/app/assets/stylesheets/widgets/features/_feature-slides.scss +144 -0
- data/app/assets/stylesheets/widgets/feeds/_blog-feeds.scss +144 -0
- data/app/assets/stylesheets/widgets/feeds/_tv-feeds.scss +143 -0
- data/app/assets/stylesheets/widgets/modal/_modal-reset.scss +40 -0
- data/app/assets/stylesheets/widgets/modal/_recipe-list-modal.scss +111 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_business-kitchen.scss +134 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_icook-video.scss +109 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_popular-recipe-lists.scss +232 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_popular-recipes.scss +105 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_popular-search.scss +317 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_recipes-collect.scss +45 -0
- data/app/assets/stylesheets/widgets/sidebar-widgets/_sidebar-widget.scss +62 -0
- data/app/assets/stylesheets/widgets/tv/_tv-more-recipes.scss +93 -0
- data/app/assets/stylesheets/widgets/tv/_tv-popular-tags.scss +78 -0
- data/app/assets/stylesheets/widgets/users/_fav-list.scss +197 -0
- data/app/assets/stylesheets/widgets/users/_user-stats.scss +330 -0
- data/bin/console +14 -0
- data/bin/setup +7 -0
- data/config/initializers/assets.rb +5 -0
- data/cupboard.gemspec +40 -0
- data/example/.gitignore +19 -0
- data/lib/cupboard.rb +12 -0
- data/lib/cupboard/engine.rb +6 -0
- data/lib/cupboard/version.rb +3 -0
- metadata +298 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: f0b251982e9b8b6faa4567d4f3040524100d5d40
|
4
|
+
data.tar.gz: 74c5cffe43801d67041dbcaf630b7d73547aefb4
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 16b8941e5a357eac074571f6dc02ce6eaf0594dc5ad2a22cd57280106a1f9253499c8b0ad0bd66eb4b275f913d9b0fdab25dbc7bd4cac00417da7cc1328c0656
|
7
|
+
data.tar.gz: 01a410b2bd017366f9abf93e93ad54fbb26cd4a682e002792357e1ccbac30e12e6bfb159cbaa65c8cb19af4bb4f0927657d2f44914ed8b1700eba517441f807b
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.ruby-version
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
2.3.1
|
data/.travis.yml
ADDED
data/CODE_OF_CONDUCT.md
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
# Contributor Code of Conduct
|
2
|
+
|
3
|
+
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
|
4
|
+
|
5
|
+
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.
|
6
|
+
|
7
|
+
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
|
8
|
+
|
9
|
+
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. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
|
10
|
+
|
11
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
|
12
|
+
|
13
|
+
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
|
data/Dockerfile
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
FROM ruby:2.2.4
|
2
|
+
|
3
|
+
RUN apt-get update && apt-get install -y build-essential git libpq-dev libxml2-dev libxslt1-dev --no-install-recommends && rm -rf /var/lib/apt/lists/*
|
4
|
+
RUN curl -sL https://deb.nodesource.com/setup_0.12 | bash - && apt-get install -y nodejs
|
5
|
+
|
6
|
+
ENV APP_HOME /app
|
7
|
+
RUN mkdir $APP_HOME
|
8
|
+
WORKDIR $APP_HOME
|
9
|
+
|
10
|
+
ADD example/Gemfile* $APP_HOME/example/
|
11
|
+
RUN cd example && bundle install
|
12
|
+
|
13
|
+
ADD . $APP_HOME
|
14
|
+
|
15
|
+
WORKDIR $APP_HOME/example
|
16
|
+
|
17
|
+
# 這邊再跑一次才能安裝 cupboard 的 dependency
|
18
|
+
RUN bundle install
|
19
|
+
RUN bundle exec rake assets:precompile assets:clean RAILS_ENV=production
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2016 Stan Lo
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,44 @@
|
|
1
|
+
# Cupboard
|
2
|
+
|
3
|
+
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/cupboard`. To experiment with that code, run `bin/console` for an interactive prompt.
|
4
|
+
|
5
|
+
## Update versions
|
6
|
+
|
7
|
+
1. v0.1.0 - static html pages
|
8
|
+
2. v0.2.0 - contents generated by Hologram
|
9
|
+
|
10
|
+
## Installation
|
11
|
+
|
12
|
+
Add this line to your application's Gemfile:
|
13
|
+
|
14
|
+
```ruby
|
15
|
+
gem 'cupboard'
|
16
|
+
```
|
17
|
+
|
18
|
+
And then execute:
|
19
|
+
|
20
|
+
$ bundle
|
21
|
+
|
22
|
+
Or install it yourself as:
|
23
|
+
|
24
|
+
$ gem install cupboard
|
25
|
+
|
26
|
+
## Usage
|
27
|
+
|
28
|
+
TODO: Write usage instructions here
|
29
|
+
|
30
|
+
## Development
|
31
|
+
|
32
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
33
|
+
|
34
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
35
|
+
|
36
|
+
## Contributing
|
37
|
+
|
38
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/cupboard. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](contributor-covenant.org) code of conduct.
|
39
|
+
|
40
|
+
|
41
|
+
## License
|
42
|
+
|
43
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
44
|
+
|
data/Rakefile
ADDED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
2
|
+
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
4
|
+
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
5
|
+
viewBox="0 0 68 50" enable-background="new 0 0 68 50" xml:space="preserve">
|
6
|
+
<g>
|
7
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="#564E4A" d="M40.66,46.636"/>
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" fill="#564E4A" d="M10.465,27.104c-1.828,2.838-2.249,4.441-2.655,6.165
|
9
|
+
c-0.408,1.721,0.318,2.713,2.655,3.521c2.337,0.811,2.524,0.335,3.54-0.88c1.017-1.215,1.772-7.045,1.772-7.045
|
10
|
+
s-0.032-2.295-1.772-2.641C12.346,25.893,10.465,27.104,10.465,27.104z M18.432,33.268c-0.101,0.505-0.328,6.359,7.967,8.806
|
11
|
+
c7.212,2.128,21.43,1.543,24.784-3.524c2.033-3.074,0.995-6.825-1.772-7.043c-1.585-0.128-1.873-1.521-1.769,0
|
12
|
+
c0.101,1.518-2.103,5.766-7.281,6.271c-5.181,0.508-12.033-0.622-13.962-2.75c-1.931-2.128-1.187-4.564-3.54-5.285
|
13
|
+
C18.542,28.425,18.534,32.76,18.432,33.268z M32.594,28.173c0,0,0.541,2.114,0.179,4.42c-0.36,2.306,2.351,2.692,5.24,2.306
|
14
|
+
c2.89-0.383,2.711-3.362,2.348-4.226C40.001,29.806,37.109,25.002,32.594,28.173z M53.672,25.197
|
15
|
+
c-0.216,6.583,2.778,7.931,2.778,7.931c4.298,1.792,3.663-0.104,3.663-0.104s1.449-2.011-0.566-5.612
|
16
|
+
C57.533,23.808,53.672,25.197,53.672,25.197z M0.599,29.066c-0.782,4.104-1.214,7.245,1.422,11.753
|
17
|
+
c2.545,4.352,10.667,6.253,18.081,7.973c7.415,1.723,19.728,1.29,24.787,0.609c5.01-0.676,21.534-6.048,22.754-13.444
|
18
|
+
c1.219-7.396-0.814-12.867-4.064-16.008c-3.25-3.141-17.676-3.851-21.942-4.258c-4.266-0.404-24.601,2.252-28.442,2.636
|
19
|
+
C6.634,18.983,2.272,20.287,0.599,29.066z M5.476,25.824c0,0,1.131-3.076,5.28-3.444c5.794-0.514,18.49-2.027,26.411-2.229
|
20
|
+
c7.924-0.202,20.824,0.101,23.567,3.445c2.743,3.343,3.047,7.497,2.439,11.955c-0.611,4.46-12.292,9.394-21.942,10.202
|
21
|
+
c-9.65,0.811-24.418-1.258-31.851-4.529C4.966,39.28,4.198,35.8,4.257,32.309C4.3,29.727,5.476,25.824,5.476,25.824z M6.925,15.654
|
22
|
+
c0,0,27.438-4.402,51.339-1.76l1.769-1.761c0,0-12.097-3.083-23.012-4.404c-0.696-0.082,6.195-5.503,4.424-7.043
|
23
|
+
c-1.769-1.543-15.045,0-15.045,0s5.753,5.723,4.424,6.162C29.497,7.29,15.113,9.71,6.039,13.013
|
24
|
+
C-3.032,16.316,6.925,15.654,6.925,15.654z"/>
|
25
|
+
</g>
|
26
|
+
</svg>
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1 @@
|
|
1
|
+
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 7"><style>.st0{fill:#fff}</style><path class="st0" d="M0 0h1.7l1.8 4.9L5.4 0H7L4.2 7H2.8L0 0zm8.2 0h1.5v7H8.2V0zm3.3 0h2.9C16 0 17 1 17 2.4c0 1.6-1.3 2.4-2.8 2.4H13V7h-1.5V0zm2.7 3.5c.8 0 1.2-.5 1.2-1.1 0-.7-.5-1.1-1.2-1.1H13v2.1h1.2z"/></svg>
|
@@ -0,0 +1,56 @@
|
|
1
|
+
---
|
2
|
+
hologram: true
|
3
|
+
title: Atomic design
|
4
|
+
name: 2_atomic
|
5
|
+
category: Atomic design
|
6
|
+
---
|
7
|
+
|
8
|
+
> Here to briefly describe about Atomic Design for management of our systems.
|
9
|
+
|
10
|
+
## DRY is important
|
11
|
+
|
12
|
+
It's very important to know that design systems allow us to build through a recureent process that we can use across projects. And alse they can be customized to fit specific needs.
|
13
|
+
|
14
|
+
We use he concept of Atomic design for better managing, sorting and maintenance, make the things to be re-useful, scalable and modular as well.
|
15
|
+
|
16
|
+
Keep DRY! Don't Repeat Yourself.
|
17
|
+
|
18
|
+
## What is Atomic design
|
19
|
+
|
20
|
+
Atomic design is a methodology for creating design systems. There are five distinct levels describe from general to the specific of whole designing elements in our design flow. Below shows you each stage in more detail. (following source from: [Atomic WebDesign](http://bradfrost.com/blog/post/atomic-web-design/))
|
21
|
+
|
22
|
+
<br/>
|
23
|
+
|
24
|
+
#### Atoms
|
25
|
+
|
26
|
+
Atoms are the basic building blocks of matter. they are **HTML tags**, such as a label, an input or a button in our web interfaces.
|
27
|
+
|
28
|
+
<br/>
|
29
|
+
|
30
|
+
#### Molecules
|
31
|
+
|
32
|
+
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. For example, a form label, input or button aren't too useful by themselves, but combine them together as a form element and now they can actually do something together.
|
33
|
+
|
34
|
+
<br/>
|
35
|
+
|
36
|
+
#### Organisms
|
37
|
+
|
38
|
+
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. For example, a form label, input or button aren't too useful by themselves, but combine them together as a form element and now they can actually do something together.
|
39
|
+
|
40
|
+
<br/>
|
41
|
+
|
42
|
+
#### Templates
|
43
|
+
|
44
|
+
At this stage, Templates consist mostly of groups of organisms stitched together to form pages. it's here where we start to see the design coming together and start seeing things like layout in action.
|
45
|
+
|
46
|
+
Yes, you can see this is where clients start seeing the final design in place as HTML wireframe.
|
47
|
+
|
48
|
+
<br/>
|
49
|
+
|
50
|
+
#### Pages
|
51
|
+
|
52
|
+
Pages are specific instances of templates.( placeholder contents are set ex. image...) and accurate depiction of what a user will ultimately see. They are also the place to test variations in templates...(what a headline containing 40 characters looks like...etc.), they are the templates given context.
|
53
|
+
|
54
|
+
<br/>
|
55
|
+
|
56
|
+
references from: [Atomic Web Design](http://bradfrost.com/blog/post/atomic-web-design/)
|
@@ -0,0 +1,101 @@
|
|
1
|
+
---
|
2
|
+
hologram: true
|
3
|
+
title: Develop principles
|
4
|
+
name: index
|
5
|
+
category: index
|
6
|
+
---
|
7
|
+
|
8
|
+
> Yes, we use Bootstrap as our basic css framework, and use SCSS and Compass for our improvements. Both them are used from ruby gems (check the Gemfiles).
|
9
|
+
|
10
|
+
## Conventions
|
11
|
+
|
12
|
+
* Use soft-tabs with a two space indent.
|
13
|
+
* Keep sorted in first alphabetical order of rule declarations.
|
14
|
+
* Put spaces before `{` in declarations.
|
15
|
+
* Put spaces after `:` in declarations.
|
16
|
+
* Put line breaks between rulesets.
|
17
|
+
* Place closing braces of declaration blocks on a new line.
|
18
|
+
* When grouping selectors, keep individual selectors to a single line.
|
19
|
+
|
20
|
+
examples
|
21
|
+
|
22
|
+
```
|
23
|
+
.recipes-order {
|
24
|
+
border-bottom: 1px solid #ebe5e1;
|
25
|
+
line-height: 1.7;
|
26
|
+
margin-bottom: 0;
|
27
|
+
padding-bottom: 10px;
|
28
|
+
text-align: right;
|
29
|
+
|
30
|
+
a {
|
31
|
+
color: #999;
|
32
|
+
|
33
|
+
&:hover {
|
34
|
+
color: #5c4545;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
38
|
+
```
|
39
|
+
|
40
|
+
<br/>
|
41
|
+
// keep individual selectors to a single line while grouping selectors
|
42
|
+
|
43
|
+
```
|
44
|
+
.fav-count,
|
45
|
+
.view-count,
|
46
|
+
.dish-count {
|
47
|
+
font-size: 12px;
|
48
|
+
margin-right: 0;
|
49
|
+
}
|
50
|
+
```
|
51
|
+
<br/>
|
52
|
+
<hr/>
|
53
|
+
### Formating
|
54
|
+
|
55
|
+
* Specifying units for zero values, write `margin: 0;` instead of `margin: 0px;` .
|
56
|
+
* Use hex color for rules, e.g., `#000` instead of `#000000` .
|
57
|
+
* Use `//` for comment blocks instead of `/* */` .
|
58
|
+
* Use `-` instead of `_` or camel case for naming.
|
59
|
+
|
60
|
+
examples
|
61
|
+
|
62
|
+
// default block style
|
63
|
+
|
64
|
+
```
|
65
|
+
.inner-block {
|
66
|
+
border: 1px solid #eeede8;
|
67
|
+
color: #000;
|
68
|
+
margin-top: 0;
|
69
|
+
}
|
70
|
+
```
|
71
|
+
|
72
|
+
<br/>
|
73
|
+
<hr/>
|
74
|
+
### Misc
|
75
|
+
|
76
|
+
* For the nesting in SCSS, four levels deep is the limit. (...OK, let's aim the goal to three levels !)
|
77
|
+
* Never ever let your codelines up to more than 200 lines in every single file. Once you over lines, then you need to step back and rethink your overall strategy. (e.g., does it need to be break into as several small files as makes sense? or ask yourself is there something wrong with my thought ?...)
|
78
|
+
* List `@extend` or `@include` first ( `@extend` must be the first when both them exist) before regular rules.
|
79
|
+
* Prefer import specific things when you need it in single file instead of `@import "compass";` in only one main file.
|
80
|
+
* Partials should be named with `_`, e.g., `_recipe-card.scss` .
|
81
|
+
|
82
|
+
examples
|
83
|
+
|
84
|
+
```
|
85
|
+
@import "compass/css3/transition";
|
86
|
+
|
87
|
+
.group_1 {
|
88
|
+
@extend .group;
|
89
|
+
@include transition(all 0.3s ease);
|
90
|
+
|
91
|
+
background-color: #ebe5e1;
|
92
|
+
border: 1px solid #d8f0d8;
|
93
|
+
|
94
|
+
.group-name {
|
95
|
+
background-color: #d8f0d8;
|
96
|
+
border-bottom: 1px solid #d8f0d8;
|
97
|
+
color: #3c4e3c;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
```
|
@@ -0,0 +1,22 @@
|
|
1
|
+
//
|
2
|
+
// Default global definitons
|
3
|
+
//
|
4
|
+
// --------------------------------
|
5
|
+
// default body styles
|
6
|
+
// --------------------------------
|
7
|
+
body {
|
8
|
+
font-family: $font-family;
|
9
|
+
letter-spacing: $letter-spacing;
|
10
|
+
}
|
11
|
+
|
12
|
+
::selection {
|
13
|
+
color: #564e42;
|
14
|
+
background: #e3d6cc;
|
15
|
+
}
|
16
|
+
|
17
|
+
.inner-block {
|
18
|
+
background-color: #fff;
|
19
|
+
border: 1px solid #ebe5e1;
|
20
|
+
margin-bottom: 10px;
|
21
|
+
padding: 20px 15px;
|
22
|
+
}
|
@@ -0,0 +1,95 @@
|
|
1
|
+
// --------------------------------
|
2
|
+
// Components
|
3
|
+
// --------------------------------
|
4
|
+
//
|
5
|
+
// breadcrumbs / pagination / order
|
6
|
+
@import "components/breadcrumbs";
|
7
|
+
@import "components/pagination";
|
8
|
+
@import "components/sorting-cards";
|
9
|
+
|
10
|
+
// --------------------------------
|
11
|
+
// Form component
|
12
|
+
// --------------------------------
|
13
|
+
// - search form
|
14
|
+
@import "components/search-form";
|
15
|
+
// - comment form
|
16
|
+
@import "components/comments/comment-form";
|
17
|
+
|
18
|
+
// --------------------------------
|
19
|
+
// Single comments
|
20
|
+
// --------------------------------
|
21
|
+
@import "components/single_comment/single-comment";
|
22
|
+
|
23
|
+
// --------------------------------
|
24
|
+
// Alert
|
25
|
+
// --------------------------------
|
26
|
+
@import "components/alerts/alert-global";
|
27
|
+
@import "components/alerts/alert-market";
|
28
|
+
|
29
|
+
// --------------------------------
|
30
|
+
// Navigation
|
31
|
+
// --------------------------------
|
32
|
+
// - recipes nav
|
33
|
+
@import "components/navigations/recipe-nav";
|
34
|
+
// - categories nav
|
35
|
+
@import "components/navigations/categories-nav";
|
36
|
+
@import "components/navigations/categories-nav-responsive";
|
37
|
+
// - brands nav
|
38
|
+
@import "components/navigations/brand-tabs-nav";
|
39
|
+
// - blog nav
|
40
|
+
@import "components/navigations/blog-nav";
|
41
|
+
// - tv nav
|
42
|
+
@import "components/navigations/tv-nav";
|
43
|
+
|
44
|
+
// --------------------------------
|
45
|
+
// Cards
|
46
|
+
// --------------------------------
|
47
|
+
// - recipe card
|
48
|
+
@import "components/cards/recipe-card"; //must imported before others
|
49
|
+
@import "components/cards/list-card";
|
50
|
+
@import "components/cards/photo-card";
|
51
|
+
// - dish card
|
52
|
+
@import "components/cards/dish-card";
|
53
|
+
// - product card in market
|
54
|
+
@import "components/cards/product-card";
|
55
|
+
// - video card in TV
|
56
|
+
@import "components/cards/video-card";
|
57
|
+
|
58
|
+
// --------------------------------
|
59
|
+
// Recipe pieces
|
60
|
+
// --------------------------------
|
61
|
+
@import "components/recipes/ingredients";
|
62
|
+
@import "components/recipes/steps";
|
63
|
+
@import "components/recipes/notes";
|
64
|
+
|
65
|
+
// --------------------------------
|
66
|
+
// Media blocks
|
67
|
+
// --------------------------------
|
68
|
+
// block thumbs //Figure with caption
|
69
|
+
// @import "components/medias/blog-feeds";
|
70
|
+
// @import "components/medias/icook-videos";
|
71
|
+
// @import "components/medias/popular-categories";
|
72
|
+
// @import "components/medias/popular-recipes";
|
73
|
+
// @import "components/medias/hot-categories";
|
74
|
+
// @import "components/medias/user-recipes";
|
75
|
+
// @import "components/medias/pr-lists";
|
76
|
+
// @import "components/medias/recipe-reference";
|
77
|
+
// block cover
|
78
|
+
@import "components/medias/categories-cover";
|
79
|
+
@import "components/medias/brand-cover";
|
80
|
+
// block nested
|
81
|
+
// @import "components/medias/business-kitchen";
|
82
|
+
// @import "components/medias/brand-product";
|
83
|
+
|
84
|
+
// --------------------------------
|
85
|
+
// Accordion
|
86
|
+
// --------------------------------
|
87
|
+
// market - qna
|
88
|
+
// @import "components/accordion";
|
89
|
+
|
90
|
+
// --------------------------------
|
91
|
+
// Text
|
92
|
+
// --------------------------------
|
93
|
+
@import "components/text";
|
94
|
+
|
95
|
+
|