Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: scss/_grid.scss

Issue 29361708: Issue 4609 - Default grid component (Closed)
Patch Set: Minor documentation changes. Created Nov. 17, 2016, 6:26 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« html/grid.html ('K') | « html/grid.html ('k') | scss/main.scss » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: scss/_grid.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_grid.scss
@@ -0,0 +1,102 @@
+/*!
+ * This file is part of universal-design-language
+ * Copyright (C) 2016 Eyeo GmbH
+ *
+ * universal-design-language is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * universal-design-language is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/** Grid component */
+
+/**
+ * - .row contains one or more .column(s)
+ * - .row clears .column(s)
+ * - .row negates the left & right padding of it's left-most & right-most
+ * .column(s) while preserving consistent padding between .column(s)
+ */
+.row
+{
+ margin: 0px (-$small-space);
+}
+
+.row:after
+{
+ display: block;
+ clear: both;
+ content: "";
+}
+
+/**
+ * - .column is 100% width by default
+ * - Modifier classes are applied to .column to change it's width
+ * - Modifier classes behave differently on different device widths
+ */
+.column
+{
+ position: relative;
+ width: 100%;
+ min-height: 1px;
+ padding: 0px $small-space;
+}
+
+/* - .column(s) within .row .reverse appear in reverse order
+ * - .column(s) within [dir=rtl] appear in reverse order respectively
+ */
+
+.column,
+[dir="rtl"] .reverse .column
+{
+ float: left;
+}
+
+.reverse .column,
+[dir="rtl"] .column
+{
+ float: right;
+}
+
+@media(min-width: $tablet-breakpoint)
+{
+ .one-fourth
+ {
+ width: 50%;
+ }
+}
+
+@media(min-width: $desktop-breakpoint)
+{
+ .one-half
+ {
+ width: 50%;
+ }
+
+ .one-third
+ {
+ width: 33.333333%;
+ }
+
+ .two-thirds
+ {
+ width: 66.666667%;
+ }
+
+ .one-fourth
+ {
+ width: 25%;
+ }
+
+ .three-fourths
+ {
+ width: 75%;
+ }
+}
« html/grid.html ('K') | « html/grid.html ('k') | scss/main.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld