Grid Debug
Pour activer la grid de debug, il faut aller dans config/config.php et activer l'option:
'gridDebug' => true,pour la grid classique'gridFluideDebug' => true,pour la grid fluide
Activer les deux en même temps n'a pas de sens.
ModalsTodo
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, fugiat. Dolores tenetur iusto a alias voluptate accusamus aperiam quidem dolorem, dicta ipsam? Unde quis illum harum, error rerum maxime delectus.
Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Phasellus viverra nulla ut metus varius laoreet. Praesent egestas tristique nibh. Suspendisse non nisl sit amet velit hendrerit rutrum.
Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
if (condition) :
this.delete();
endifHeading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Clamp
Demo Clamp mixin
Il faut importer la fonction @use "framework/clamp" as *;.
S'utilise comme ceci font-size: #{fluid(10px, 82px)};
@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw)
.wrapper > .container
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum deleniti soluta officia eum, est eos veritatis quas exercitationem fugiat cumque culpa non saepe officiis facilis corrupti eaque suscipit id? Beatae!
lists
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque veritatis optio eligendi reprehenderit sint ea minus, esse atque molestiae nam voluptatem nesciunt, eius aut. Corrupti quis harum necessitatibus. Quas, minus.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque veritatis optio eligendi reprehenderit sint ea minus, esse atque molestiae nam voluptatem nesciunt, eius aut. Corrupti quis harum necessitatibus. Quas, minus.
- Unordered lists have basic styles Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas consequatur ipsum dolore ad placeat fuga ut eaque commodi nulla eligendi, amet incidunt quaerat, perferendis sint illum officiis unde libero aliquid?
-
They use the circle list style
- Nested lists styled to feel right
- Can nest either type of list into the other
- Just more list items mama san
- Sed consequat
- leo eget bibendum
- augue velit cursus
- quis gravida magna
- Ordered lists also have basic styles
-
They use the decimal list style
- Ordered and unordered can be nested
- Can nest either type of list into the other
- Last list item just for the fun
- mi a libero
- metus eget egestas
- lacus lacus blandit
- id egestas quam
- mauris ut lacus
TAG
Action
Action
Tables
| Ordre | Nom | Description | Prix |
|---|---|---|---|
| 9 | Audrey Mckinney | Lorem ipsum dolor sit amet | 412 € |
| 17 | Savannah Howard | Consectetur adipiscing elit | 317 € |
| 3 | Morris Cooper | Vestibulum ac diam sit amet quam vehicula | 121 € |
| 5 | Sarah Connor | Quisque velit nisi | 77 € |
FAQ
What is the CSS Grid?
Nam tempor finibus lorem, nec varius arcu convallis sed. Nunc id orci a neque vehicula malesuada. Donec vehicula libero vel leo convallis, nec tincidunt felis tincidunt. Maecenas euismod tristique leo, vel malesuada ligula malesuada sed. Donec eget libero id leo congue venenatis. Sed at risus vel nulla consequat fermentum. Donec et orci mauris. Nullam tempor velit id mi luctus, a scelerisque libero accumsan. In hac habitasse platea dictumst. Cras ac nunc nec massa tristique fringilla. Nullam vehicula magna sit amet magna ullamcorper, at dictum est gravida. Morbi nec magna at quam malesuada accumsan. Suspendisse potenti. Vivamus feugiat massa ut tortor scelerisque, non dapibus nulla consectetur. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed vehicula magna at lacus interdum, quis laoreet nulla condimentum. Aliquam erat volutpat. Cras et nulla in turpis consectetur suscipit. Vivamus lobortis, risus sit amet cursus tincidunt, erat turpis placerat ex, ut placerat justo lorem vel ligula. Fusce non diam felis.
What is the CSS Grid?
Nam tempor finibus lorem, nec varius arcu convallis sed. Nunc id orci a neque vehicula malesuada. Donec vehicula libero vel leo convallis, nec tincidunt felis tincidunt. Maecenas euismod tristique leo, vel malesuada ligula malesuada sed. Donec eget libero id leo congue venenatis. Sed at risus vel nulla consequat fermentum. Donec et orci mauris. Nullam tempor velit id mi luctus, a scelerisque libero accumsan. In hac habitasse platea dictumst. Cras ac nunc nec massa tristique fringilla. Nullam vehicula magna sit amet magna ullamcorper, at dictum est gravida. Morbi nec magna at quam malesuada accumsan. Suspendisse potenti. Vivamus feugiat massa ut tortor scelerisque, non dapibus nulla consectetur. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed vehicula magna at lacus interdum, quis laoreet nulla condimentum. Aliquam erat volutpat. Cras et nulla in turpis consectetur suscipit. Vivamus lobortis, risus sit amet cursus tincidunt, erat turpis placerat ex, ut placerat justo lorem vel ligula. Fusce non diam felis.
Form Demo
il reste la partie submit qui n'est pas faite. à voir comment je m'y prend. Uniforms?
Attention Il faut que les variable $wrapper-gutter-mobile: 15px; & $wrapper-gutter-desktop: 0; qui sont dans _forms.scss soit reglé comme leur omologues dans _wrapper.scss
Grid Demo
Il faut supprimer le css de demo dans _wrapper.scss
Quand ca déborde en mobile, c'est le padding des cellules
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
1
2
3
4
1
2
3
1
2
1
Simple
Grid
System
You can also merge rows
Midle
You can also merge rows
Midle
Midle
Swapping Places
Super useful when you're working with media queries.
You can reorder anything. In this example we used: "grid-row: 12; grid-column: 4 / 7;" to bring 4 column to 2 place.
1
2
3
4
1
2
3
4
5
6
Nested
You probably never gonna need nested columns with the CSS Grid, but if you do, use the class .nested and you have 12 columns inside any other column.
Six
Six
Four
Four
Four
Muestre sus convicciones
Visitar la tienda oficialSoutenez nos actions en portant nos couleurs grâce à la boutique officielle de Sea Shepherd France !
