A
A
Atomic Design System architecture with SCSS, ITCSS
Search…
Introduction
Core principles
Atomic Design
ITCSS
Unifying ITCSS with ADS
Single Responsibility Principle (SRP)
Open / Close Principle (OCP)
Conventions
BEM : presentation
Our flavor of BEM
Prefixes
How to use the Modifier entity
How to use the Element entity
Media / responsives modifiers
General formatting
Declaration Orders
Comments
Naming things
File structure
Files names and block names
implementation guides
Settings and tools
Responsive and modularity rules
Powered By
GitBook
Media / responsives modifiers
When you want a class to apply to a specific media querie, instead of the '--' delimiter, use a '@' delimiter.
Exemple :
<
button
class
=
"
ga-button
ga-button--small
[email protected]
[email protected]
"
>
button text
<
button
>
here we instantiated a class that tell us that the button will be a large one from medium screen and a utility telling us that the button should be hidden for print.
in css, we need to escape the @ :
.ga-button
{
&--large
{
/* large option styles */
}
@media
screen
and
(
min-width = 720px
)
{
&--large\
@from-medium
{
/* large option styles */
}
}
}
.gu-hide
{
@media
screen
and
(
max-width = 720px
)
{
&\
@to-medium
{
display
:
none
!important
;
}
}
@media
screen
and
(
min-width = 720px
)
{
&\
@from-medium
{
display
:
none
!important
;
}
}
}
Conventions - Previous
How to use the Element entity
Next - Conventions
General formatting
Last modified
3yr ago
Copy link